图片加载器（ImageLoader）

ImageLoader 提供预加载图标(icon)、生成自定义图片

示例

示例源码

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

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

type可以为 link, link:*, function, custom

• 当为link时，不会设置image的size，仅支持PNG图片
• 当为link:*时，会使用size属性设置图片大小，支持多种格式图片。使用这种形式加载图片，不支持SymbolLayer组件里面设置icon透明度
• 当为function时，可以通过functionName属性调用内置的几种图标绘制方法：
  1. drawDynamicCircle，functionProps支持设置color，radius，duration
  2. drawStaticCircle，functionProps支持设置color，radius
  3. drawDynamicGradientCircle，functionProps支持设置color，radius，duration
  4. drawDynamicHeart，functionProps支持设置color，radius，duration
• 当为custom时，支持自定义functionName函数创建符合Mapbox规范的图标

EVENTS

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

METHODS

名称	描述	定义