เขียนเว็บเตือนภัยน้ำท่วมด้วย Open API: Open-Meteo, ThaiWater, RainViewer และ Google Flood Hub

// rain.mjs — ฝนพยากรณ์รายวันตามรอบวันของกรมอุตุนิยมวิทยา (07:00–07:00 น.) แล้วจัดระดับตามเกณฑ์ อต.
const RAIN_LEVELS = [
  { min: 90.1, label: "ฝนหนักมาก", level: 3 },
  { min: 35.1, label: "ฝนหนัก", level: 2 },
  { min: 10.1, label: "ฝนปานกลาง", level: 1 },
  { min: 0.1, label: "ฝนเล็กน้อย", level: 0 },
];
 
function classifyRain(mm) {
  const { label, level } = RAIN_LEVELS.find((r) => mm >= r.min) ?? { label: "ไม่มีฝน", level: 0 };
  return { label, level };
}
 
// ฝนรายชั่วโมงของ Open-Meteo คือฝนสะสมของ "ชั่วโมงก่อนหน้า" เวลาที่ระบุ
// ค่าที่ติดป้าย 08:00 คือฝน 07:00–08:00 → ถอย 8 ชั่วโมงแล้วอ่านวันที่ = วันฝนที่เริ่ม 07:00 น.
function rainDayOf(localTime) {
  const t = new Date(localTime + "Z"); // อ่านตัวเลขตรง ๆ ไม่ขึ้นกับ timezone ของเครื่อง
  t.setUTCHours(t.getUTCHours() - 8);
  return t.toISOString().slice(0, 10);
}
 
export async function rainForecast(lat, lon, days = 3) {
  const url = new URL("https://api.open-meteo.com/v1/forecast");
  url.search = new URLSearchParams({
    latitude: lat,
    longitude: lon,
    hourly: "precipitation,precipitation_probability",
    timezone: "Asia/Bangkok", // เวลาใน response เป็นเวลาไทย
    forecast_days: days + 1, // เผื่อชั่วโมงถึง 07:00 น. ของวันสุดท้าย
  });
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Open-Meteo ${res.status}`);
  const { hourly } = await res.json();
 
  const byDay = new Map();
  hourly.time.forEach((time, i) => {
    const day = rainDayOf(time);
    const d = byDay.get(day) ?? { date: day, mm: 0, chance: 0, hours: 0 };
    d.mm += hourly.precipitation[i] ?? 0;
    d.chance = Math.max(d.chance, hourly.precipitation_probability[i] ?? 0);
    d.hours += 1;
    byDay.set(day, d);
  });
 
  return [...byDay.values()]
    .filter((d) => d.hours === 24) // ตัดวันที่ข้อมูลไม่ครบ 24 ชั่วโมง
    .slice(0, days)
    .map(({ date, mm, chance }) => ({ date, mm: Math.round(mm * 10) / 10, chance, ...classifyRain(mm) }));
}

https://flood-api.open-meteo.com/v1/flood?latitude=15.72&longitude=100.14&daily=river_discharge&forecast_days=14

// river.mjs — เทียบปริมาณน้ำพยากรณ์กับสถิติย้อนหลังของจุดเดียวกัน
const FLOOD_API = "https://flood-api.open-meteo.com/v1/flood";
 
async function getDischarge(params) {
  const url = new URL(FLOOD_API);
  url.search = new URLSearchParams({ daily: "river_discharge", ...params });
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Flood API ${res.status}`);
  return res.json();
}
 
function percentile(sorted, p) {
  return sorted[Math.floor(p * (sorted.length - 1))];
}
 
// คำนวณเกณฑ์ครั้งเดียวแล้วเก็บไว้ (ไม่ต้องดึงข้อมูล 15 ปีทุกครั้ง)
export async function buildThresholds(lat, lon) {
  const { daily } = await getDischarge({
    latitude: lat, longitude: lon,
    start_date: "2011-01-01", end_date: "2025-12-31",
  });
  const values = daily.river_discharge.filter((v) => v != null).sort((a, b) => a - b);
  return { p50: percentile(values, 0.5), p90: percentile(values, 0.9), p98: percentile(values, 0.98) };
}
 
export async function riverStatus(lat, lon, t) {
  const data = await getDischarge({ latitude: lat, longitude: lon, forecast_days: 14 });
  const { time, river_discharge: q } = data.daily;
  const peak = Math.max(...q);
  const level = peak >= t.p98 ? "วิกฤต" : peak >= t.p90 ? "เฝ้าระวัง" : "ปกติ";
  return {
    cell: [data.latitude, data.longitude], // จุดกริดที่ API เลือกให้จริง
    today: q[0],
    peak,
    peakDate: time[q.indexOf(peak)],
    level,
  };
}

import { rainForecast } from "./rain.mjs";
import { buildThresholds, riverStatus } from "./river.mjs";
import { waterLevels } from "./waterlevel.mjs";
 
console.table(await rainForecast(18.79, 98.98)); // เชียงใหม่
 
const [lat, lon] = [15.72, 100.14]; // แม่น้ำเจ้าพระยา นครสวรรค์
const t = await buildThresholds(lat, lon);
console.log(await riverStatus(lat, lon, t));
 
