Leaflet加载天地图

最新推荐文章于 2024-07-11 16:13:49 发布

liuccn

最新推荐文章于 2024-07-11 16:13:49 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： GIS 文章标签： leaflet webgis

本文链接：https://blog.youkuaiyun.com/lc_2014c/article/details/128069812

GIS 专栏收录该内容

11 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

采用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);
 }