无法在vue应用程序中运行arcgis启动脚本

Question

我正在尝试为一个弧形gis映射包含一些启动脚本，但它需要我的挂载()支柱函数中的脚本标记才能首先运行。有人知道在脚本被正确要求之后，我可以用什么钩子来运行这段代码吗？尝试在start上运行代码会给我一个错误，即它丢失了脚本中的依赖项。

我假设脚本在任何依赖项加载之前运行。

我有下面的应用程序设置

<script>
import { loadModules } from 'esri-loader';
export default {
  name: 'App',
  data(){
      return{
        nodes:[],
        addingNodes: false,
        xClick: null,
        yClick: null,
      }
  },
  mounted() {

    loadModules([
            "esri/Map",
            "esri/views/MapView"
        ], { css: true })
        .then(([Map,MapView]) => {
             var map = new Map({
                 basemap: "streets"
             });
             var view = new MapView({
                 container: "map",
                 map: map,
                 zoom: 4,
                 center: [15, 65]
             });
        });


    },
  methods:{
      drawArea(){
        console.log('drawing area')
        if(this.nodes.length > 2){
          console.log('drawing shape')
        }else{
           alert(`you only have ${this.nodes.length} nodes, you need at least 3 to draw a polygon`)
        }
      },
      addNodes(){
        if(this.addingNodes === true){
        console.log('adding nodes')

        let point = {
          x: this.xClick,
          y: this.yClick
        }

        this.nodes = [...this.nodes, point] //add point to the nodes Array
        }
      },
  },

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

  #viewDiv {
      padding: 0;
      margin: 0 auto;
      height: 80%;
      width: 80%;
    }

</style>

Answer 1

您可以在vue应用程序中使用“esri-加载程序”。

npm install "esri-loader"

然后，在Vue-单页文件中

<template>
    <div id="map"></div>
</template>
<style scoped>
    #map{
        width:100%;
        height:300px;
    }
</style>
<script>
import { loadModules } from 'esri-loader';
export default{
    mounted(){

        // lazy load modules
        loadModules([
            'esri/layers/WebTileLayer',
            'esri/Map',
            'esri/views/SceneView',
        ], { css: true })
        .then(([WebTileLayer,Map,SceneView]) => {

            let map = new Map();

            // use Google Map Web tile
            let tiled_layer = new WebTileLayer({
                urlTemplate: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{level}!2i{col}!3i{row}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0',
            });
            map.add(tiled_layer);

            let map_view = new SceneView({
                map:map,
                container:"map",          
                scale:110329633.40563367, 
                center:[105.578034,34.062071]
            });

        });
    }
}
</script>

以下是2D地图的一个最简单的例子

<template>
    <div id="map" style="height:300px;width:300px;"></div>
</template>
<script>
import { loadModules } from 'esri-loader';
export default{
    mounted(){
        loadModules([
            "esri/Map",
            "esri/views/MapView"
        ], { css: true })
        .then(([Map,MapView]) => {
             let map = new Map({
                 basemap: "streets"
             });
             let view = new MapView({
                 container: "map",
                 map: map,
                 zoom: 4,
                 center: [15, 65]
             });
        });
    }
}
</script>

Answer 2

你可以试试下面的方法。这将等到mapScript完成加载，然后调用依赖的代码。

mounted() {
  let mapScript = document.createElement('script')
  mapScript.setAttribute('src', 'https://js.arcgis.com/4.15/')
  document.head.appendChild(mapScript);
  mapScript.addEventListener('load', () => {
      //run your code that is dependent on https://js.arcgis.com/4.15/
  });
}