VRasterArraySource

VRasterArraySource 栅格数组切片源。

• 配置文档
• 样式规范

基础用法

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

rasterArraySourceProps

属性名	说明	类型	默认值
url	源服务的 URL	string	-
tiles	源的数组	array	-
tileSize	瓦片大小	number	256
bounds	源的边界框	array	-
minzoom	最小缩放级别	number	0
maxzoom	最大缩放级别	number	22
attribution	源的名称	string	-
volatile	是否缓存瓦片	boolean	false
defaultOptions	默认配置项（覆盖同名属性）	object	-

rasterArraySourceEmits

事件名	说明	回调参数
load	源加载完成后触发	Function

类型定义

RasterArraySourceLoadEvent

sources/RasterArraySource/RasterArraySource.ts

export interface RasterArraySourceLoadEvent {
  source: RasterArrayTileSource
  map: Map
}