MapboxLights
设置地图 3D 光照（环境光 / 平行光 / 平面光），照亮 3D 建筑与地形。
简介
MapboxLights 调用 setLights 设置地图的 3D 光照列表（ambient 环境光 / directional 平行光 / flat 平面光），作用于 3D 建筑与地形。需配合含 3D 内容的样式（如 standard）与倾斜视角。
用法
环境光叠加带投影的平行光，照亮 standard 样式的 3D 建筑：
<script setup lang="ts">
import type { LightsSpecification } from 'mapbox-gl'
// 环境光 + 平行光（含投影），照亮 standard 样式的 3D 建筑
const lights: LightsSpecification[] = [
{ id: 'ambient', type: 'ambient', properties: { color: '#ffffff', intensity: 0.5 } },
{
id: 'directional',
type: 'directional',
properties: { color: '#ffffff', intensity: 0.8, direction: [210, 30], 'cast-shadows': true }
}
]
</script>
<template>
<div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
<MapboxMap
:options="{
style: 'mapbox://styles/mapbox/standard',
center: [116.473, 39.915],
zoom: 16,
pitch: 65,
bearing: 30
}"
>
<MapboxLights :lights="lights" />
</MapboxMap>
</div>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
lights | mapboxgl.LightsSpecification[]3D 光照列表（ambient/directional/flat） |
Changelog
No recent changes