关于在VUE中使用ArcGis地图，如何在modal中创建一个案例

第一步：在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/