---
title: "MapboxFog"
description: "设置地图的雾 / 大气效果，options 透传 mapbox fog 规格。"
seo_title: "MapboxFog Component"
seo_description: "Set the map atmosphere/fog via setFog, forwarding a Mapbox fog specification."
canonical_url: "https://mapbox.mhaibaraai.cn/docs/environment/fog"
---
# MapboxFog

> 设置地图的雾 / 大气效果，options 透传 mapbox fog 规格。

## 简介

`MapboxFog` 调用 `setFog` 为地图添加雾 / 大气效果，`options` 透传 mapbox fog 规格（`color`/`high-color`/`horizon-blend`/`space-color`/`range` 等），省略则用样式默认大气。倾斜或地球投影下最明显。

## 用法

倾斜视角下叠加带色大气与星空：

```vue [FogExample.vue]
<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap
      :options="{
        style: 'mapbox://styles/mapbox/standard',
        center: [116.391, 39.908],
        zoom: 15,
        pitch: 70,
        bearing: -20
      }"
    >
      <MapboxFog
        :options="{
          'color': '#dbeafe',
          'high-color': '#a5b4fc',
          'horizon-blend': 0.3,
          'space-color': '#0b1026',
          'star-intensity': 0.15,
          'range': [1, 12]
        }"
      />
    </MapboxMap>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the MapboxFog component
 */
interface MapboxFogProps {
  /**
   * 大气/雾效果选项；缺省 {} 使用样式默认大气
   */
  options?: mapboxgl.FogSpecification | undefined;
}
```

## Changelog

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


## Sitemap

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