view.goTo映射呈现空白arcgis

Question

我正在处理一个Arcgis地图，我正在尝试通过在地图视图上调用goTo（）来更新地图中心，但是由于某些原因，该地图只是变为空白并且从不更新，因此我正在记录新的坐标，并且它们是正确的。

我在这里使用参考文档：https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html

具有一些arcgis经验的人可以帮助我吗？我知道这不是我的代码特有的问题，但可能与vue和组件渲染有关，因为它与arcgis有关

到目前为止，我已经尝试过-摆脱道具并在本地更新组件中的所有内容-使用键强制重新渲染组件

作为一个有趣的注释，如果我只是为新位置输入一些幻数，则地图会正确更新，但是当我使用某些功能获取位置并将其传递时，它不起作用，只会显示为空白地图

我的app.vue

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

Answer 1

这里有一些有效的方法：

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

[我从头开始，只是从您的一小部分中汲取了一点点，并将它们与ArcGIS中的示例结合在一起（我一点都不熟悉）。

我可能可以清理一下我的东西，并使你的工作正常。据我所知，您似乎没有正确地将数据从父级传递到子级。您希望this.$refs.map是Vue实例，但实际上不是。这是一个DOM元素。从父实例访问子方法不是那么简单。

在我的示例中，我选择只更新孩子的坐标道具，同时在上面贴上watch fn以更新地图。