arcgisMap.vue
1.83 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<template>
<div>
<div id="arcgisMap"></div>
</div>
</template>
<script>
import { loadModules } from "esri-loader";
export default {
data() {
return {}
},
mounted() {
loadModules([
"esri/Map",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/geometry/Extent",
"dojo/domReady!"
]).then(([Map, MapView, WebTileLayer, Extent]) => {
this.$parent.mapView = new MapView({
container: "arcgisMap",
map: new Map({
basemap: {
baseLayers: [
new WebTileLayer({
urlTemplate: "http://mt{subDomain}.google.cn/vt/lyrs=s&hl=zh-CN&gl=CN&x={col}&y={row}&z={level}&s=Gali",
subDomains: ["0", "1", "2"]
}),
new WebTileLayer({
urlTemplate: "http://mt{subDomain}.google.cn/vt/imgtp=png32&lyrs=h@207000000&hl=zh-CN&gl=cn&x={col}&y={row}&z={level}&s=Galil",
subDomains: ["0", "1", "2"]
})
]
}
}),
extent: new Extent({
xmin: 413417,
ymin: 3715140,
xmax: 665512,
ymax: 3902165,
spatialReference: 4545
}),
zoom: 5
});
});
},
methods: {
}
}
</script>
<style>
#arcgisMap {
width: 100%;
height: 100%;
}
</style>