MapboxLottieMarker

在标记位用 lottie-web 渲染矢量动画，支持 animationData 内联或 path 远程加载。

简介

MapboxLottieMarker 在标记位置用 lottie-web 渲染矢量动画（基于 MapboxMarker 的 DOM，而非 icon 帧驱动）。动画来源 animationData（内联 JSON）或 path（远程 URL）二选一，位置经 v-model:lnglat 绑定。

用法

传入内联 animationData，width / height 控制尺寸：

<script setup lang="ts">
import type { LngLatLike } from 'mapbox-gl'
import animationData from '~/assets/lottie/marker-pulse.json'

const position = ref<LngLatLike>([116.397, 39.908])
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap
      :options="{ style: 'mapbox://styles/mapbox/light-v11', center: [116.397, 39.908], zoom: 12 }"
    >
      <MapboxLottieMarker
        v-model:lnglat="position"
        :animation-data="animationData"
        :width="80"
        :height="80"
      />
    </MapboxMap>
  </div>
</template>

API

Props

Prop	Default	Type
`lnglat`		`mapboxgl.LngLat \| { lng: number; lat: number; } \| { lon: number; lat: number; } \| [number, number]`
`animationData`		`object` lottie 动画数据（JSON 对象）；与 path 二选一
`path`		`string` lottie 动画 URL；与 animationData 二选一
`speed`	`1`	`number` 播放速度倍率
`width`	`64`	`number` 容器宽（像素）
`height`	`64`	`number` 容器高（像素）
`loop`	`true`	`boolean` 是否循环
`autoplay`	`true`	`boolean` 是否自动播放

Emits

Event	Type
`update:lnglat`	`[value: mapboxgl.LngLatLike]`

Changelog

No recent changes

MapboxMarker

标记，默认插槽渲染自定义 DOM，支持 v-model:lnglat 双向绑定与拖拽回写。

MapboxPopup

弹窗，默认插槽渲染内容，lnglat 锚定且响应式更新位置。