图层配色指南

每个图层均使用分段线性渐变的方式定义配色，数组格式为 [数值, 颜色, 数值, 颜色, ...]，相邻两段之间进行线性插值，超出范围的值取最近端点颜色。

温度 (temperature) — ℃

覆盖 -70.15 ~ 46.85 ℃，从暗紫冷色调过渡到深橙红暖色调。

const temperature_color = [
  -70.15, "rgba(115,70,105,255)",
  -55.15, "rgba(202,172,195,255)",
  -40.15, "rgba(162,70,145,255)",
  -25.15, "rgba(143,89,169,255)",
  -15.15, "rgba(157,219,217,255)",
  -8.15,  "rgba(106,191,181,255)",
  -4.15,  "rgba(100,166,189,255)",
  0,      "rgba(93,133,198,255)",
  0.85,   "rgba(68,125,99,255)",
  9.85,   "rgba(128,147,24,255)",
  20.85,  "rgba(243,183,4,255)",
  29.85,  "rgba(232,83,25,255)",
  46.85,  "rgba(71,14,0,255)"
]

湿度 (relative_humidity) — %

覆盖 0 ~ 100 %，从棕红干燥色调渐变为深蓝湿润色调。

const relative_humidity_color = [
  0,   "rgba(173, 85, 56, 255)",
  30,  "rgba(173, 110, 56, 255)",
  40,  "rgba(173, 146, 56, 255)",
  50,  "rgba(105, 173, 56, 255)",
  60,  "rgba(56, 173, 121, 255)",
  70,  "rgba(56, 174, 173, 255)",
  75,  "rgba(56, 160, 173, 255)",
  80,  "rgba(56, 157, 173, 255)",
  83,  "rgba(56, 148, 173, 255)",
  87,  "rgba(56, 135, 173, 255)",
  90,  "rgba(56, 132, 173, 255)",
  93,  "rgba(56, 123, 173, 255)",
  97,  "rgba(56, 98, 157, 255)",
  100, "rgba(56, 70, 114, 255)"
]

风速 (wind) — m/s

覆盖 0 ~ 104 m/s，低速为蓝绿色调，高速过渡至灰白色。

const wind_color = [
  0,   "rgba(98,113,183,255)",
  1,   "rgba(57,97,159,255)",
  3,   "rgba(74,148,169,255)",
  5,   "rgba(77,141,123,255)",
  7,   "rgba(83,165,83,255)",
  9,   "rgba(53,159,53,255)",
  11,  "rgba(167,157,81,255)",
  13,  "rgba(159,127,58,255)",
  15,  "rgba(161,108,92,255)",
  17,  "rgba(129,58,78,255)",
  19,  "rgba(175,80,136,255)",
  21,  "rgba(117,74,147,255)",
  24,  "rgba(109,97,163,255)",
  27,  "rgba(68,105,141,255)",
  29,  "rgba(92,144,152,255)",
  36,  "rgba(125,68,165,255)",
  46,  "rgba(231,215,215,256)",
  51,  "rgba(219,212,135,256)",
  77,  "rgba(205,202,112,256)",
  104, "rgba(128,128,128,255)"
]

降水 (precipitation) — mm

覆盖 0 ~ 50 mm，无降水为灰色，随降水量加深趋向紫色。

const precipitation_color = [
  0,   "rgba(111, 111, 111, 255)",
  0.6, "rgba(60, 116, 160, 255)",
  6,   "rgba(59, 161, 161, 255)",
  8,   "rgba(59, 161, 61, 255)",
  10,  "rgba(130, 161, 59, 255)",
  15,  "rgba(161, 161, 59, 255)",
  20,  "rgba(161, 59, 59, 255)",
  31,  "rgba(161, 59, 161, 255)",
  50,  "rgba(168, 168, 168, 255)"
]

气压 (pressure_msl) — hPa

覆盖 900 ~ 1080 hPa，低压深蓝，标准气压灰色，高压深红。

