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

妖狐艹你老母 2023-07-13 10:51 22阅读 0赞

# 效果图： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkyOTEz_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkyOTEz_size_16_color_FFFFFF_t_70 1][]

# 加载天地图、谷歌地图代码如下： #

// 天地图墨卡托
    		//底图
    		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][https_uums.tianditu.gov.cn_register]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkyOTEz_size_16_color_FFFFFF_t_70]: /images/20230529/8b1aaf47d8b24d9eb3bd94b27fe82bb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkyOTEz_size_16_color_FFFFFF_t_70 1]: /images/20230529/64408d13906641dba4b3dedca5b8c70c.png
[https_uums.tianditu.gov.cn_register]: https://uums.tianditu.gov.cn/register