VFog

VFog 控件用于在地图上添加雾效果。

• 配置文档

基础用法

将雾效果添加到地图中。

fog.vue

<script lang="ts" setup>
import type { FogProps, MapboxLoadEvent, MapboxProps } from '@movk-repo/mapbox'
import { VFog, VMapbox, VRasterDemSource } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

const defaultOptions: MapboxProps['defaultOptions'] = {
  zoom: 13,
  center: [6.6301, 45.35625],
  pitch: 80,
  bearing: 160,
  interactive: false,
}

const fogOptions = ref<FogProps['defaultOptions']>()

// 定义昼夜两种雾效果
const nightFogOptions: FogProps['defaultOptions'] = {
  'range': [-1, 2],
  'horizon-blend': 0.3,
  'color': '#242B4B',
  'high-color': '#161B36',
  'space-color': '#0B1026',
  'star-intensity': 0.8,
}
const dayFogOptions: FogProps['defaultOptions'] = {
  'range': [-1, 2],
  'horizon-blend': 0.3,
  'color': 'white',
  'high-color': '#add8e6',
  'space-color': '#d8f2ff',
  'star-intensity': 0.0,
}

let animationFrameId = 0

async function load({ map }: MapboxLoadEvent) {
  await map.once('idle')

  let lastTime = 0.0
  let animationTime = 0.0
  let cycleTime = 0.0
  let night = true

  const initialBearing = map.getBearing()

  const frame = (time: number) => {
    if (lastTime === 0.0) {
      lastTime = time
    }
    const elapsedTime = (time - lastTime) / 1000.0

    animationTime += elapsedTime
    cycleTime += elapsedTime

    if (cycleTime >= 10.0) {
      fogOptions.value = night ? nightFogOptions : dayFogOptions
      night = !night
      cycleTime = 0.0
    }

    // 旋转地图（角度随时间线性增长）
    const rotation = initialBearing + animationTime * 2.0
    map.setBearing(rotation % 360)

    lastTime = time
    animationFrameId = window.requestAnimationFrame(frame)
  }

  animationFrameId = window.requestAnimationFrame(frame)
}

onUnmounted(() => {
  window.cancelAnimationFrame(animationFrameId)
})
</script>

<template>
  <VMapbox type="satellite-v9" :access-token="accessToken" :default-options="defaultOptions" @load="load">
    <VRasterDemSource />
    <VFog :default-options="fogOptions" />
  </VMapbox>
</template>

隐藏源代码

API

fogProps

属性名	说明	类型	默认值
color	地平线以下的大气区域的颜色	string,object	#ffffff
highColor	地平线上方的大气区域的颜色	string,object	#245cdf
horizonBlend	地平线融合（0-1）	number,object	['interpolate', ['linear'], ['zoom'], 4, 0.2, 7, 0.1]
range	雾气透明到不透明的距离范围	array,object	[0.5, 10]
spaceColor	地平线以上区域的颜色	string,object	['interpolate', ['linear'], ['zoom'], 4, '#010b19', 7, '#367ab9']
starIntensity	恒星强度 (0-1)	number,object	['interpolate', ['linear'], ['zoom'], 5, 0.35, 6, 0]
verticalRange	垂直范围	array,object	[0, 0]
defaultOptions	雾效果的配置项（覆盖同名属性）	object FogSpecification	-