如何在vue3中访问openlayers地图的方法

npm install ol

<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const mapContainer = ref(null);
let map = null;

onMounted(() => {
  map = new Map({
    target: mapContainer.value,
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
    view: new View({
      center: [0, 0],
      zoom: 2,
    }),
  });
});

// 你可以在这里定义其他方法来操作地图，例如：
function panToLonLat(lon, lat) {
  if (map) {
    map.getView().animate({
      center: [lon, lat],
      duration: 1000,
    });
  }
}
</script>

<style>
.map-container {
  width: 100%;
  height: 400px;
}
</style>