图片加载器（ImageLoader）

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

示例

示例源码

<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

名称	描述	类型	默认值
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

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

SLOTS

名称	描述

METHODS

名称	描述	定义