ImageLoader

ImageLoader provides preloaded icons and generates custom images.

Example

Example Source Code

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

<script setup lang="ts">
import type { Map } from 'mapbox-gl'

const tiandituTypes = ['vec', 'cia']
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,
  },
]
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',
    },
  },
]

function createRectIcon(map: Map) {
  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
    },
  }
}
</script>

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
created	Map initialization completed event	-

SLOTS

Name	Description

METHODS

Name	Description	Definition