ImageFrameLoader

Frame animation image loader: provide preloaded animated frame icons

Example

Example Source Code

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

<script setup lang="ts">
const tiandituTypes = ['vec', 'cia']
const images = [
  {
    name: 'hIcon',
    dir: 'h',
    steps: 7,
    duration: 150,
    url: `${__RESOURCE_URL__}images/h-steps.jpeg`,
  },
  {
    name: 'vIcon',
    dir: 'v',
    steps: 3,
    duration: 300,
    url: `${__RESOURCE_URL__}images/v-steps.png`,
  },
]
const symbolDataSource = [
  {
    coordinates: [115.124368, 29.216049],
    properties: {
      icon: 'hIcon',
    },
  },
  {
    coordinates: [115.124368, 29.246049],
    properties: {
      icon: 'hIcon',
    },
  },
  {
    coordinates: [115.124368, 29.186049],
    properties: {
      icon: 'hIcon',
    },
  },
  {
    coordinates: [115.324368, 29.216049],
    properties: {
      icon: 'vIcon',
    },
  },
]
</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; 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
created	Map initialization completed event	-

SLOTS

Name	Description

METHODS

Name	Description	Definition