VSnow

VSnow 控件用于在地图上添加雪效果。

• 配置文档

警告

To use this feature your application must use Mapbox GL JS v3.9 or any later releases. 要使用此功能，您的应用程序必须使用 Mapbox GL JS v3.9 或任何后续版本。

基础用法

将雪效果添加到地图中。

snow.vue

<script lang="ts" setup>
import type { MapboxProps, SnowProps } from '@movk-repo/mapbox'
import type { ExpressionSpecification } from 'mapbox-gl'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VMapbox, VSnow, VTianditu } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const token = getTdtRandomToken()

const defaultOptions: MapboxProps['defaultOptions'] = {
  center: [120.12185156878638, 30.240938297281147],
  zoom: 12.483539430181498,
  pitch: 67,
  bearing: -88.8000000000016,
  hash: true,
}

// 使用表达式在缩放级别11和13之间过渡一些属性，防止缩小时可见
function zoomBasedReveal(value: number): ExpressionSpecification {
  return [
    'interpolate',
    ['linear'],
    ['zoom'],
    11,
    0.0,
    13,
    value,
  ]
}

const snowOptions: SnowProps['defaultOptions'] = ({
  'density': zoomBasedReveal(0.85),
  'intensity': 1.0,
  'center-thinning': 0.1,
  'direction': [0, 50],
  'opacity': 1.0,
  'color': `#ffffff`,
  'flake-size': 0.71,
  'vignette': zoomBasedReveal(0.3),
  'vignette-color': `#ffffff`,
})
</script>

<template>
  <VMapbox :access-token="accessToken" :default-options="defaultOptions">
    <VTianditu :token="token" type="img_w" terrain />
    <VSnow :default-options="snowOptions" />
  </VMapbox>
</template>

隐藏源代码

API

snowProps

属性名	说明	类型	默认值
color	雪粒子的颜色	string,object	#ffffff
centerThinning	雪粒子的中心稀疏度 (0-1)	number,object	0.4
density	雪粒子的密度 (0-1)	number,object	['interpolate', ['linear'], ['zoom'], 11, 0, 13, 0.85]
direction	雪粒子的方向	array,object	[0, 50]
flakeSize	雪花颗粒尺寸 (0-5)	number,object	0.71
intensity	雪粒子的移动速度 (0-1)	number,object	1
opacity	雪粒子的透明度 (0-1)	number,object	1
vignette	雪景小品屏幕空间效果	number,object	['interpolate', ['linear'], ['zoom'], 11, 0, 13, 0.3]
vignetteColor	雪景小品屏幕空间角落着色	string,object	#ffffff
defaultOptions	雪效果的配置项（覆盖同名属性）	object SnowSpecification	-