Lottie图片加载器（ImageLottieLoader）

ImageLottieLoader 提供预加载Lottie动画图标

示例

示例源码

<template>
  <div style="height: 400px" class="vw-full vh-full">
    <mb-map :center="[115.124368, 29.216049]" :zoom="10">
      <mb-tianditu-layer :types="tiandituTypes" />
      <mb-image-lottie-loader :images="images" />
      <mb-symbol-layer
        id="symbol"
        :data="symbolDataSource"
        :icon-size="0.8"
        icon-image-field="icon"
        icon-rotation-alignment="map"
      />
    </mb-map>
  </div>
</template>

<script setup lang="ts">
import lottie from 'lottie-web/build/player/lottie_canvas'
import animData from './even-handling-icon.json'

animData.assets.forEach((a) => {
  a.u = `${__RESOURCE_URL__}images/处置中/`
})

const tiandituTypes = ['vec', 'cia']
const images = [
  {
    name: 'lottieIcon',
    size: [140, 100],
    onAdd(context) {
      lottie.loadAnimation({
        renderer: 'canvas',
        loop: true,
        autoplay: true,
        animationData: animData, // JSON文件路径
        rendererSettings: {
          context, // the canvas context, only support "2d" context
          // preserveAspectRatio: 'xMinYMin slice', // Supports the same options as the svg element's preserveAspectRatio property
          clearCanvas: true,
        },
      })
    },
  },
]
const symbolDataSource = [
  {
    coordinates: [115.124368, 29.216049],
    properties: {
      icon: 'lottieIcon',
    },
  },
  {
    coordinates: [115.124368, 29.246049],
    properties: {
      icon: 'lottieIcon',
    },
  },
  {
    coordinates: [115.124368, 29.186049],
    properties: {
      icon: 'lottieIcon',
    },
  },
  {
    coordinates: [115.324368, 29.216049],
    properties: {
      icon: 'lottieIcon',
    },
  },
]
</script>

API

PROPS

名称	描述	类型	默认值
images	图片属性数组 数组中每个对象需包含必需的name属性以及图片相关信息	Array<{ name: string; size: number[], onAdd: (context: CanvasRenderingContext2D) => void }>	-

• 需要在onAdd里面添加lottie动画到context（CanvasRenderingContext2D）
• size为必填属性

EVENTS

名称	描述	参数
created	地图初始化完成事件	-

SLOTS

名称	描述

METHODS

名称	描述	定义