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-tianditu
        layerType="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-flowline
            color="rgba(228, 147, 87, 1)"
            color2="rgba(228, 64, 0, 1)"
            :width="10"
            :width2="10"
            :arrow="1"
          />
        </ol-feature>
        <ol-animation-path
          ref="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>