leaflet加载谷歌影像地图、天地图影像地图、天地图影像注记

效果图：

 

 

加载天地图、谷歌地图代码如下：
// 天地图墨卡托
//底图
const image = L.tileLayer('http://t{s}.tianditu.gov.cn/img_w/wmts?tk=密钥&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
})
//注记
const cia = L.tileLayer('http://t{s}.tianditu.gov.cn/cia_w/wmts?tk=密钥&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
transparent: true,
zIndex: 3,
})
//天地图图组
const tiandiMap = L.layerGroup([image, cia, ]);

//谷歌地图
const satelliteMap = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
});

//地图对象
this.map = L.map('map', {
crs: L.CRS.EPSG3857,
center: [34.54083333333333, 108.92361111111111],
maxZoom: 18,
zoom: 4,
minZoom: 2,
attributionControl: false,
layers: [tiandiMap],
zoomControl: false
});
const baseLayers = {
"天地图影像": tiandiMap,
"谷歌影像": satelliteMap,
}
var layerControl = L.control.layers(baseLayers, null);
layerControl.addTo(this.map);
天地图需要申请密钥，注册地址：https://uums.tianditu.gov.cn/register
————————————————
版权声明：本文为CSDN博主「程序猿小郑」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34492913/article/details/104802149