vue+openlayers中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,
    ref
  } from 'vue'
  import 'ol/ol.css';
  import {
    Map,
    View
  } from 'ol';
  import TileLayer from 'ol/layer/Tile';
  import XYZ from 'ol/source/XYZ';
  var map = null;
  const loading = ref(false)
  onMounted(() => {
    map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: "天地图wmts地址",
            attributions: '影像底图',
            crossOrigin: 'anonymous',
            wrapX: false
          }),
          preload: Infinity
        })
      ],
      view: new View({
        //地图初始中心点
        center: [0, 0],
        minZoom: 2,
        maxZoom: 18,
        zoom: 5
      })
    });

    window.olmap = map

    map.on('loadstart', function (event) {
      loading.value = true
      console.log('当开始加载附加地图数据时触发');
    });
    map.on('loadend', function (event) {
      setTimeout(() => {
        loading.value = false
        console.log('当地图数据加载完成时触发。');
      }, 1000)

    });
  })
</script>
<style scoped>
  .imap {
    height: 100%;
    width: 100%;
  }

  .loading {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0.9;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
</style>