VRasterParticleLayer

VRasterParticleLayer 用于渲染光栅粒子的图层。

• 配置文档

基础用法

创建风粒子动画，将数据驱动的粒子动画添加到地图上。

raster-particle-layer.vue

<script lang="ts" setup>
import type { RasterParticleLayerProps } from '@movk-repo/mapbox'
import { VMapbox, VRasterArraySource, VRasterParticleLayer } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

const url = 'mapbox://rasterarrayexamples.gfs-winds'
const paint: RasterParticleLayerProps['paint'] = {
  'raster-particle-speed-factor': 0.4,
  'raster-particle-fade-opacity-factor': 0.9,
  'raster-particle-reset-rate-factor': 0.4,
  'raster-particle-count': 4000,
  'raster-particle-max-speed': 40,
  'raster-particle-color': [
    'interpolate',
    ['linear'],
    ['raster-particle-speed'],
    1.5,
    'rgba(134,163,171,256)',
    2.5,
    'rgba(126,152,188,256)',
    4.12,
    'rgba(110,143,208,256)',
    4.63,
    'rgba(110,143,208,256)',
    6.17,
    'rgba(15,147,167,256)',
    7.72,
    'rgba(15,147,167,256)',
    9.26,
    'rgba(57,163,57,256)',
    10.29,
    'rgba(57,163,57,256)',
    11.83,
    'rgba(194,134,62,256)',
    13.37,
    'rgba(194,134,63,256)',
    14.92,
    'rgba(200,66,13,256)',
    16.46,
    'rgba(200,66,13,256)',
    18.0,
    'rgba(210,0,50,256)',
    20.06,
    'rgba(215,0,50,256)',
    21.6,
    'rgba(175,80,136,256)',
    23.66,
    'rgba(175,80,136,256)',
    25.21,
    'rgba(117,74,147,256)',
    27.78,
    'rgba(117,74,147,256)',
    29.32,
    'rgba(68,105,141,256)',
    31.89,
    'rgba(68,105,141,256)',
    33.44,
    'rgba(194,251,119,256)',
    42.18,
    'rgba(194,251,119,256)',
    43.72,
    'rgba(241,255,109,256)',
    48.87,
    'rgba(241,255,109,256)',
    50.41,
    'rgba(256,256,256,256)',
    57.61,
    'rgba(256,256,256,256)',
    59.16,
    'rgba(0,256,256,256)',
    68.93,
    'rgba(0,256,256,256)',
    69.44,
    'rgba(256,37,256,256)',
  ],
}
</script>

<template>
  <VMapbox type="dark-v11" :max-zoom="2" :min-zoom="2" :access-token="accessToken">
    <VRasterArraySource :url="url" :tile-size="512">
      <VRasterParticleLayer :paint="paint" source-layer="10winds" />
    </VRasterArraySource>
  </VMapbox>
</template>

隐藏源代码

Api

rasterParticleLayerProps

属性名	说明	类型	默认值
visible	图层可见性	boolean	true
order	图层顺序	number	-
minzoom	图层最小缩放级别	number	0
maxzoom	图层最大缩放级别	number	22
sourceLayer	矢量切片源使用的图层	string	-
filter	图层过滤器	array	-
layout	图层布局属性	object	-
paint	图层绘制属性	object	-
slot	图层槽位	string	-
metadata	图层任意属性	object	-
defaultOptions	图层配置选项（覆盖同名属性）	object	-

rasterParticleLayerEmits

事件名	说明	回调参数
load	图层加载完成时触发	Function

类型定义

RasterParticleLayerLoadEvent

layers/RasterParticleLayer/RasterParticleLayer.ts

export interface RasterParticleLayerLoadEvent {
  layer: RasterParticleLayerSpecification
  source: RasterArraySourceSpecification
  map: Map
}