220：vue+openlayers 加载动画，采用css的@keyframes方式

在Vue中结合OpenLayers加载动画，可以通过CSS的@keyframes规则来创建加载动画。以下是一个简单的例子，展示如何在Vue组件中实现这一效果：

1. 在Vue组件的<template>部分，添加一个用于显示加载动画的元素：

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

2. 在<style>部分，定义加载动画的CSS：

<style>
.ol-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #333;
  font-size: 20px;
  animation: spin 2s linear infinite;
}
 
@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
</style>

3. 在Vue组件的<script>部分，初始化OpenLayers地图：

<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
 
export default {
  name: 'MapComponent',
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: [0, 0],
          zoom: 2,
        }),
      });
      
      // 假设你有一个方法来检测数据加载完成
      this.detectDataLoaded().then(() => {
        // 数据加载完成后，移除加载动画
        document.querySelector('.ol-loading').style.display = 'none';
      });
    },
    detectDataLoaded() {
      // 这里模拟数据加载完成的Promise
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, 3000); // 假设数据加载耗时3秒
      });
    },
  },
};
</script>

在这个例子中，.ol-loading类被用于显示加载动画，而@keyframes spin定义了一个无限循环的旋转动画。当数据加载完成后，动画将通过设置CSS的display属性为none来隐藏。这个例子假设你有一个方法detectDataLoaded来检测数据加载状态，实际应用中你需要替换为实际的数据加载逻辑。