leafletはGoogleの映像地図、天地図の映像地図、天地図の映像をロードします。
1481 ワード
効果図:
天地図、Googleの地図コードは以下の通りです。
天地図、Googleの地図コードは以下の通りです。
//
//
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