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

你可能感兴趣的:(GIS,gis,typescript)