在Vue中结合OpenLayers加载动画，可以通过CSS的@keyframes规则来创建加载动画。以下是一个简单的例子，展示如何在Vue组件中实现这一效果：
- 在Vue组件的
<template>部分，添加一个用于显示加载动画的元素：
<template>
<div id="map" class="map">
<div class="ol-loading">加载中...</div>
</div>
</template>- 在
<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>- 在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来检测数据加载状态，实际应用中你需要替换为实际的数据加载逻辑。