如何在 Vue3 中使用 OpenLayers 实现事件 loadstart 和 loadend

<!--
 * @Author: 彭麒
 * @Date: 2025/3/31
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
  <div class="container">
    <div class="w-full flex justify-center flex-wrap">
      <div class="font-bold text-[24px]">在Vue3中使用OpenLayers实现事件 loadstart 和 loadend 的示例</div>
    </div>
    <div id="vue-openlayers"></div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = ref(null);
const loadEvent = () => {
  if (!map.value) return;
  map.value.on('loadstart', () => {
    map.value.getTargetElement().classList.add('spinner');
  });
  map.value.on('loadend', () => {
    map.value.getTargetElement().classList.remove('spinner');
  });
};
const initMap = () => {
  const OSM_Layer = new TileLayer({
    source: new OSM(),
  });
  map.value = new Map({
    target: 'vue-openlayers',
    layers: [OSM_Layer],
    view: new View({
      projection: 'EPSG:4326',
      center: [116.15, 40.79],
      zoom: 6,
    }),
  });
};
onMounted(() => {
  initMap();
  loadEvent();
});
</script>
<style scoped>
.container {
  width: 840px;
  height: 570px;
  margin: 50px auto;
  border: 1px solid #42B983;
}
#vue-openlayers {
  width: 800px;
  height: 450px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.spinner:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 50%;
  border: 5px solid rgba(180, 180, 180, 0.6);
  border-top-color: rgba(0, 0, 0, 0.6);
  animation: spinner 0.6s linear infinite;
}
</style>

const initMap = () => { 
    OSM_Layer = new TileLayer({ source: new OSM(), 
}); 
map.value = new Map({ 
    target: 'vue-openlayers', 
    layers: [OSM_Layer], 
    view: new View({ 
        projection: 'EPSG:4326', 
        center: [116.15, 40.79], zoom: 6, 
        }), 
    }); 
};

const loadEvent = () => { 
    if (!OSM_Layer) return; 
    const source = OSM_Layer.getSource(); 
    if (!source) return; 
    const onLoadStart = () => { 
        map.value?.getTargetElement()?.classList.add('spinner'); 
    }; 
    const onLoadEnd = () => { 
        map.value?.getTargetElement()?.classList.remove('spinner'); 
    }; 
    source.on('tileloadstart', onLoadStart); 
    source.on('tileloadend', onLoadEnd);         
    source.on('tileloaderror', onLoadEnd);
     return { onLoadStart, onLoadEnd }; 
};