Vue3 Openlayers 在 Vite 重新加载之前不显示地图答案

【问题标题】：Vue3 Openlayers not showing Map until Vite reloadVue3 Openlayers 在 Vite 重新加载之前不显示地图
【发布时间】：2022-08-14 09:04:19
【问题描述】：

我正在使用Quasar 使用 Vite、pwa 模式、使用 Vue3-Openlayers 和 Pinia 作为数据存储。

我正在构建一个使用 geojson 数据的应用程序，并且有必要在地图中显示它（Openlayers）

当我在组件设置中触摸一些代码（插入空格）并重新加载它时，一切似乎都工作正常，因此地图可以正确显示，但从未有过.

The Vue structure

The Pinia Store loaded without displaying the map

The page not showing the map

The page showing the map after inserting an space in setup block

详细地图组件用于 CanyonLayout 组件。

Pinia Store 通过在 CanyonLayout 组件的 onBeforeMount 挂钩中调用异步操作来填充

 onBeforeMount(() => {
      leftDrawerOpen.value = false
      canyonStore.loadCanyon(router.currentRoute._value.params.canyonId)
    })

它填充了存储中的两个对象：

async loadCanyon(canyonName) {
      let responseNormal = await api.get(`/canyons/${canyonName}`)
      this.currentCanyon = responseNormal.data
      let response = await api.get(`/canyons/${canyonName}?output=geojson`)
      this.geoCanyon = response.data

      return this.currentCanyon
}

所以我们以这种方式在 out child (DetailedMap) 组件中使用加载的数据：




const { geoCanyon } = storeToRefs(canyonStore)

const center = ref(canyonStore.geoCanyon.geometry.coordinates)

/*
more unnecesary code
*/

return {
        loading,
        canyon: geoCanyon,
        center,
        projection,
        zoom,
        rotation,
        strokeWidth,
        strokeColor
      }

标签： vuejs3 openlayers vite quasar vue3-openlayers

【解决方案1】：

您在 Quasar 中的 Vue3-Openlayers 安装情况如何？

【讨论】：