我想知道是否有人能帮助我。
我有一个Vue3应用程序，我试图将OpenLayersMap加载到一个组件中，然后将其拉入页面。
设置视图页面和基本组件的过程似乎工作得很好，但当我试图拉入Map时，所有我得到的都是空白。
我花了一些时间在网上寻找，但似乎OpenLayers的帮助似乎有点有限，而且它变得有点令人沮丧，因为似乎没有返回错误，所以这没有意义。
对于初学者，我在nuxt.config.ts中将其更新为

nuxt.config.ts

然后运行npm install并重启dev服务器
我的视图页面名为index.vue，看起来像

<template>
  <div>
    <h1>My Nuxt.js App</h1>
    <MyMap />
  </div>
</template>

<script>
import MyMap from '~/components/MyMap.vue'

export default {
  components: {
    MyMap
  }
}
</script>

而我的组件fle中的代码，它包含了这个Map，但是无法呈现它

<template>
    <ol-map style="height:400px; width:400px">
      <ol-view
        ref="view"
        :center="center"
        :rotation="rotation"
        :zoom="zoom"
        :projection="projection"
        @zoomChanged="zoomChanged"
        @centerChanged="centerChanged"
        @resolutionChanged="resolutionChanged"
        @rotationChanged="rotationChanged"
      />

      <ol-tile-layer>
        <ol-source-osm />
      </ol-tile-layer>
    </ol-map>

    <div>
      center : {{ currentCenter }} zoom : {{ currentZoom }} resolution :
      {{ currentResolution }} rotation : {{ currentRotation }}
    </div>
  </template>

<script lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import Overlay from 'ol/Overlay'
import { fromLonLat } from 'ol/proj'
import 'ol/ol.css'

export default {
  setup () {
    const center = ref([40, 40])
    const projection = ref('EPSG:4326')
    const zoom = ref(8)
    const rotation = ref(0)

    return {
      center,
      projection,
      zoom,
      rotation
    }
  },
  data () {
    return {
      currentCenter: this.center,
      currentZoom: this.zoom,
      currentResolution: this.resolution,
      currentRotation: this.rotation
    }
  },
  methods: {
    zoomChanged (currentZoom) {
      this.currentZoom = currentZoom
    },
    resolutionChanged (resolution) {
      this.currentResolution = resolution
    },
    centerChanged (center) {
      this.currentCenter = center
    },
    rotationChanged (rotation) {
      this.currentRotation = rotation
    }
  }
}
</script>

这大多是直接从
https://vue3openlayers.netlify.app/componentsguide/view/
有谁知道为什么贴图无法渲染？
非常感谢你的帮助
我试着在谷歌和论坛上寻求帮助，也在YouTube上寻找任何视频教程，但似乎信息有限