无法运行 vue 应用程序中的 arcgis 入门脚本

Question

我正在尝试包含一些用于 arc gis 地图的启动脚本，但它首先需要我在 mounted() prop 函数中的脚本标记运行。有谁知道在正确需要脚本后我可以使用什么钩子来运行这段代码？尝试运行开始时的代码给我一个错误，它缺少脚本的依赖项。

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

我有以下应用程序设置


<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

您可以试试下面的方法。这将等到 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-Single-Page 文件中

<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>

这是一个最简单的二维地图示例

<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>

无法运行 vue 应用程序中的 arcgis 入门脚本

unable to run arcgis getting started scripts in vue app

javascript

arcgis

vue.js

无法 运行 vue 应用程序中的 arcgis 入门脚本

unable to run arcgis getting started scripts in vue app

javascript

arcgis

vue.js

无法运行 vue 应用程序中的 arcgis 入门脚本