vue3-openlayers 轨迹回放（历史轨迹）（ol-animation-path实现）

本篇介绍一下使用vue3-openlayers轨迹回放（历史轨迹）（ol-animation-path实现）

1 需求

• 轨迹回放（历史轨迹）
• 实时轨迹

2 分析

• 轨迹回放（历史轨迹），一般是一次性拿到所有坐标点，使用ol-animation-path可以直接实现

3 实现

<template><ol-map:loadTilesWhileAnimating="true":loadTilesWhileInteracting="true"style="width: 100%; height: 100%"ref="mapRef"><ol-view ref="view" :center="center" :zoom="zoom" :projection="projection" /><ol-tile-layer><ol-source-tianditulayerType="img":projection="projection":tk="key":hidpi="true"ref="sourceRef"></ol-source-tianditu></ol-tile-layer><ol-tile-layer><ol-source-tianditu:isLabel="true"layerType="img":projection="projection":tk="key":hidpi="true"></ol-source-tianditu></ol-tile-layer><ol-vector-layer><ol-source-vector><ol-feature ref="animationPath"><ol-geom-line-string :coordinates="data"></ol-geom-line-string><ol-style-flowlinecolor="rgba(228, 147, 87, 1)"color2="rgba(228, 64, 0, 1)":width="10":width2="10":arrow="1"/></ol-feature><ol-animation-pathref="pathRef"v-if="animationPath":path="animationPath?.feature":duration="4000":repeat="0":speed="0.005"><ol-feature><ol-geom-point :coordinates="data[0]"></ol-geom-point><ol-style :zIndex="10"><ol-style-icon :src="iconSrc" :width="30" :height="30" :rotation="angle"></ol-style-icon></ol-style></ol-feature></ol-animation-path></ol-source-vector></ol-vector-layer></ol-map>
</template><script setup lang="ts">
import iconSrc from '@/assets/image/truck.png';const center = ref([121, 31]);
const projection = ref('EPSG:4326');
const zoom = ref(5);
const mapRef = ref();
const key = '替换为天地图key';
const sourceRef = ref(null);
const animationPath = ref(null);
const pathRef = ref(null);
const data = ref([[110, 30],[110.2, 30],[110.4, 30.2],[110.8, 30.4],[111, 31],[111.3, 31],[111.6, 31],[111.9, 31],[112, 31],[112.3, 31],[112.5, 31],[112.8, 31],[113, 31],[114, 31],[115.3, 32],[115.5, 32],[115.8, 31.8],[116, 31.4],[116.2, 31.1],[116.5, 30.5],[115, 30.2],[114, 29.8],[113, 29.6],[112, 29.4],[111, 30.2],[110, 30.4],[109, 30.6],[108, 31]
]);
const angle = ref(0);
</script>
<style scoped lang="scss"></style>

speed不存在时会取duation的值（二者存一即可，都存在，speed优先）

4 总结

• 动画比使用定时器丝滑
• 拖拉机图标旋转角度不好根据path进行动态修改