在 vue 中更改 arcgis 地图位置 onClick

Question

我正在尝试使用 vue onClick 将地图更新到我的当前位置，它会更新道具并将它们发送到我的地图组件。当我的地图数据发生变化并且我为我的地图中心获得一些新的 x,y 时，我正在使用 :key 重新渲染我的地图组件。（基于 esri/arcgis 示例，我需要重建地图，如果有人知道这是错误的，请告诉我）

VUE js arcgis 起始文档： https://developers.arcgis.com/javascript/latest/guide/vue/

出于某种原因，我的地图确实再次呈现并且似乎即将加载但随后它只是保持空白。也许有人可以告诉我这是否是组件在我强制再次渲染后仍然以某种方式持续存在的问题？

我的app.vue

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

        <div class="center">
          <b-button class="btn-block" @click="getLocation" 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: -118,
        long: 34,
      }
    },
    methods:{

      showPos(pos){
        this.lat = pos.coords.latitude
        this.long = pos.coords.longitude

        this.$refs.mapRef.updateCoordinates()
        console.log('new location',this.lat,this.long, this.$refs)   
      },


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

    },
};
</script>

我的地图组件

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

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

export default {
  name: 'web-map',
  props:['centerX', 'centerY'],
  data: function(){
    return{
      X: this.centerX,
      Y: this.centerY,
      view: null
    }
  },
  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: [this.X,this.Y],   ///USE PROPS HERE FOR NEW CENTER
        zoom: 8
      });
    });
  },
  beforeDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.container = null;
    }
  },
  methods:{
    updateCoordinates(){
        this.view.centerAt([this.X,this.Y])
      }
  }

};

</script>

Answer 1

我想你可以用 setInterVal() 测试 Watch 来循环每 1 秒检查你的位置

Answer 2

我认为您作为道具传递给 web-map 的键没有任何作用，因为它没有在组件内部使用。

您可以改为尝试强制更新组件：

<web-map v-bind:centerX="lat" v-bind:centerY="long" ref="mapRef" />

this.refs.mapRef.$forceUpdate()

这确保您强制更新整个组件，但也许有更好的解决方案。无需重新渲染整个组件（这意味着必须再次创建地图），您可以让组件保持活动状态并仅使用一个事件来更新坐标。

基于https://developers.arcgis.com/javascript/3/jsapi/map-amd.html#centerat，您可以使用centerAt方法重新居中地图。

这样地图组件就有了一个方法：

updateCoordinates(coord){
  this.view.centerAt(coord)
}

并且您可以通过

在父级上调用它

this.refs.mapRef.updateCoordinates(newCenter)

希望对您有所帮助，如果您有任何进展，请告诉我。

在 vue 中更改 arcgis 地图位置 onClick

altering arcgis map location onClick in vue

javascript

rendering

vue.js