невозможно запустить ArcGIS для запуска сценариев в приложении vue - PullRequest
Новая
       19

невозможно запустить ArcGIS для запуска сценариев в приложении vue

0 голосов
/ 17 апреля 2020

Я пытаюсь включить скрипт запуска для карты ar c gis, но для этого требуется, чтобы сначала был запущен тег скрипта, который есть в моей функции mount () 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>

Ответы [ 2 ]

0 голосов
/ 17 апреля 2020

вы можете использовать "esri-loader" в вашем vue приложении 

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>
0 голосов
/ 17 апреля 2020

Вы можете попробовать ниже. Это будет ждать, пока 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/
  });
}
...