ImageLottieLoader

ImageLottieLoader provides preloaded Lottie animation icons

Example

Example Source Code

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import lottie from 'lottie_canvas'
import {
  MbImageLottieLoader,
  MbMap,
  MbSymbolLayer,
  MbTiandituLayer,
} from '@mapbox-react/core'

const App = () => {
  const [mapCenter] = useState([115.124368, 29.216049])
  const [zoom, setZoom] = useState(12)

  const symbolDataSource = [
    {
      coordinates: [115.125368, 29.216049],
      properties: {
        icon: 'lottieIcon',
      },
    },
    {
      coordinates: [115.126368, 29.226049],
      properties: {
        icon: 'lottieIcon',
      },
    },
  ]

  const lottieImages = [
    {
      name: 'lottieIcon',
      size: [140, 100],
      onAdd(context: any) {
        lottie.loadAnimation({
          renderer: 'canvas',
          loop: true,
          autoplay: true,
          animationData: window.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,
          },
        })
      },
    },
  ]

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom}>
        <MbImageLottieLoader images={lottieImages} />
        <MbTiandituLayer types={['vec']} />
        <MbSymbolLayer
          data={symbolDataSource}
          iconImageField="icon"
          iconAllowOverlap
          textAllowOverlap
        />
      </MbMap>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))

API

PROPS

Name	Description	Type	Default
images	An array of image properties. Each object in the array must include a required name property and image-related information	Array<{ name: string; size: number[], onAdd: (context: CanvasRenderingContext2D) => void }>	-

• You need to add the Lottie animation to the context (CanvasRenderingContext2D) within the onAdd method.
• size is a required property.

EVENTS

Name	Description	Parameters
onCreated	Map initialization completed event	-

METHODS

Name	Description	Definition