ImageLoader

ImageLoader provides preloaded icons and generates custom images.

Example

Example Source Code

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

const App = () => {
  const [mapCenter] = useState([115.128368, 29.216049])
  const [zoom, setZoom] = useState(15)

  const symbolDataSource = [
    {
      coordinates: [115.124368, 29.216049],
      properties: {
        icon: 'pulsing-dot-1',
      },
    },
    {
      coordinates: [115.125368, 29.218049],
      properties: {
        icon: 'pulsing-dot-2',
      },
    },
    {
      coordinates: [115.126368, 29.219049],
      properties: {
        icon: 'pulsing-dot-3',
      },
    },
    {
      coordinates: [115.128368, 29.216049],
      properties: {
        icon: 'pulsing-dot-4',
      },
    },
    {
      coordinates: [115.134368, 29.216049],
      properties: {
        icon: 'pulsing-dot-5',
      },
    },
  ]

  const images = [
    {
      name: 'pulsing-dot-1',
      type: 'function',
      functionName: 'drawDynamicCircle',
      functionProps: {
        radius: 50,
        color: '#F34A4A',
      },
    },
    {
      name: 'pulsing-dot-2',
      type: 'function',
      functionName: 'drawStaticCircle',
      functionProps: {
        radius: 50,
        color: '#F34A4A',
      },
    },
    {
      name: 'pulsing-dot-3',
      type: 'function',
      functionName: 'drawDynamicGradientCircle',
      functionProps: {
        radius: 50,
        color: '#F34A4A',
      },
    },
    {
      name: 'pulsing-dot-4',
      type: 'function',
      functionName: 'drawDynamicHeart',
      functionProps: {
        radius: 50,
        color: '#F34A4A',
      },
    },
    {
      name: 'pulsing-dot-5',
      type: 'custom',
      functionName: createRectIcon,
    },
  ]

  function createRectIcon(map: any) {
    const size = 50
    return {
      width: size,
      height: size,
      data: new Uint8ClampedArray(size * size * 4),
      context: null as unknown as CanvasRenderingContext2D,

      onAdd() {
        const canvas = document.createElement('canvas')
        canvas.width = this.width
        canvas.height = this.height
        this.context = canvas.getContext('2d')!
      },

      render() {
        const context = this.context

        context.clearRect(0, 0, this.width, this.height)
        context.rect(0, 0, this.width, this.height)
        context.fillStyle = '#f00'
        context.strokeStyle = 'blue'
        context.lineWidth = 5
        context.fill()
        context.stroke()

        this.data = context.getImageData(0, 0, this.width, this.height).data
        map.triggerRepaint()

        return true
      },
    }
  }

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom}>
        <MbImageLoader images={images} />
        <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; type: string; url: string, size: [number, number] }>	-

type can be link, link:*, function, custom

• When type is link, the image size will not be set, and only PNG images are supported.
• When type is link:*, the size property will be used to set the image size, and various image formats are supported. Using this form to load images does not support setting icon opacity within the SymbolLayer component
• When type is function, you can use the functionName property to call one of the following built-in icon drawing methods:
  1. drawDynamicCircle，The functionProps property supports setting color，radius，duration
  2. drawStaticCircle，The functionProps property supports setting color，radius
  3. drawDynamicGradientCircle，The functionProps property supports setting color，radius，duration
  4. drawDynamicHeart，The functionProps property supports setting color，radius，duration
• When type is custom, you can use a custom functionName function to create icons that conform to the Mapbox specification.

EVENTS

Name	Description	Parameters
onCreated	Map initialization completed event	-

METHODS

Name	Description	Definition