console.table((await waterLevels("พระนครศรีอยุธยา")).slice(0, 5));

$ node try.mjs
{ cell: [ 15.725006, 100.125 ], today: 2248.05, peak: 2248.05, peakDate: '2026-10-04', level: 'เฝ้าระวัง' }

// google-flood.mjs — สถานะน้ำท่วมล่าสุดในไทยจาก Google Flood Forecasting API
// ต้องลงชื่อใน waitlist ให้ได้รับอนุมัติ แล้วตั้ง GOOGLE_FLOOD_API_KEY ใน environment
const BASE = "https://floodforecasting.googleapis.com/v1";
const KEY = process.env.GOOGLE_FLOOD_API_KEY;
 
async function post(path, body) {
  const res = await fetch(`${BASE}/${path}?key=${KEY}`, {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify(body),
  });
  if (!res.ok) throw new Error(`${path} ${res.status}: ${await res.text()}`);
  return res.json();
}
 
// 1) สถานะล่าสุดของทุก gauge ในไทย (ค่าเริ่มต้นคืนเฉพาะ gauge ที่โมเดลผ่านการตรวจคุณภาพ)
const { floodStatuses = [] } = await post("floodStatus:searchLatestFloodStatusByArea", { regionCode: "TH" });
 
// 2) ชื่อสถานีและแม่น้ำ (อย่า cache ผลนี้นานเกิน 1 วัน เพราะ gauge ถูกเพิ่ม/ลบได้)
const { gauges = [] } = await post("gauges:searchGaugesByArea", { regionCode: "TH" });
const info = new Map(gauges.map((g) => [g.gaugeId, g]));
 
const ORDER = { EXTREME: 0, SEVERE: 1, ABOVE_NORMAL: 2, NO_FLOODING: 3, UNKNOWN: 4 };
const rows = floodStatuses
  .filter((s) => s.severity !== "NO_FLOODING")
  .sort((a, b) => ORDER[a.severity] - ORDER[b.severity])
  .map((s) => ({
    severity: s.severity,          // EXTREME / SEVERE / ABOVE_NORMAL / UNKNOWN
    trend: s.forecastTrend,        // RISE / FALL / NO_CHANGE
    river: info.get(s.gaugeId)?.river ?? "-",
    site: info.get(s.gaugeId)?.siteName ?? s.gaugeId,
    issued: s.issuedTime,
    source: s.source,              // หน่วยงานเจ้าของข้อมูล gauge
  }));
 
console.table(rows);

storage_percent = (ระดับน้ำ − ระดับท้องน้ำ) ÷ (ระดับตลิ่ง − ระดับท้องน้ำ) × 100

// waterlevel.mjs — ระดับน้ำจากสถานีโทรมาตร (JSON ที่ thaiwater.net ใช้แสดงผล)
// ⚠️ endpoint นี้ไม่มีเอกสารทางการ อาจเปลี่ยนได้ทุกเมื่อ — ใช้เพื่อการเรียนรู้
const URL_TW = "https://api-v3.thaiwater.net/api/v1/thaiwater30/public/thailand";
 
const SITUATION = { 1: "น้ำน้อยวิกฤติ", 2: "น้ำน้อย", 3: "น้ำปกติ", 4: "น้ำมาก", 5: "ล้นตลิ่ง" };
const STALE_HOURS = 6; // ข้อมูลเก่ากว่านี้ = สถานีอาจขัดข้อง อย่าใช้ตัดสินเตือนภัย
 
export async function waterLevels(provinceName) {
  const res = await fetch(URL_TW);
  if (!res.ok) throw new Error(`ThaiWater ${res.status}`);
  const json = await res.json(); // ~6 MB — ควรเรียกจาก backend แล้ว cache เท่านั้น
 
  return json.waterlevel.data.data
    .filter((r) => r.geocode.province_name.th === provinceName && r.waterlevel_msl != null)
    .map((r) => ({
      station: r.station.tele_station_name.th,
      code: r.station.tele_station_oldcode,
      lat: r.station.tele_station_lat,
      lon: r.station.tele_station_long,
      time: r.waterlevel_datetime,
      level_msl: Number(r.waterlevel_msl),
      bank_msl: r.station.min_bank,
      percent_of_bank: Number(r.storage_percent),
      situation: SITUATION[r.situation_level] ?? "-",
      // เวลาของ ThaiWater เป็นเวลาไทย ไม่มี timezone ต่อท้าย
      stale: Date.now() - Date.parse(r.waterlevel_datetime.replace(" ", "T") + "+07:00") > STALE_HOURS * 3600e3,
    }))
    .sort((a, b) => b.percent_of_bank - a.percent_of_bank);
}

// alerts.mjs — รวมทุกแหล่งเป็น endpoint เดียว พร้อม cache ในหน่วยความจำ
import http from "node:http";
import { readFile } from "node:fs/promises";
import { rainForecast } from "./rain.mjs";
import { buildThresholds, riverStatus } from "./river.mjs";
import { waterLevels } from "./waterlevel.mjs";
 
