vue+openlayers中loadstart和loadend事件实战详解

OpenLayers中的loadstart和loadend事件是专门用于监测地图或图层资源加载状态的重要事件。
loadstart与loadend事件在地图缩放、移动时都会触发！

1.loadstart 事件：

• 当图层开始加载数据时触发。
• 可以使用此事件来执行一些操作，例如显示加载指示器或禁用某些UI元素。
• 使用 on 方法来监听此事件。

2.loadend 事件：

• 当图层加载完成（无论成功还是失败）时触发。
• 可以使用此事件来隐藏加载指示器或重新启用之前禁用的UI元素。
• 与 loadstart 类似，你可以使用 on 方法来监听此事件。

效果图

附源码

<template>
  <div id="map" class="imap">
  </div>
  <div class="loading" v-if="loading">
    加载中...
  </div>

</template>
<script setup>
  // openlayers中loadstart和loadend事件实战详解

  import {
    onMounted,
    re