---
title: "MaplibreSky"
description: "设置天空、地平线与雾的渐变及 globe 大气光晕，options 透传 MapLibre sky 规格。"
canonical_url: "https://maplibre.mhaibaraai.cn/docs/environment/sky"
---
# MaplibreSky

> 设置天空、地平线与雾的渐变及 globe 大气光晕，options 透传 MapLibre sky 规格。

## 简介

`MaplibreSky` 调用 `setSky` 设置天空效果，`options` 透传 MapLibre sky 规格（`sky-color` / `horizon-color` / `fog-color` / `sky-horizon-blend` / `horizon-fog-blend` / `fog-ground-blend` / `atmosphere-blend`），省略则使用规格默认值；卸载时恢复默认。大俯仰角下地平线与雾化最明显，`atmosphere-blend` 作用于 globe 投影的大气光晕。

## 用法

大俯仰角下叠加天空渐变与地面雾化：

```vue [SkyExample.vue]
<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MaplibreMap
      :options="{
        style: 'https://tiles.openfreemap.org/styles/liberty',
        center: [116.391, 39.908],
        zoom: 13,
        pitch: 75,
        maxPitch: 85,
        bearing: -20
      }"
    >
      <MaplibreSky
        :options="{
          'sky-color': '#199EF3',
          'horizon-color': '#f0f8ff',
          'fog-color': '#ffffff',
          'sky-horizon-blend': 0.5,
          'horizon-fog-blend': 0.6,
          'fog-ground-blend': 0.4
        }"
      />
    </MaplibreMap>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the MaplibreSky component
 */
interface MaplibreSkyProps {
  /**
   * 天空、地平线、雾与大气混合选项；缺省 {} 使用样式规范默认值
   */
  options?: SkySpecification | undefined;
}
```

## Changelog

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


## Sitemap

See the full [sitemap](https://maplibre.mhaibaraai.cn/sitemap.md) for all pages.