const pressure_color = [
  900,  "rgba(8, 16, 48, 255)",
  950,  "rgba(0, 32, 96, 255)",
  976,  "rgba(0, 52, 146, 255)",
  986,  "rgba(0, 90, 148, 255)",
  995,  "rgba(0, 117, 146, 255)",
  1002, "rgba(26, 140, 147, 255)",
  1007, "rgba(103, 162, 155, 255)",
  1011, "rgba(155, 183, 172, 255)",
  1013, "rgba(182, 182, 182, 255)",
  1015, "rgba(176, 174, 152, 255)",
  1019, "rgba(167, 147, 107, 255)",
  1024, "rgba(163, 116, 67, 255)",
  1030, "rgba(159, 81, 44, 255)",
  1038, "rgba(142, 47, 57, 255)",
  1046, "rgba(111, 24, 64, 255)",
  1080, "rgba(48, 8, 24, 255)"
]

辐射 (shortwave_radiation) — W/m²

覆盖 0 ~ 1150 W/m²，无辐射为深灰，强辐射趋近纯白。

const shortwave_radiation_color = [
  0,    "rgba(110, 110, 110, 255)",
  5,    "rgba(122, 105, 106, 255)",
  50,   "rgba(194, 53, 81, 255)",
  100,  "rgba(199, 66, 81, 255)",
  200,  "rgba(208, 90, 81, 255)",
  400,  "rgba(226, 131, 90, 255)",
  600,  "rgba(242, 170, 110, 255)",
  800,  "rgba(255, 208, 141, 255)",
  1000, "rgba(255, 245, 180, 255)",
  1150, "rgba(255, 255, 255, 255)"
]

云量 (cloud_cover) — %

覆盖 0 ~ 100 %，晴空为黄褐色，全云覆盖为浅灰色。

const cloud_cover_color = [
  0,   "rgba(156, 142, 87, 255)",
  10,  "rgba(143, 131, 87, 255)",
  30,  "rgba(157, 192, 157, 255)",
  90,  "rgba(145, 171, 145, 255)",
  100, "rgba(187, 187, 187, 255)"
]

雷达 (composite_reflectivity) — dBZ

覆盖 0 ~ 72.5 dBZ，低于 12.5 dBZ 完全透明，随反射率从蓝绿过渡至红紫。 0, 160, 246, 0

const radar_color = [
  0.0,  "rgba(0, 160, 246, 0)",
  9.9,  "rgba(0, 160, 246, 0)",
  12.5, "rgba(0, 160, 246, 200)",
  17.5, "rgba(0, 236, 236, 200)",
  22.5, "rgba(0, 216, 0, 200)",
  27.5, "rgba(1, 144, 0, 200)",
  32.5, "rgba(255, 255, 0, 200)",
  37.5, "rgba(231, 192, 0, 200)",
  42.5, "rgba(255, 144, 0, 200)",
  47.5, "rgba(255, 0, 0, 200)",
  52.5, "rgba(214, 0, 0, 200)",
  57.5, "rgba(192, 0, 0, 200)",
  62.5, "rgba(255, 0, 240, 200)",
  67.5, "rgba(150, 0, 180, 200)",
  72.5, "rgba(173, 144, 240, 200)"
]

如何使用配色插值

以下是一个通用的线性插值函数，可将任意数值映射为对应的 RGBA 颜色：

/**
 * 根据分段配色表对数值进行线性插值，返回 [r, g, b, a] 数组
 * @param {number[]} colorStops - 格式为 [value, color, value, color, ...]
 * @param {number} value - 待插值的数值
 * @returns {[number, number, number, number]}
 */
function interpolateColor(colorStops, value) {
  const parseRgba = (str) => str.match(/[\d.]+/g).map(Number);

  // 超出范围取端点颜色
  if (value <= colorStops[0]) return parseRgba(colorStops[1]);
  if (value >= colorStops[colorStops.length - 2]) return parseRgba(colorStops[colorStops.length - 1]);

  for (let i = 0; i < colorStops.length - 2; i += 2) {
    const v0 = colorStops[i];
    const v1 = colorStops[i + 2];
    if (value >= v0 && value <= v1) {
      const t = (value - v0) / (v1 - v0);
      const c0 = parseRgba(colorStops[i + 1]);
      const c1 = parseRgba(colorStops[i + 3]);
      return c0.map((ch, idx) => Math.round(ch + (c1[idx] - ch) * t));
    }
  }
}

// 示例：将 25℃ 映射为对应的温度颜色
const [r, g, b, a] = interpolateColor(temperature_color, 25);
console.log(`rgba(${r}, ${g}, ${b}, ${a / 255})`);