Leaflet加载天地图

最新推荐文章于 2025-09-24 18:14:26 发布

原创最新推荐文章于 2025-09-24 18:14:26 发布 · 3.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#leaflet #webgis

GIS 专栏收录该内容

11 篇文章

订阅专栏

本文展示了如何利用JavaScript库Leaflet，结合天地图的WMTS服务，实现在线地图应用中加载天地图的矢量（VEC_C）和标签（CVA_C）瓦片。通过设置地图中心点、缩放级别以及配置瓦片层的URL模板，成功地将天地图集成到地图展示中。

采用leaflet完成天地图的瓦片地图的加载。

var map = L.map('map', {
   preferCanvas: true,
     crs: L.CRS.EPSG4326,
     minZoom: 3,
     maxZoom: 20,
     center: [29.563761, 106.550464],
     zoom: 15,
 });

 initLayers();

 function initLayers() {
     const VEC_C = 'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=';
     const CVA_C = 'http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk='
     const TK_KEY = "天地图key";
     L.tileLayer(VEC_C + TK_KEY, {
         maxZoom: 20,
         tileSize: 256,
         zoomOffset: 1,
     }).addTo(map);
     L.tileLayer(CVA_C + TK_KEY, {
         maxZoom: 20,
         tileSize: 256,
         zoomOffset: 1,
     }).addTo(map);
 }