如何在vue项目中应用arcgis for javascript

1. 安装esri-loader依赖

npm i esri-loader --save-dev

2. 在页面中引入loadModules

import { loadModules } from 'esri-loader'

3. 使用loadMoudule建立arcgis服务链接，和引入相关模块，创建arcgis应用

// 创建三维场景
    createSceneView() {
      let options = {
        url: 'https://js.arcgis.com/4.14/', // arcgis api
        css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css' // arcgis样式
      }
      loadModules([
        'esri/Map', 
        'esri/views/SceneView'
      ], options).then(([Map, SceneView]) => {
        const map = new Map({ // 创建地图
          basemap: 'streets',
          ground: 'world-elevation'
        })
        // 创建3d视图
        const view = new SceneView({
          container: 'sceneview',
          map: map,
          scale: 50000000,
          center: [-101.17, 21.78]
        })
        console.log(view)
      })
    }

4. 完整代码

<template>
  <div id="sceneview">
   
  </div>
</template>

<script>
import { loadModules } from 'esri-loader'
export default {
  name: 'HomeView',
  components: {
  },
  methods: {
    // 创建三维场景
    createSceneView() {
      let options = {
        url: 'https://js.arcgis.com/4.14/',
        css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'
      }
      loadModules([
        'esri/Map',
        'esri/views/SceneView'
      ], options).then(([Map, SceneView]) => {
        const map = new Map({
          basemap: 'streets',
          ground: 'world-elevation'
        })
        const view = new SceneView({
          container: 'sceneview',
          map: map,
          scale: 50000000,
          center: [-101.17, 21.78]
        })
        console.log(view)
      })
    }
  },
  mounted() {
    this.createSceneView()
  }
}
</script>

<style scoped>
#sceneview {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
}
</style>

5. 效果如图：