fog-sky-atmosphere

本文回答：SkyLayer 天空、渐变大气、setFog 雾效 —— 给 CAD/互联网地图加氛围。

一、SkyLayer 天空图层

const sky = new vjmap.SkyLayer({
  skyType: "gradient",              // gradient / atmosphere
  skyGradient: [
    "interpolate", ["linear"], ["sky-radial-progress"],
    0.8, "rgba(135, 206, 235, 1.0)",
    1,   "rgba(0, 0, 0, 0.1)"
  ],
  skyGradientCenter: [0, 0],
  skyGradientRadius: 90,             // 0-180 度
  skyOpacity: [
    "interpolate", ["exponential", 0.1], ["zoom"],
    0, 0.3,
    22, 1
  ]
});
sky.addTo(map);

需要地图 pitch > 0 才能看到。

二、atmosphere 模式（模拟大气）

new vjmap.SkyLayer({
  skyType: "atmosphere",
  skyAtmosphereSun: [0, 0],                  // 太阳位置 [方位角, 极角]：方位角 0 = 正北顺时针；极角 0 = 天顶、90 = 地平线（不是高度角）
  skyAtmosphereSunIntensity: 15,             // 0-100
  skyAtmosphereColor: "#fff",
  skyAtmosphereHaloColor: "#fff",
  skyOpacity: 1
}).addTo(map);

三、setFog 雾效

// ⚠️ 本版 fog 规范只认 range / color / horizon-blend 三个键——
// "high-color"/"space-color"/"star-intensity" 等键不支持，会被拒（console: unknown property）。
map.setFog({
  range: [0.5, 10],          // 雾从透明到不透明的距离区间，单位 = 视口高度（地图中心处为 0，负值更靠近相机），取值 -20~20
  color: "#ffffff",          // 雾色
  "horizon-blend": 0.1       // 地平线混合（0-1）
});

// 读取：立即返回刚设置的 spec 对象（不是空对象）
const fog = map.getFog();   // { range: [0.5,10], color: "#ffffff", "horizon-blend": 0.1 }

// 移除
map.setFog(null);

四、light 光照

map.setLight({
  anchor: "viewport",              // map / viewport
  color: "#ffffff",
  intensity: 0.5,
  position: [1.15, 210, 30]         // radial, azimuth, polar
});

影响 fill-extrusion 阴影方向。

五、组合氛围（推荐组合）

黄昏城市 3D：

map.setPitch(60);
map.setBearing(-30);

map.setFog({
  range: [-1, 1.5],
  color: "#f9c9a3",
  "horizon-blend": 0.3
});

map.setLight({
  anchor: "map",
  color: "#fce1a2",
  intensity: 0.8,
  position: [1.5, 120, 25]
});

new vjmap.SkyLayer({
  skyType: "atmosphere",
  skyAtmosphereColor: "#ffaa55",
  skyAtmosphereHaloColor: "#ffddaa",
  skyAtmosphereSunIntensity: 20
}).addTo(map);

六、与互联网底图搭配

雾效和 sky 是世界空间的，对互联网底图和 CAD 栅格都生效，无需为底图单独处理。

七、常见坑

1. Sky 看不见 → pitch 太小；推荐 ≥ 60。
2. Sky 遮挡地图 → skyOpacity 按 zoom 插值（低 zoom 时降低）。
3. fog range 用错：range 不是 zoom 区间，而是以视口高度为单位的距离（地图中心为 0）。[0.5, 10] 表示中心稍远处开始雾化、约 10 个视口高度外全雾。另外雾随 pitch 渐显：pitch 45° 以下基本看不到，65° 以上完全生效。
4. FPS 掉：skyType: "atmosphere" 比 "gradient" 开销大；性能敏感场景用 gradient。
5. CAD 栅格底图闪烁：栅格 layer 在 sky 之前，记得调 addTo 的 before 参数。
6. SkyLayer 的 set/get 全坏：sky.setSkyType(...)/getSkyType() 等委托 this._map.setSkyType(layerId, ...)，而 Map 上没有这些方法 → 调用即抛 TypeError: this._map.setSkyType is not a function。只能用构造 options 一次配好；要改效果请 remove() 后重建或直接 map.setPaintProperty(layerId, "sky-type", ...)。