const cache = new Map();
async function cached(key, ttlMs, fn) {
  const hit = cache.get(key);
  if (hit && Date.now() - hit.at < ttlMs) return hit.value;
  try {
    const value = await fn();
    cache.set(key, { at: Date.now(), value });
    return value;
  } catch (err) {
    if (hit) return { ...hit.value, stale: true }; // แหล่งล่ม → ส่งค่าเก่าพร้อมบอกว่าเก่า
    throw err;
  }
}
 
const MIN = 60_000;
const SITE = { name: "นครสวรรค์", lat: 15.72, lon: 100.14, province: "นครสวรรค์" };
 
async function buildAlerts() {
  const thresholds = await cached("thresholds", 24 * 60 * MIN, () => buildThresholds(SITE.lat, SITE.lon));
  const [rain, river, stations] = await Promise.all([
    cached("rain", 30 * MIN, () => rainForecast(SITE.lat, SITE.lon)),
    cached("river", 60 * MIN, () => riverStatus(SITE.lat, SITE.lon, thresholds)),
    cached("water", 10 * MIN, () => waterLevels(SITE.province)),
  ]);
  const overBank = stations.filter((s) => !s.stale && s.percent_of_bank > 100);
  return {
    site: SITE.name,
    generatedAt: new Date().toISOString(),
    rain,
    river: { ...river, thresholds },
    overBank,
    stations,
    sources: ["Open-Meteo (CC BY 4.0)", "คลังข้อมูลน้ำแห่งชาติ (สสน.)"],
  };
}
 
http
  .createServer(async (req, res) => {
    if (req.url === "/") {
      res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
      return res.end(await readFile(new URL("./index.html", import.meta.url)));
    }
    if (req.url !== "/api/alerts") return res.writeHead(404).end();
    try {
      res.writeHead(200, { "content-type": "application/json; charset=utf-8" });
      res.end(JSON.stringify(await buildAlerts(), null, 2));
    } catch (err) {
      res.writeHead(502).end(JSON.stringify({ error: String(err) }));
    }
  })
  .listen(3000, () => console.log("http://localhost:3000/api/alerts"));

<!doctype html>
<html lang="th">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>เตือนภัยน้ำ</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <style>
    body { margin: 0; font-family: system-ui, "Noto Sans Thai", sans-serif; background: #fbfaf7; color: #1f1d1a; }
    header { padding: 12px 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
    .card { border: 1px solid #d6d1c4; border-radius: 6px; padding: 8px 12px; background: #fff; }
    .watch { border-color: #c2410c; color: #c2410c; }
    #map { height: calc(100vh - 80px); }
  </style>
</head>
<body>
  <header>
    <strong id="site">กำลังโหลด…</strong>
    <span class="card" id="river"></span>
    <span class="card" id="rain"></span>
  </header>
  <div id="map"></div>
 
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <script type="module">
    const COLORS = { "ล้นตลิ่ง": "#b91c1c", "น้ำมาก": "#2563eb", "น้ำปกติ": "#15803d", "น้ำน้อย": "#ca8a04", "น้ำน้อยวิกฤติ": "#7c2d12" };
 
    const map = L.map("map").setView([15.2, 100.3], 8);
    L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 19,
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);
 
    // 1) เรดาร์ฝนล่าสุดจาก RainViewer (โหลดตรงจากเบราว์เซอร์)
    const rv = await (await fetch("https://api.rainviewer.com/public/weather-maps.json")).json();
    const frame = rv.radar.past.at(-1);
    L.tileLayer(`${rv.host}${frame.path}/256/{z}/{x}/{y}/2/1_1.png`, {
      opacity: 0.6,
      maxNativeZoom: 7, // ระดับซูมสูงสุดที่ฟรีให้ — ซูมเกินนี้ Leaflet จะขยายภาพเอง
      maxZoom: 19,
      attribution: '<a href="https://www.rainviewer.com/">RainViewer</a>',
    }).addTo(map);
 
    // 2) ข้อมูลตัวเลขจาก backend ของเรา
    const a = await (await fetch("/api/alerts")).json();
    document.querySelector("#site").textContent = `จุดเฝ้าระวัง: ${a.site}`;
    const river = document.querySelector("#river");
    river.textContent = `แม่น้ำ ${a.river.today.toLocaleString()} m³/s · ${a.river.level}`;
    if (a.river.level !== "ปกติ") river.classList.add("watch");
    const rainMax = a.rain.reduce((m, d) => (d.level > m.level ? d : m));
    document.querySelector("#rain").textContent = `ฝน 3 วัน: สูงสุด ${rainMax.label} (${rainMax.date})`;
 
    for (const s of a.stations) {
      L.circleMarker([s.lat, s.lon], {
        radius: 7,
        color: s.stale ? "#9ca3af" : COLORS[s.situation] ?? "#6b7280",
        fillOpacity: 0.8,
      })
        .bindPopup(`<b>${s.station}</b> (${s.code})<br>${s.level_msl} ม.รทก. · ${s.percent_of_bank}% ของตลิ่ง<br>${s.situation} · ${s.time}`)
        .addTo(map);
    }
  </script>
</body>
</html>