view.goTo 地图呈现空白 arcgis答案

【问题标题】：view.goTo map renders blank arcgisview.goTo 地图呈现空白 arcgis
【发布时间】：2020-08-02 08:56:06
【问题描述】：

我正在制作一张 arcgis 地图，我正在尝试通过在我的 mapview 上调用 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>

【问题讨论】：

你能用你拥有的东西建立一个codesandbox.io吗？
@tao 这里是我所拥有的沙盒codesandbox.io/s/gallant-cerf-wjnqk?file=/src/components/…
我尝试从 showPos 返回 pos.coords 但我得到一个未定义的值，所以我尝试在 showPos() 本身内进行更新。我能够从函数内部正确记录坐标，所以我想我应该能够将它们传递给 view.goTo()
我错了。可以在那里放置一个处理程序 fn 并且它不需要 return 值。它需要处理坐标，而你的做了。我用一个工作示例添加了一个答案。可能会更干净，但我不熟悉 ArcGIS。
this.$refs.map.getLocation() 永远不会工作。 this.$refs.map 是子元素的$el，一个没有getLocation 方法的DOM 元素。该方法在子元素的 Vue 实例上定义，除其他外，该实例在 $el 中具有对该特定 DOM 元素的引用。

标签： javascript vue.js arcgis

【解决方案1】：

以下是可行的方法：

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

我是从头开始制作的，只从您那里提取了一小部分内容，并将它们与 ArcGIS 中的一些示例（我完全不熟悉）结合起来。

需要注意的一点是，.goTo({center: [lat, long]}) 没有按预期工作：它一直位于某个海洋的中心。
然后我从esri 导入Point 并将center 作为new Point(long, lat) 传递，这似乎产生了预期的结果。由于它有效，我没有进一步研究，但我想它应该在没有转换的情况下是可行的。您可能需要传入坐标系或类似的东西。

据我所知，您的示例中的问题在于您尝试将数据从父级传递给子级的方式。您希望 this.$refs.map 是一个 Vue 实例，但事实并非如此。它是一个 DOM 元素。它基本上是 Vue 实例的$el。从父实例访问子方法并不是那么简单。需要注意的另一件事是，即使您在示例中将 centerX 和 centerY 绑定到 child，您似乎从未使用过它们（但我想这只是您尝试使用 props 时的遗留问题！？）。

无论如何，在我的示例中，我选择简单地更新孩子的 coords 属性，同时使用 watch fn 来处理重新居中。

【讨论】：

谢谢，您必须创建一个新点的实例才能使其工作，这非常有趣。我怀疑这是某种类型的问题，因为幻数似乎有效，但我返回的数据无效。我也是 arcgis 的新手，他们有很多不同的文档，谢谢你帮我解决这个问题:)

【解决方案2】：

开关：

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;

Tao 的另一个答案在 .goTo({center: []}) 方法调用中将经度/纬度倒退，这就是它进入海洋的原因：https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#goTo

【讨论】：