五十五、openlayers官网示例Loading Spinner解析——给地图添加loading效果，瓦片图层加载时等待效果

官网demo地址：

Loading Spinner 

这篇介绍了一个非常简单的loading效果

利用地图的loadstart和loadend事件，动态的添加和删除class名。

 map.on("loadstart", function () {
     map.getTargetElement().classList.add("spinner");
 });
 map.on("loadend", function () {
     map.getTargetElement().classList.remove("spinner");
 });

配合样式动画实现loading效果

@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(108, 153, 250, 0.8);
  border-top-color: rgba(255, 255, 255,1);
  animation: spinner 0.6s linear infinite;
}

完整代码：

<template>
  <div class="box">
    <h1>Loading Spinner</h1>
    <div id="map" class="map"></div>
  </div>
</template>

<script>
import StadiaMaps from "ol/source/StadiaMaps.js";
import Draw from "ol/interaction/Draw.js";
import Map from "ol/Map.js";
import Point from "ol/geom/Point.js";
import View from "ol/View.js";
import { Icon, Stroke, Style } from "ol/style.js";
import { OSM, Vector as VectorSource } from "ol/source.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import { get } from "ol/proj.js";
export default {
  name: "",
  components: {},
  data() {
    return {
      map: null,
    };
  },
  computed: {},
  created() {},
  mounted() {
    const layer = new TileLayer({
      source: new StadiaMaps({
        layer: "stamen_terrain_background",
      }),
    });

    const map = new Map({
      layers: [layer],
      target: "map",
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });

    map.on("loadstart", function () {
      map.getTargetElement().classList.add("spinner");
    });
    map.on("loadend", function () {
      map.getTargetElement().classList.remove("spinner");
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 500px;
  position: relative;
}
.box {
  height: 100%;
}

@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(108, 153, 250, 0.8);
  border-top-color: rgba(255, 255, 255,1);
  animation: spinner 0.6s linear infinite;
}
</style>