4的版本和3的版本差异在于:
(1)3的版本中之需要引入一个map创建一个map对象即可,4的版本必须要一个MapView来配合map才能正常显示效果
(2)用loadModules加载esri/Map,在4的版本中Map为大写,3为小写
在使用loadModules加载arcgisapi for js中的模块的时候如果不传入第二个option参数则会去官网找最新的js和css包,当然可以添加opetion参数让esload去自己指定的地址加载arcgisapi for js的包和css文件等。
<template>
<div class="wrapper">
<div id="map" class="map"></div>
</div>
</template>
<script>
import esriLoader from "esri-loader";
export default {
name: "",
components: {},
props: {},
data() {
return {};
},
created() {},
mounted() {
esriLoader.loadModules(["esri/Map","esri/views/MapView"]).then(([Map,MapView]) => {
const map = new Map({
basemap: "topo-vector",
});
const view = new MapView({
container: "map",
map: map,
zoom: 4,
center: [15, 65],
});
});
},
computed: {},
methods: {},
};
</script>
<style scoped>
.map {
width: 100%;
height: 100vh;
}
</style>