安装依赖
npm i esri-loader -S
页面中使用
<body>
<div id="viewDiv"></div>
</body>
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
import {loadModules} from "esri-loader";
创建2D视图
MapView通过将对象传递给构造函数来创建一个新的并设置其属性,包括center和zoom,这些属性用于定义视图的初始范围
MapView用于查看2D地图,SceneView用于查看3D地图
mounted() {
let options = {
url: "https://js.arcgis.com/4.17/",
css: "https://js.arcgis.com/4.17/esri/themes/light/main.css"
};
loadModules([
"esri/Map",
"esri/views/MapView",
],options).then(([Map,MapView])=>{
let map = new Map({
basemap: "topo-vector"
})
let view = new MapView({
container: "viewDiv",
map: map,
zoom: 7,
center: [108.17377929686404, 35.69178936670419]
})
})
}
最终代码:复制后,即可使用
<template>
<div id="viewDiv"></div>
</template>
<script>
import {loadModules} from "esri-loader";
export default {
name: "demo",
mounted() {
let options = {
url: "https://js.arcgis.com/4.17/",
css: "https://js.arcgis.com/4.17/esri/themes/light/main.css"
};
loadModules([
"esri/Map",
"esri/views/MapView",
],options).then(([Map,MapView])=>{
let map = new Map({
basemap: "topo-vector"
})
let view = new MapView({
container: "viewDiv",
map: map,
zoom: 7,
center: [108.17377929686404, 35.69178936670419]
})
})
}
}
</script>
<style scoped>
#viewDiv {
padding: 0;
margin: 0;
width: 100%;
height: 95vh;
}
</style>
最终结果图: