---
title: "MapboxLights"
description: "设置地图 3D 光照（环境光 / 平行光 / 平面光），照亮 3D 建筑与地形。"
seo_title: "MapboxLights Component"
seo_description: "Configure 3D lighting (ambient, directional, flat) via setLights to shade 3D buildings and terrain."
canonical_url: "https://mapbox.mhaibaraai.cn/docs/environment/lights"
---
# MapboxLights

> 设置地图 3D 光照（环境光 / 平行光 / 平面光），照亮 3D 建筑与地形。

## 简介

`MapboxLights` 调用 `setLights` 设置地图的 3D 光照列表（`ambient` 环境光 / `directional` 平行光 / `flat` 平面光），作用于 3D 建筑与地形。需配合含 3D 内容的样式（如 `standard`）与倾斜视角。

## 用法

环境光叠加带投影的平行光，照亮 standard 样式的 3D 建筑：

```vue [LightsExample.vue]
<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

```ts
/**
 * Props for the MapboxLights component
 */
interface MapboxLightsProps {
  /**
   * 3D 光照列表（ambient/directional/flat）
   */
  lights: mapboxgl.LightsSpecification[];
}
```

## Changelog

See commit history for [src/runtime/components/environment/Lights.vue](https://github.com/mhaibaraai/movk-mapbox/commits/main/src/runtime/components/environment/Lights.vue).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.