第一步:在vue中使用arcgis需要一个叫做esri-loader的东西来帮我们加载arcgis文件
npm install esri-loader -S
第二步:封装一个vue组件
<template>
<div id="arcgis"></div>
</template>
<script>
import { loadModules } from 'esri-loader';
export default {
name: 'MapConfig',
data() {
return {}
},
methods: {
createArcgis() {
loadModules(['esri/Map', 'esri/views/MapView'], { css: true }).then(([ArcGISMap, MapView]) => {
const map = new ArcGISMap({
basemap: 'streets',
})
this.view = new MapView({
container: 'arcgis',
map: map,
center: [104.072044, 30.663776],
zoom: 8,
})
})
},
},
mounted() {
this.createArcgis()
},
beforeDestroy() {
if (this.view) {
// destroy the map view
this.view.container = null
}
},
}
</script>
<style scoped>
#arcgis{
padding: 0;
margin: 0;
width: 100%;
height: 400px;
}
</style>
第三步:在需要展示的modal中引入该组件(引入路径请根据自己的实际情况进行修改)
//引入封装的ArcGis组件
import MapConfig from '@/components/ArcGis'
//在components 声明一下
components: {
MapConfig
}
//在需要的地方使用即可
<map-config style="margin-top:20px;" />
效果如下:
初次尝试写博客,请大家多多指教,欢迎大家留言讨论
详情请看:https://developers.arcgis.com/javascript/latest/guide/vue/