добавление нескольких точек в графический слой arcgis js - PullRequest
Новая
       16

добавление нескольких точек в графический слой arcgis js

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

Я пытаюсь взять массив координат и добавить их в свой mapView в виде точечной графики, однако загружается только одна точка, а остальные нет. Я не уверен, почему это происходит, и я попробовал несколько вещей.

ОБНОВЛЕНИЕ: я подтвердил, что карта содержит все точки в соответствующем слое, после для l oop точки просто не отображается.

  1. Я проверил создание точек за пределами моего для l oop, и они загружаются на карту.
  2. Я попытался просто пройти массив моего графического слоя, но это выдает ошибку типа (вы можете передавать только одно значение за раз.
  3. В настоящее время я использую window [] для присвоения имен моим точечным объектам, поскольку вы не можете передать два точки с одним и тем же именем в одном графическом c слое

Я надеюсь, что кто-то, знакомый с arcgis в js и vue, может найти решение.

моя карта компонент 

<script>
import { loadModules } from "esri-loader";
const axios = require('axios').default;
let E = {}; // placeholder for Esri modules

export default {
  name: "web-map",
  props: {
    coords: {
      type: Object,
      required: true
    },
  },
  data: function() {
    return {
      view: null,
      fish: []      
    };
  },
  mounted() {
      const that = this

    axios.get('http://localhost:3000/allFish')
            .then(function (response) {
              that.fish = response.data.fish
            })
            .then(()=>{

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

    .then(([ArcGISMap, MapView, Point, Graphic, GraphicsLayer]) => {
      E.ArcGISMap = ArcGISMap;
      E.MapView = MapView;
      E.Point = Point;

      //make axios call

      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: 3
      })
        var graphicsLayer = new GraphicsLayer(); 

// ADDING MY POINTS TO MY MAP HERE ------------------------------->
      for(let i = 0; i < this.fish.length; i++){
        console.log('fish[i]',this.fish[i].coords[0],this.fish[i].coords[1], i)

                 let point = {type: "point", longitude: this.fish[i].coords[0], latitude: this.fish[i].coords[1] };

                  var simpleMarkerSymbol = {
                      type: "simple-marker",
                      color: [226, 119, 40],  // orange
                      outline: { color: [255, 255, 255], width: 1 }
                  };

                 window['graphic'+i] = new Graphic({ geometry: point, symbol: simpleMarkerSymbol}); //graphics need unique names
                graphicsLayer.add(window['graphic'+i]);        
            }
            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...");
      }
    },

  }
};
</script>
...