VUE での ArcGis マップの使用について、モーダルでケースを作成する方法

最初のステップ: vue で arcgis を使用するには、arcgis ファイルの読み込みを支援する esri-loader と呼ばれるものが必要です

npm install esri-loader -S

ステップ 2: 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>

ステップ 3: 表示する必要があるモーダルにコンポーネントをインポートします (実際の状況に応じてインポート パスを変更してください)

//引入封装的ArcGis组件
import MapConfig from '@/components/ArcGis'

//在components 声明一下
components: {
    MapConfig
}

//在需要的地方使用即可
<map-config style="margin-top:20px;" />

効果は次のとおりです。

初めてブログを書こうと思っています。もっとアドバイスをお願いします。メッセージを残して議論することも歓迎です。

詳細については、https: //developers.arcgis.com/javascript/latest/guide/vue/を参照してください。