109.在 Vue3 中使用 OpenLayers 实现事件 loadstart 和 loadend

前言

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

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

1. OpenLayers 加载事件

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

• tileloadstart: 瓦片开始加载时触发。

• tileloadend: 瓦片加载完成时触发。

• tileloaderror</