VRain

VRain 控件用于在地图上添加雨效果。

• 配置文档

警告

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

基础用法

将雨效果添加到地图中。

rain.vue

<script lang="ts" setup>
import type { MapboxProps, RainProps } from '@movk-repo/mapbox'
import type { ExpressionSpecification } from 'mapbox-gl'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VMapbox, VRain, 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,
}

function zoomBasedReveal(value: number): ExpressionSpecification {
  return [
    'interpolate',
    ['linear'],
    ['zoom'],
    11,
    0.0,
    13,
    value,
  ]
}

const rainOptions: RainProps['defaultOptions'] = ({
  'density': zoomBasedReveal(0.5),
  'intensity': 1.0,
  'color': '#a8adbc',
  'opacity': 0.7,
  'vignette': zoomBasedReveal(1.0),
  'vignette-color': '#464646',
  'direction': [0, 80],
  'droplet-size': [2.6, 18.2],
  'distortion-strength': 0.7,
  'center-thinning': 0, // Rain to be displayed on the whole screen area
})
</script>

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

隐藏源代码

API

rainProps

属性名	说明	类型	默认值
centerThinning	雨滴从中心开始稀疏的稀疏因子 (0-1)	number,object	0.57
color	雨滴颜色	string,object	['interpolate', ['linear'], ['measure-light', 'brightness'], 0, '#03113d', 0.3, '#a8adbc']
density	雨滴密度 (0-1)	number,object	['interpolate', ['linear'], ['zoom'], 11, 0, 13, 0.5]
direction	雨滴方向 (0-360)	array,object	[0, 80]
distortionStrength	雨滴屏幕空间扭曲强度 (0-1)	number,object	0.7
dropletSize	雨滴尺寸 (0-50)	array,object	[2.6, 18.2]
intensity	雨滴强度 (0-1)	number,object	1
opacity	雨滴透明度 (0-1)	number,object	['interpolate', ['linear'], ['measure-light', 'brightness'], 0, 0.88, 1, 0.7]
vignette	屏幕空间晕影雨色调效果强度	number,object	['interpolate', ['linear'], ['zoom'], 11, 0, 13, 1]
vignetteColor	雨景小品屏幕空间角落着色	string,object	['interpolate', ['linear'], ['measure-light', 'brightness'], 0, '#001736', 0.3, '#464646']
defaultOptions	雨配置项(覆盖同名属性)	object	-