首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3使用 OpenLayers

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

2025-04-01 11:00:41 作者：吉檀迦俐

在这篇文章中,我将详细介绍如何在 Vue3 + OpenLayers 中监听 loadstart 和 loadend 事件,并通过 Vue3 Composition API 进行代码优化,使其更加高效、健壮,感兴趣的朋友一起看看吧

前言

在前端 GIS (地理信息系统) 开发中，OpenLayers 是一个功能强大的地图库，可以帮助开发者轻松实现地图渲染、交互以及各种地理数据的可视化。
在地图加载过程中，我们通常希望在加载开始时显示加载动画 (loadstart)，在加载完成后隐藏加载动画 (loadend)。

在这篇文章中，我将详细介绍如何在 Vue3 + OpenLayers 中监听 loadstart 和 loadend 事件，并通过 Vue3 Composition API 进行代码优化，使其更加高效、健壮。

1. OpenLayers 加载事件

在 OpenLayers 中，地图瓦片 (TileLayer) 本身并不会触发 loadstart 和 loadend 事件，而是 TileLayer 的数据源 (source) 触发：

tileloadstart: 瓦片开始加载时触发。
tileloadend: 瓦片加载完成时触发。
tileloaderror: 瓦片加载失败时触发（避免加载失败时动画一直不消失）。

因此，我们需要监听 source 事件，而不是 map 本身。

2. 在 Vue3 + OpenLayers 中实现 loadstart 和 loadend

我们将使用 Vue3 的 Composition API 来实现，确保代码清晰且符合现代 Vue 开发规范。

完整代码

<!--
 * @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）监听 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 类，隐藏加载动画。

（3）在 Vue 生命周期中挂载和卸载事件

onMounted: 组件挂载时初始化地图，并绑定 loadstart 和 loadend 事件。
onUnmounted: 组件销毁时，解绑事件，防止内存泄漏。

4. 运行效果

当地图瓦片开始加载时，会出现一个 加载动画，当瓦片加载完成或失败时，动画会消失。

5. 总结

本文介绍了如何在 Vue3 + OpenLayers 项目中监听 loadstart 和 loadend 事件，实现地图加载动画：

正确监听 tileloadstart 和 tileloadend 事件。
使用 onMounted 和 onUnmounted 进行事件绑定和解绑，确保代码健壮性。
通过 CSS 设计简单的加载动画。

希望这篇文章能帮助到你，如果有问题，欢迎留言交流！🚀

到此这篇关于如何在 Vue3 中使用 OpenLayers 实现事件 loadstart 和 loadend的文章就介绍到这了,更多相关Vue3使用 OpenLayers内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！