Leaflet加载天地图

采用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);
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26