无法在vue应用中运行arcgis入门脚本

Question

我正在尝试为arc gis映射添加一些启动脚本，但是它需要我在mount（）prop函数中具有的script标签才能首先运行。是否有人知道在正确需要脚本后可以使用哪个钩子来运行此代码？尝试在启动时运行代码给我一个错误，它缺少脚本中的依赖项。

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

我有以下应用设置

<template>
  <div id="app">
  <div id="viewDiv"></div>
    <div>
      <button @click="addNodes">Select verts</button>
      <p>Select then click the map to place a node </p>
    </div>

    <div>
      <button @click="drawArea">Define area</button>
      <p>select to draw a shape connecting your nodes</p>
    </div>
  </div>
</template>

<script>
require([
          "esri/Map",
          "esri/views/MapView",
          "esri/widgets/Search",
          "esri/Graphic",
          "esri/layers/GraphicsLayer"
        ], function(Map, MapView, Search, Graphic, GraphicsLayer) {

        var map = new Map({
          basemap: "topo-vector"
        });


        var view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-118.80500, 34.02700], // longitude, latitude
          zoom: 13
        });

///////////CREATE INSTANCE OF MODULE //////////////////
        var search = new Search({
        view: view
      });

        var graphicsLayer = new GraphicsLayer();
         map.add(graphicsLayer);

      view.ui.add(search, "top-right");
</script>


<script>
export default {
  name: 'App',
  data(){
      return{
        nodes:[],
        addingNodes: false,
        xClick: null,
        yClick: null,
      }
  },
  mounted() {
      let mapScript = document.createElement('script')
      mapScript.setAttribute('src', 'https://js.arcgis.com/4.15/')
      document.head.appendChild(mapScript)
    },
  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

您可以尝试以下方法。这将等到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/
  });
}

Answer 2

您可以在vue应用中使用“ esri-loader”

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>