WindLayer

Example

Example Source Code

<template>
  <div style="height: 400px" class="map-dark-bg">
    <mb-map :zoom="2">
      <mb-wind-layer
        :image="__RESOURCE_URL__ + 'wind/2016112200.png'"
        :wind-min="[-21.32, -21.57]"
        :wind-max="[26.8, 21.42]"
        :wind-range="[360, 170]"
        :wind-origin="[0, 85]"
        :wind-res="1"
      />
    </mb-map>
  </div>
</template>

<script setup lang="ts"></script>

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
image	URL of the image	string	-
wind-max	Maximum wind values (e.g., [u, v])	number[]	-
wind-min	Minimum wind values (e.g., [u, v])	number[]	-
wind-origin	Origin of the wind data (e.g., [x, y] coordinates)	number[]	-
wind-range	Range of wind values (e.g., [[minU, minV], [maxU, maxV]]) or [min, max]	number[]	-
wind-res	Resolution of the wind data (e.g., [width, height] or [xRes, yRes])	number[]	-
drop-rate	Rate at which particles are dropped/spawned	number	0.003
drop-rate-bump	Increase in the drop rate (e.g., for bursts or changes)	number	0.01
fade-opacity	Rate at which particle opacity fades over time (values closer to 1 fade slower)	number	0.998
particles-number	Number of particles	number	256 * 256
ramp-colors	Color ramp for visualization	IndexAny	{ 0.0: "#6fb9e6", 0.1: "#8ac4e6", 0.2: "#abdda4", 0.3: "#e6f598", 0.4: "#fee08b", 0.5: "#fdae61", 0.6: "#f46d43", 1.0: "#d53e4f" }
speed-factor	Speed factor/multiplier (controls the overall animation speed)	number	0.15

EVENTS

Name	Description	Parameters
created	Initialization complete event	-

SLOTS

Name	Description

METHODS

Name	Description	Definition