вид.перейти к карте отображает пустой в ArcGIS


вид.перейти к карте отображает пустой в ArcGIS

20.04.2020 01:39:53 Просмотров 63 Источник

Я работаю над картой arcgis, я пытаюсь обновить центр карты, вызывая goTo () на моем mapview, но по какой-то причине карта просто меняется на пустую и никогда не обновляется, я регистрирую новые координаты, и они верны.

Я использую справочные документы здесь: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html

Может ли кто-то с некоторым опытом работы в arcgis помочь мне? Я знаю, что это не проблема конкретно с моим кодом, но это может быть проблема с Vue и рендерингом компонентов, как это связано с arcgis

до сих пор я пытался - избавление от реквизита и обновление всего внутри компонента локально - использование клавиш для принудительного рендеринга компонента

интересно отметить, что если я просто ввожу некоторые магические числа для своего нового местоположения, карта обновляется правильно, однако когда я использую какую-то функцию, чтобы получить местоположение, а затем передать его, она не работает и просто отображается как пустая карта

мое приложение.Ву

<template>
    <div id="app">
        <web-map v-bind:centerX="lat" v-bind:centerY="long" ref="map"/>

        <div class="center">
          <b-button class="btn-block" @click="updateCenter()" variant="primary">My Location</b-button>
        </div>
    </div>


</template>

<script>
import WebMap from './components/webmap.vue';

export default {
    name: 'App',
    components: { WebMap }, 
    data(){
      return{
        lat: null,
        long: null,
      }
    },
    methods:{
      updateCenter(){
        this.$refs.map.getLocation()
      }
    },
};
</script>

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

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

<script>
import { loadModules } from 'esri-loader';

export default {
  name: 'web-map',
  data: function(){
    return{
      X: -118,
      Y: 34,

    }
  },
  mounted() {
    console.log('new data',this.X,this.Y)

    // lazy load the required ArcGIS API for JavaScript modules and CSS
    loadModules(['esri/Map', 'esri/views/MapView'], { css: true })
    .then(([ArcGISMap, MapView]) => {
      const map = new ArcGISMap({
        basemap: 'topo-vector'
      });

      this.view = new MapView({
        container: this.$el,
        map: map,
        center: [-118,34],   ///USE PROPS HERE FOR NEW CENTER
        zoom: 8
      });
    });
  },
  beforeDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.container = null;
    }
  },


  methods:{
    showPos(pos){
        console.log('new location',pos.coords.latitude,pos.coords.longitude) 
        this.view.goTo({center:[pos.coords.latitude,pos.coords.longitude]})  
      },


      getLocation(){
        if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(this.showPos);
          } else { 
            console.log("Geolocation is not supported by this browser.");
          }
      },
  }

};

</script>
У вопроса есть решение - Посмотреть?

Ответы - вид.перейти к карте отображает пустой в ArcGIS / view.goTo map renders blank arcgis

Является ответом!
tao

20.04.2020 04:41:06

Вот кое-что, что работает:

https://codesandbox.io/s/frosty-glitter-39wpe?file=/src/App.vue

Я сделал это с нуля, взяв только небольшие кусочки из вашего и объединив их с некоторыми примерами из ArcGIS (с которыми я вообще не знаком).

Следует отметить, что .goTo({center: [lat, long]}) работал не так, как ожидалось: он продолжал центрироваться в середине какого-то океана.
Затем я импортировал точку из esri и передал center как new Point(long, lat), что, по-видимому, дает ожидаемый результат. Поскольку это работает, я не смотрел дальше, но я думаю, что это должно быть выполнимо без преобразования. Вам, вероятно, нужно пройти в системе координат или что-то в этом роде.

Насколько я могу судить, в вашем примере неправильно то, как вы пытаетесь передать данные от родителя к ребенку. Вы ожидаете, что this.$refs.map будет экземпляром Vue, но это не так. Это элемент DOM. Это в основном экземпляр Vue $el. Доступ к дочерним методам из родительского экземпляра не так прямолинейен. Еще одна вещь, которую следует заметить, заключается в том, что, даже если вы привязываете centerX и centerY к ребенку в вашем примере, вы никогда не используете их (но я думаю, что это просто осталось от того, когда вы пытались использовать реквизит !?).

В любом случае, в моем примере я решил просто обновить опору coords детей, имея watch fn для обработки повторного центрирования.

Brett Schmidt

15.06.2020 05:54:49

Переключатель:

this.view = new MapView({
    container: this.$el,
    map: map,
    center: [-118,34],   ///USE PROPS HERE FOR NEW CENTER
    zoom: 8
  });

к

this.view = new MapView({
        container: this.$el,
        map: map });
this.view.center.longitude = -118;
this.view.center.latitude = 34;
this.view.zoom = 8;

Другой ответ Дао имеет длину / широту назад в своем .вызов метода goTo({center: []}), вот почему он идет к океану: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#goTo

Помочь в развитии проекта:
Закрыть X