ImageFrameLoader

Frame animation image loader: provide preloaded animated frame icons

Example

Example Source Code

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

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

  const symbolDataSource = [
    {
      coordinates: [115.124368, 29.216049],
      properties: {
        icon: 'vIcon',
      },
    },
    {
      coordinates: [115.124368, 29.246049],
      properties: {
        icon: 'vIcon',
      },
    },
    {
      coordinates: [115.124368, 29.186049],
      properties: {
        icon: 'hIcon',
      },
    },
    {
      coordinates: [115.324368, 29.216049],
      properties: {
        icon: 'hIcon',
      },
    },
  ]

  const images = [
    {
      name: 'hIcon',
      dir: 'h' as const,
      steps: 7,
      duration: 150,
      url: 'https://mapbox-web.github.io/mapbox-react/images/h-steps.jpeg',
    },
    {
      name: 'vIcon',
      dir: 'v' as const,
      steps: 3,
      duration: 300,
      url: 'https://mapbox-web.github.io/mapbox-react/images/v-steps.png',
    },
  ]

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom}>
        <MbImageFrameLoader images={images} />
        <MbTiandituLayer types={['vec']} />
        <MbSymbolLayer
          data={symbolDataSource}
          iconImageField="icon"
          iconSize={0.3}
          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; url: string; steps: number; dir?: string; duration?: number; requestInit?: RequestInit }>	-

• This component uses fetch to request image data. If the request is cross-origin, please configure CORS headers on the server side. requestInit is the second parameter of the fetch function.
• dir is the cropping direction. For horizontal images, the value is 'h'; for vertical images, the value is 'v'. The default is 'v'.
• steps is the number of frame steps.
• duration is the duration of each frame in milliseconds. The default is 300.

EVENTS

Name	Description	Parameters
onCreated	Map initialization completed event	-

METHODS

Name	Description	Definition