快捷導(dǎo)航

如何在 Vue3 中使用 OpenLayers 實現(xiàn)事件 loadstart 和 loadend

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

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

前言

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

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

1. OpenLayers 加載事件

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

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

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

2. 在 Vue3 + OpenLayers 中實現(xiàn) loadstart 和 loadend

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

完整代碼

<!--
 * @Author: 彭麒
 * @Date: 2025/3/31
 * @Email: 1062470959@qq.com
 * @Description: 此源碼版權(quán)歸吉檀迦俐所有，可供學(xué)習(xí)和借鑒或商用。
 -->
<template>
  <div class="container">
    <div class="w-full flex justify-center flex-wrap">
      <div class="font-bold text-[24px]">在Vue3中使用OpenLayers實現(xiàn)事件 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 作為地圖瓦片數(shù)據(jù)源 (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: 當(dāng)?shù)貓D瓦片開始加載時，添加 spinner 類，實現(xiàn)加載動畫。
tileloadend / tileloaderror: 瓦片加載完成或失敗后，移除 spinner 類，隱藏加載動畫。

（3）在 Vue 生命周期中掛載和卸載事件

onMounted: 組件掛載時初始化地圖，并綁定 loadstart 和 loadend 事件。
onUnmounted: 組件銷毀時，解綁事件，防止內(nèi)存泄漏。

4. 運行效果

當(dāng)?shù)貓D瓦片開始加載時，會出現(xiàn)一個 加載動畫，當(dāng)瓦片加載完成或失敗時，動畫會消失。

5. 總結(jié)

本文介紹了如何在 Vue3 + OpenLayers 項目中監(jiān)聽 loadstart 和 loadend 事件，實現(xiàn)地圖加載動畫：

正確監(jiān)聽 tileloadstart 和 tileloadend 事件。
使用 onMounted 和 onUnmounted 進(jìn)行事件綁定和解綁，確保代碼健壯性。
通過 CSS 設(shè)計簡單的加載動畫。

希望這篇文章能幫助到你，如果有問題，歡迎留言交流！??

到此這篇關(guān)于如何在 Vue3 中使用 OpenLayers 實現(xiàn)事件 loadstart 和 loadend的文章就介紹到這了,更多相關(guān)Vue3使用 OpenLayers內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: