Vue 未更新 Esri Map 的值-解网

问：

我有以下可组合项：

export const useEsriMap = () => {
  const mapObject = ref()
  const esriObject = computed(() => mapObject.value.esriObject)

  const panTo = (lat, long) => {
    esriObject.value.panTo([lat, long])
  }

  return {
    panTo,
    esriObject,
  }
}

我从另一个组件调用可组合项的地方：

componentA.vue：

const focus = () => {
  panTo(Number(props.location.lat), Number(props.location.long))
}

我有一个componentB.vue，我正在其中实现Esri地图，如下所示：

componentB.vue：

const { esriObject } = useEsriMap()
let map: WebMap | null = null
let view: MapView | null = null

onMounted(async () => {
  map = new WebMap({
    basemap: 'arcgis-navigation',
  })

  view = new MapView({
    container: mapViewNode.value! as HTMLDivElement,
    map,
    zoom: 12,
    center: [0, 0],
  })

})
watch(
  () => esriObject,
  () => {
    view
      ?.when(() => {
        view?.goTo({
          center: [esriObject.value],
          zoom: 12,
        })
      })
      .catch((err) => {
        console.error('MapView rejected:', err)
      })
  },
)

我从项目中的不同位置调用 panTo 方法，每次都为其提供不同的坐标，因此我正在更新计算的 lat，long useEsriMap 可组合项。

每当我调用 panTo 方法时，我都会收到这样的错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'esriObject')

那么，如何实现每当地图视图更新时将地图视图更改为坐标的方式呢？

Thnx提前寻求帮助。

vue.js vuejs3 esri esri-maps

import { reactive, computed } from "vue";

const mapObject = reactive({
  lat: 0,
  long: 0,
});

const esriObject = computed(() => {
  return [mapObject.lat, mapObject.long];
});

export const useEsriMap = () => {
  const panTo = (lat, long) => {
    mapObject.lat = lat;
    mapObject.long = long;
  };

  return {
    panTo,
    esriObject,
  };
};

代码沙盒

Vue 未更新 Esri Map 的值

vue is not updating the values of esri map

评论

评论