Sky Layer

<!--
  示例：天空层
  核心逻辑：setSky 配置天顶色、地平线色与雾色，俯仰 60 度才能看到天空
  依赖：MapLibre GL JS 4 · jsDelivr CDN · demotiles 样式
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>天空层</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
<style>
  html,body{height:100%;margin:0}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#16181d}
  .bar{flex:0 0 auto;display:flex;gap:10px;align-items:center;padding:8px 12px;
       background:#f6f7f9;border-bottom:1px solid #e3e6ea;font-size:12px;color:#58606e;flex-wrap:wrap}
  .bar b{color:#16181d;font-weight:600}
  .seg{display:flex;border:1px solid #cdd3db;border-radius:4px;overflow:hidden}
  .seg button{border:0;background:#fff;padding:4px 10px;font:12px/1.5 inherit;color:#16181d;cursor:pointer}
  .seg button.on{background:#1f5fd0;color:#fff}
  #map{flex:1 1 auto;min-height:0}
</style>
</head>
<body>
<div class="bar">
  <div class="seg" id="preset">
    <button data-p="day" class="on">白天</button>
    <button data-p="dusk">黄昏</button>
    <button data-p="night">夜间</button>
  </div>
  <span>俯仰 <b id="p">—</b></span>
  <span>天空只在俯仰大于 0 时可见</span>
</div>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
<script>
(function () {
  'use strict';

  if (typeof maplibregl === 'undefined') {
    document.body.innerHTML =
      '<div style="padding:24px;color:#b42318">MapLibre 加载失败，请检查能否访问 cdn.jsdelivr.net</div>';
    return;
  }

  var map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [104.2, 35.5],
    zoom: 2.4,
    pitch: 60,
    bearing: 12,
    maxPitch: 85,
    attributionControl: { compact: true, customAttribution: 'MapLibre demo tiles' }
  });

  map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }), 'top-right');

  var PRESETS = {
    day: {
      name: '白天',
      sky: {
        'sky-color': '#88c6fc',
        'sky-horizon-blend': 0.6,
        'horizon-color': '#f7f3e8',
        'horizon-fog-blend': 0.45,
        'fog-color': '#c9d8e8',
        'fog-ground-blend': 0.8,
        'atmosphere-blend': 0.6
      }
    },
    dusk: {
      name: '黄昏',
      sky: {
        'sky-color': '#7b6ea8',
        'sky-horizon-blend': 0.5,
        'horizon-color': '#f3b06b',
        'horizon-fog-blend': 0.5,
        'fog-color': '#b98a7a',
        'fog-ground-blend': 0.85,
        'atmosphere-blend': 0.9
      }
    },
    night: {
      name: '夜间',
      sky: {
        'sky-color': '#0b1736',
        'sky-horizon-blend': 0.7,
        'horizon-color': '#243050',
        'horizon-fog-blend': 0.6,
        'fog-color': '#141c2e',
        'fog-ground-blend': 0.9,
        'atmosphere-blend': 1
      }
    }
  };

  map.on('load', function () {
    map.setSky(PRESETS.day.sky);
  });

  document.getElementById('preset').addEventListener('click', function (e) {
    var btn = e.target.closest('button');
    if (!btn) return;
    map.setSky(PRESETS[btn.getAttribute('data-p')].sky);
    document.querySelectorAll('#preset button').forEach(function (b) {
      b.classList.toggle('on', b === btn);
    });
  });

  map.on('moveend', function () {
    document.getElementById('p').textContent = map.getPitch().toFixed(0) + '°';
  });

  map.on('error', function (e) {
    if (e.error) console.warn('地图错误：' + e.error.message);
  });
})();
</script>
</body>
</html>