initMap() {
init().then(() => {
this.createView('map-typhonn')
})
}
async createView(div: string) {
const win: any = window
const layers = []
const tileInfo = {
dpi: 90.71428571427429,
rows: 256,
cols: 256,
compressionQuality: 0,
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4490
},
lods: win.lods
}
const [WebTileLayer] = await getModules(['esri/layers/WebTileLayer'])
const layer = new WebTileLayer({
urlTemplate: `https://{subDomain}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&FORMAT=tile&tk=${getTK()}`,
tileInfo,
spatialReference: {
wkid: 4490
},
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
fullExtent: {
xmin: -180,
ymin: -90,
xmax: 180,
ymax: 90,
spatialReference: {
wkid: 4490
}
}
})
if (layer) {
layers.push(layer)
}
const layer2 = new WebTileLayer({
urlTemplate: `https://{subDomain}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&FORMAT=tile&tk=${getTK()}`,
tileInfo,
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
spatialReference: {
wkid: 4490
},
fullExtent: {
xmin: -180,
ymin: -90,
xmax: 180,
ymax: 90,
spatialReference: {
wkid: 4490
}
}
})
layer2.visible = true
if (layer) {
layers.push(layer2)
}
const layer3 = new WebTileLayer({
urlTemplate: `https://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&FORMAT=tile&tk=${getTK()}`,
tileInfo,
spatialReference: {
wkid: 4490
},
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
fullExtent: {
xmin: -180,
ymin: -90,
xmax: 180,
ymax: 90,
spatialReference: {
wkid: 4490
}
}
})
layer3.visible = false
if (layer) {
layers.push(layer3)
}
const modules = await getModules(['esri/Map', 'esri/Basemap'])
const [Map, Basemap] = modules
// 地图对象
const customBasemap = new Basemap({
baseLayers: layers
})
const map = new Map({
basemap: customBasemap,
layers: []
})
const MapView = await getModule('esri/views/MapView')
this.view = new MapView({
container: div,
map,
spatialReference: {
wkid: 4490
},
extent: {
xmax: 166.6205088463888,
xmin: 88.92438150260338,
ymax: 49.90942361300462,
ymin: 1.6236947552848697,
spatialReference: { wkid: 4490 }
}
})
this.view.ui.remove('attribution')
this.view.ui.empty('top-left')
this.view.ui.empty('top-right')
this.view.popup.autoOpenEnabled = false
// this.view.watch('extent', (event: any) => {
// console.log(event)
// })
this.view.when(() => {
// this.changeCloud()
this.mouseOverHandler()
this.drawCordon()
})
}