官网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>