модуль эскиза arcgis не будет подключен к DOM - PullRequest
Новая
       19

модуль эскиза arcgis не будет подключен к DOM

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

Я пытаюсь включить модуль эскиза arcgis в мое приложение vue. По какой-то причине при добавлении модуля скетча мой журнал консоли браузера выдает ошибку, что 1-й аргумент не имеет типа узла, тогда он не может загрузить виджет в браузере?

Я не уверен, почему это происходит, но Я пытаюсь следовать примеру кода здесь: https://developers.arcgis.com/javascript/latest/sample-code/sketch-geometries/index.html

<template>
  <div></div>
</template>

<script>
import { loadModules } from "esri-loader";
let E = {}; // placeholder for Esri modules

export default {
  name: "web-map",
  props: {
    coords: {
      type: Object,
      required: true
    },
  },
  data: function() {
    return {
      view: null,
      nodes: []
    };
  },
  mounted() {
    // lazy load the required ArcGIS API for JavaScript modules and CSS
    loadModules([
        "esri/Map", 
        "esri/views/MapView", 
        "esri/geometry/Point", 
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch"], {
      css: true
    }).then(([ArcGISMap, MapView, Point, GraphicsLayer, Sketch]) => {
      E.ArcGISMap = ArcGISMap;
      E.MapView = MapView;
      E.Point = Point;
      var graphicsLayer = new GraphicsLayer();

      const map = new E.ArcGISMap({
        basemap: "topo-vector"
      });

      this.view = new E.MapView({
        container: this.$el,
        map: map,
        center: [this.coords.latitude, this.coords.longitude],
        zoom: 9
      });

        // create a new sketch widget
        const sketch = new Sketch({
          view:this.view,
          layer: graphicsLayer
        });


       this.view.ui.add(sketch, "top-right");
       map.add(graphicsLayer);


    });

  },
  watch: {
    coords() {
      this.showPos();
    }
  },
  beforeDestroy() {
    if (this.view) {
      this.view.container = null;
    }
  },
  methods: {
    showPos() {
      if (E.Point) {
        const point = new E.Point(this.coords.longitude, this.coords.latitude);
        this.view.goTo({ center: point });
      } else {
        console.log("Map modules are still loading...");
      }
    },

    calcAvg(param){
      console.log('calc average',param)

      switch(param) {
          case 'wind':
            console.log('wind nodes',this.nodes)
            break;
          case 'rain':
            console.log('rain nodes',this.nodes)
            break;
          case 'elevation':
            console.log('elevation nodes',this.nodes)
            break;
          default:
            // code block
        }
    },
  }
};
</script>

1 Ответ

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

Ваш импорт не выровнен. У вас есть: 

loadModules([
        "esri/Map", 
        "esri/views/MapView", 
        "esri/geometry/Point", 
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch"], {
      css: true
    }).then(([ArcGISMap, MapView, Point, GraphicsLayer, Sketch])

Что означает: esri/Map -> ArcGISMap esr/views/MapView -> MapView esri/geometry/Point -> Point esri/Graphic -> GraphicsLayer esri/layers/GraphicsLayer -> Sketch esri/widgets/Sketch -> Неназначенный

Вам необходимо убедиться, что ваш массив loadModules([]) находится в том же порядке, что и массив .then([]). Используйте это, чтобы убедиться, что компоненты выстроились в ряд: 

loadModules([
        "esri/Map", 
        "esri/views/MapView", 
        "esri/geometry/Point", 
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch"], {
      css: true
    }).then(([ArcGISMap, MapView, Point, Graphic, GraphicsLayer, Sketch])
...