如何在 Vue3 中使用 OpenLayers 實現事件 loadstart 和 loadend

更新時間：2025年04月01日 11:00:41 作者：吉檀迦俐

在這篇文章中,我將詳細介紹如何在 Vue3 + OpenLayers 中監(jiān)聽 loadstart 和 loadend 事件,并通過 Vue3 Composition API 進行代碼優(yōu)化,使其更加高效、健壯,感興趣的朋友一起看看吧

前言

在前端 GIS (地理信息系統(tǒng)) 開發(fā)中，OpenLayers 是一個功能強大的地圖庫，可以幫助開發(fā)者輕松實現地圖渲染、交互以及各種地理數據的可視化。
在地圖加載過程中，我們通常希望在加載開始時顯示加載動畫 (loadstart)，在加載完成后隱藏加載動畫 (loadend)。

在這篇文章中，我將詳細介紹如何在 Vue3 + OpenLayers 中監(jiān)聽 loadstart 和 loadend 事件，并通過 Vue3 Composition API 進行代碼優(yōu)化，使其更加高效、健壯。

1. OpenLayers 加載事件

在 OpenLayers 中，地圖瓦片 (TileLayer) 本身并不會觸發(fā) loadstart 和 loadend 事件，而是 TileLayer 的數據源 (source) 觸發(fā)：

tileloadstart: 瓦片開始加載時觸發(fā)。
tileloadend: 瓦片加載完成時觸發(fā)。
tileloaderror: 瓦片加載失敗時觸發(fā)（避免加載失敗時動畫一直不消失）。

因此，我們需要監(jiān)聽 source 事件，而不是 map 本身。

2. 在 Vue3 + OpenLayers 中實現 loadstart 和 loadend

我們將使用 Vue3 的 Composition API 來實現，確保代碼清晰且符合現代 Vue 開發(fā)規(guī)范。

完整代碼

<!--
 * @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>

3. 代碼解析

（1）初始化地圖

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, 
        }), 
    }); 
};

這里我們使用 OpenStreetMap 作為地圖瓦片數據源 (OSM())，并將地圖掛載到 #vue-openlayers 的 div 中。

（2）監(jiān)聽 loadstart 和 loadend 事件

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 }; 
};

tileloadstart: 當地圖瓦片開始加載時，添加 spinner 類，實現加載動畫。
tileloadend / tileloaderror: 瓦片加載完成或失敗后，移除 spinner 類，隱藏加載動畫。