Leaflet学习文档-加载底图（天地图，百度，腾讯等）

XYL8023

已于 2025-02-26 17:54:00 修改

阅读量522

点赞数 4

分类专栏： Leaflet 文章标签：学习前端 javascript

于 2025-02-26 17:53:43 首次发布

本文链接：https://blog.youkuaiyun.com/xiuyu_lj/article/details/145878681

版权

Leaflet 专栏收录该内容

7 篇文章

订阅专栏

Leaflet加载地图底图服务

（1）Leaflet学习文档-初始

在第一篇leaflet文章中可以初步定义一个地图和加载对应底图，但是会出现底图服务无法加载问题，底图对于整个地图来说是灵魂的存在，我们需要解决这个问题，就需要知道我们国内地图服务的有那些可以满足我方使用，目前国内流行的底图主要包括天地图，百度，腾讯等地图服务，我们可以根据需求使用对应的底图信息。

一、加载天地图

天地图是由中国国家测绘地理信息局主导建设的国家级地理信息公共服务平台，旨在提供权威、全面、统一的地理信息服务。它整合了电子地图、卫星影像、地形图等地理事物信息，支持公众与企业在线访问（天地图官网）。

1. 申请key

天地图加载需要申请对应的key才能进行请求加载，天地图key的申请可参考（天地图key申请流程）

2. 天地图加载

天地图代码示例

 // 初始化地图实例，设置中心坐标和缩放级别
    const map = L.map('map').setView([39.90002, 116.46], 10);
    // 天地图key
    const mapKey =  '37d883978b54bc12f58d30492062d574'
    // 添加底图瓦片层（以天地图为例）
    var vecLayer = L.tileLayer(`http://t{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=${mapKey}`, {
      maxZoom: 19,
      // 子域名
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
    }).addTo(map);

    var cvaLayer = L.tileLayer(`http://t{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=${mapKey}`, {
      maxZoom: 19,
      // 子域名
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
    }).addTo(map);

天地图展示效果

在这里插入图片描述

二、加载百度地图

1.百度地图加载

追加投影JS库（示例）：

<! -- 在页面追加两个新的js库，这两个主要用于对百度地图的坐标进行计算 -->
<script src="https://cdn.bootcdn.net/ajax/libs/proj4js/2.8.0/proj4.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/proj4leaflet/1.0.1/proj4leaflet.js"></script>

设置百度投影信息

// 百度地图投影信息，用于在Leaflet中使用百度地图的投影信息
const crs = new L.Proj.CRS(
        "EPSG:900913",
        "+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs",
        {
          resolutions: (function() {
            var level = 19;
            var res = [];
            res[0] = Math.pow(2, 18);
            for (var i = 1; i < level; i++) {
              res[i] = Math.pow(2, 18 - i);
            }
            return res;
          })(),
          origin: [0, 0],
          bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
        }
      );

加载百度地图

const map = L.map("map", {
      crs: crs,
     }).setView([39.90002, 116.46], 10);

 const bdLayer = new L.TileLayer(
   "http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&udt=20191111",
   {
     maxZoom: 20,
     minZoom: 3,
     subdomains: [0, 1, 2],
     tms: true
   }
 ).addTo(this.map);

百度地图展示效果

在这里插入图片描述

三、加载腾讯地图

加载腾讯地图代码（示例）

const txLayer = new L.TileLayer(
   "http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0",
   {
     maxZoom: 20,
     minZoom: 3,
     subdomains: [0, 1, 2],
     tms: true
   }
 ).addTo(map);