1.安装@arcgis/core
npm i @arcgis/core -s
2.加载天地图作为底图，初始化地图项目
<template>
<div class="app-container">
<div id="mapdiv"></div>
</div>
</template>
<script>
import "@arcgis/core/assets/esri/themes/light/main.css";
import Basemap from "@arcgis/core/Basemap";
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import WMTSLayer from "@arcgis/core/layers/WMTSLayer";
import Point from "@arcgis/core/geometry/Point";
export default {
name: "index",
data() {
return {};
},
mounted() {
const tk = "天地图开发id"; // 你申请的key
// 矢量底图
const layer = new WMTSLayer({
url: "/vec_c/wmts",
customParameters: {
tk: tk,
},
});
//矢量注记
const annaLayer = new WMTSLayer({
url: "/cva_c/wmts",
customParameters: {
tk: tk,
},
});
let mybasemap = new Basemap({
baseLayers: [layer, annaLayer],
});
let map = new Map({
basemap: mybasemap,
});
const view = new MapView({
map,
container: "mapdiv",
});
view.when((params) => {
view.scale = 1000000;
let pt = new Point({
latitude: 23.186874,
longitude: 113.284777
});
view.goTo(pt)
})
},
methods: {},
};
</script>
<style scoped>
#mapdiv {
width: 100vw;
height: 100vh;
}
.app-container {
padding: 0px;
}
</style>
