view.goTo 地图呈现空白 arcgis

Question

我正在处理 arcgis 地图，我正在尝试通过在我的 mapview 上调用 goTo() 来更新地图中心，但由于某种原因，地图只是变为空白并且永远不会更新，我正在记录新坐标并且它们是正确的.

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

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

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

作为一个有趣的说明，如果我只是为我的新位置输入一些幻数，地图会正确更新，但是当我使用一些函数来获取位置然后将其传递时，它不起作用并且只显示为空白地图

我的应用程序.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]})  

      },

Answer 1

转变：this.view = new MapView({&nbsp; &nbsp; container: this.$el,&nbsp; &nbsp; map: map,&nbsp; &nbsp; center: [-118,34],&nbsp; &nbsp;///USE PROPS HERE FOR NEW CENTER&nbsp; &nbsp; zoom: 8&nbsp; });至this.view = new MapView({&nbsp; &nbsp; &nbsp; &nbsp; container: this.$el,&nbsp; &nbsp; &nbsp; &nbsp; 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

Answer 2

这是可行的：https://codesandbox.io/s/frosty-glitter-39wpe?file=/src/App.vue我是从头开始制作的，只从您那里获取了一小部分内容，并将它们与 ArcGIS 中的一些示例（我根本不熟悉）结合起来。需要注意的一件事是，它.goTo({center: [lat, long]})没有按预期工作：它一直集中在某个海洋的中间。然后我从导入 Pointesri并通过centeras&nbsp;new Point(long, lat)，这似乎产生了预期的结果。由于它有效，我没有进一步研究，但我想如果没有转换它应该是可行的。您可能需要传入坐标系或类似的东西。据我所知，您的示例中有什么问题是您尝试将数据从父级传递给子级的方式。您希望this.$refs.map成为 Vue 实例，但事实并非如此。它是一个 DOM 元素。它基本上是 Vue 实例的$el.&nbsp;从父实例访问子方法并不是那么简单。另一件需要注意的事情是，即使您在示例中绑定centerX了centerYchild，但您似乎从未使用过它们（但我想这只是您尝试使用 props 时的遗留问题！？）。无论如何，在我的示例中，我选择简单地更新孩子的 coords 道具，同时使用watchfn 来处理重新居中。