view.goTo지도는 빈 arcgis를 렌더링합니다.

저는 arcgis지도에서 작업 중입니다. 내지도보기에서 goTo ()를 호출하여지도 중심을 업데이트하려고하지만 어떤 이유로지도가 공백으로 변경되고 업데이트되지 않습니다. 새 좌표를 기록하고 있으며 정확합니다. .

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html 에서 참조 문서를 사용하고 있습니다.

일부 arcgis 경험을 가진 사람이 나를 도울 수 있습니까? 나는 이것이 내 코드에서 특별히 문제가 아니라는 것을 알고 있지만 arcgis와 관련하여 vue 및 구성 요소 렌더링 문제 일 수 있습니다.

지금까지 나는 소품을 제거하고 구성 요소 내의 모든 것을 로컬로 업데이트-키를 사용하여 구성 요소를 강제로 다시 렌더링했습니다.

흥미로운 점은 새 위치에 매직 넘버를 입력하면지도가 올바르게 업데이트되지만 일부 기능을 사용하여 위치를 가져 와서 전달하면 작동하지 않고 빈지도로 표시됩니다.

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