vue2引入arcgis 创建一个3D地图

创建一个vue2项目

npm create vuejsapidemo
----
之后选择 default Vue2

进入项目

cd vuejsapidemo

安装 esri-loader --save-dev

npm install esri-loader --save-dev

启动项目:

npm run serve

查看引用：

Arcgis的API文档：

网址：https://developers.arcgis.com/javascript/latest/sample-code/intro-sceneview/

修改App.vue

<template>
  <div id="sceneview">

  </div>
</template>

<script>
import {loadModules} from 'esri-loader'
export default {
  name: 'App',
  components: {

  },
  methods:{
    //创建三维场景
    _createSceneView:function(){
      let options={
        url:'https://js.arcgis.com/4.29/',
        css:'https://js.arcgis.com/4.29/esri/themes/light/main.css'
      };
      loadModules([ "esri/Map", "esri/views/SceneView"],options).then(([Map,SceneView])=>{

        let map = new Map({
          basemap: "streets",
          ground: "world-elevation"
        });
        let view = new SceneView({
          container: "sceneview", // Reference to the DOM node that will contain the view
          map: map // References the map object created in step 3
        });
        console.log(view)


      })

    }
  },
  mounted:function(){
    this._createSceneView()
  }
}
</script>

<style>
#sceneview {
  position:absolute;
  width: 100%;
  height: 100%;
}
</style>

最终展示：