LeaferJS + vue3 轨迹动画

项目背景：某园区需要查看访客行动轨迹物联网设备提供固定点感知，在此基础上就不能使用地图的运动轨迹功能，因此选用设置固定点位的方式来实现

安装LeaferJS

 yarn add leafer-ui @leafer-in/animate @leafer-in/motion-path

<script setup>
import { ref, onMounted } from "vue"
import {
  Leafer,
  Pen,
  Image,
  Rect,
  Polygon,
  Path,
  Group,
  Star,
  Ellipse,
  Line,
} from "leafer-ui"
import "@leafer-in/animate"
import "@leafer-in/motion-path"
const container = ref(null)
const leafer = ref(null)
const initLeafer = () => {
  leafer.value = new Leafer({
    view: container.value,
  })
  const rect = new Rect({
    width: 922,
    height: 626,
    x: 0,
    y: 0,
    fill: {
      type: "image",
      url: "/img/park-scan.jpg",
      mode: "stretch",
    },
  })
  leafer.value.add(rect)
}

const drawPoinLine = (points, index = 0) => {
  if (!points || points.length <= 1 || index >= points.length) {
    console.error("错误提示")
    return
  }
  const marker = new Image({
    x: points[index].x - 15,
    y: points[index].y - 28,
    url: "/img/location-fill.svg",
    scale: 0.15,
    zIndex: 10,
    animation: {
      keyframes: [
        { opacity: 0, offsetY: -50 },
        { opacity: 1, offsetY: 0 },
      ],
      duration: 0.3,
    },
  })

  leafer.value.add(marker)
  if (index >= points.length - 1) {
    return
  }
  const svgPath = `M${points[index].x},${points[index].y} L${
    points[index + 1].x
  },${points[index + 1].y}`
  const path = new Path({
    x: 0,
    y: 0,
    scale: 1,
    motionPath: true,
    stroke: "#52BCFF",
    strokeWidth: 2,
    cornerRadius: 20,
    pointRadius: 20,
    motion: 0,
    animation: {
      style: { motion: { type: "percent", value: 1 } },
      duration: 1,
      loop: false,
      event: {
        completed: () => drawPoinLine(points, index + 1),
      },
    },
    path: svgPath,
  })
  leafer.value.add(path)
}
onMounted(() => {
  initLeafer()
  const points = [
    { x: 787.79, y: 380.45 },
    { x: 755.79, y: 365.45 },
    { x: 729.79, y: 211.45 },
    { x: 630.79, y: 212.45 },
    { x: 638.79, y: 335.45 },
  ]
  drawPoinLine(points, 0)
})
</script>
<template>
  <div class="leafer-container" ref="container" @click="getMousePosition"></div>
</template>

LeaferJS文档