---
title: "MaplibreSky"
description: "Set sky, horizon and fog blending plus the globe atmosphere, forwarding options to the MapLibre sky specification."
canonical_url: "https://maplibre.mhaibaraai.cn/en/docs/environment/sky"
---
# MaplibreSky

> Set sky, horizon and fog blending plus the globe atmosphere, forwarding options to the MapLibre sky specification.

## Introduction

`MaplibreSky` calls `setSky` to configure the sky. The `options` prop is forwarded directly to the MapLibre sky specification (`sky-color`, `horizon-color`, `fog-color`, `sky-horizon-blend`, `horizon-fog-blend`, `fog-ground-blend`, `atmosphere-blend`). Omit it to use the specification defaults; unmounting restores the defaults. The horizon and fog are most visible at high pitch, and `atmosphere-blend` controls the atmosphere glow in globe projection.

## Usage

Overlay a sky gradient and ground fog at a high pitch:

```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.