655 lines
32 KiB
HTML
655 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{{ .Title }}</title>
|
||
<link rel="stylesheet" href="/static/css/tailwind.min.css">
|
||
<script src="/static/js/plotly-2.27.0.min.js"></script>
|
||
<style>
|
||
body { font-family: Arial, sans-serif; margin: 0; }
|
||
.content-narrow { width: 86%; max-width: 1200px; margin: 0 auto; }
|
||
.placeholder { padding: 40px 0; color: #666; text-align: center; }
|
||
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 20px; }
|
||
/* 图容器：居中 + 合适尺寸 + 方形比例 */
|
||
.plot-box { width: clamp(320px, 80vw, 720px); margin: 0 auto; aspect-ratio: 1 / 1; overflow: hidden; }
|
||
@supports not (aspect-ratio: 1 / 1) {
|
||
.plot-box { height: 520px; }
|
||
}
|
||
#radarTooltip { position: absolute; pointer-events: none; background: #fff; border: 1px solid #e5e7eb; font-size: 12px; padding: 6px 8px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); display: none; z-index: 10; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
{{ template "header" . }}
|
||
|
||
<div class="content-narrow p-4">
|
||
<div class="card mb-4">
|
||
<div class="text-lg font-semibold mb-2">历史时次查询</div>
|
||
<div class="w-full flex flex-col items-start gap-2">
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
<input id="tsStart" type="datetime-local" class="border rounded px-2 py-1"/>
|
||
<span>至</span>
|
||
<input id="tsEnd" type="datetime-local" class="border rounded px-2 py-1"/>
|
||
<button id="tsQuery" class="px-3 py-1 bg-blue-600 text-white rounded">查询</button>
|
||
</div>
|
||
<div>
|
||
<select id="timeSelect" class="border rounded px-2 py-1 min-w-[260px]">
|
||
<option value="">最新</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card mb-4">
|
||
<div class="text-lg font-semibold mb-2">7/40/102 瓦片信息</div>
|
||
<div id="tileInfo" class="text-sm space-y-1">
|
||
<div>时间：<span id="dt" class="font-mono"></span></div>
|
||
<div>索引：z=<span id="z"></span> / y=<span id="y"></span> / x=<span id="x"></span></div>
|
||
<div>尺寸：<span id="size"></span></div>
|
||
<div>边界：W=<span id="west"></span>，S=<span id="south"></span>，E=<span id="east"></span>，N=<span id="north"></span></div>
|
||
<div>分辨率（度/像素）：<span id="res"></span></div>
|
||
</div>
|
||
</div>
|
||
<div class="card mb-4">
|
||
<div class="text-lg font-semibold mb-2">雷达站气象（南宁雷达站，第八台气象站）</div>
|
||
<div id="rtInfo" class="text-sm grid grid-cols-2 gap-y-1 gap-x-6">
|
||
<div>站点：<span id="rt_alias"></span></div>
|
||
<div>位置：<span id="rt_lat"></span>，<span id="rt_lon"></span></div>
|
||
<div>时间：<span id="rt_dt" class="font-mono"></span></div>
|
||
<div>温度：<span id="rt_t"></span></div>
|
||
<div>湿度：<span id="rt_h"></span></div>
|
||
<div>云量：<span id="rt_c"></span></div>
|
||
<div>能见度：<span id="rt_vis"></span> km</div>
|
||
<div>下行短波：<span id="rt_dswrf"></span> </div>
|
||
<div>风速：<span id="rt_ws"></span> m/s</div>
|
||
<div>风向：<span id="rt_wd"></span> °</div>
|
||
<div>气压：<span id="rt_p"></span> Pa</div>
|
||
</div>
|
||
</div>
|
||
<div class="card mb-4">
|
||
<div class="text-lg font-semibold mb-2">未来 3H 预报</div>
|
||
<div id="sectorInfo" class="text-sm">
|
||
<div id="sectorStatus">计算中…</div>
|
||
<div id="sectorDetail" class="mt-1 hidden">
|
||
最近距离：<span id="sectorDist"></span> km；
|
||
预计到达时间：<span id="sectorETA"></span><br>
|
||
位置：lat=<span id="sectorLat"></span>，lon=<span id="sectorLon"></span> 组合反射率：<span id="sectorDBZ"></span> dBZ
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="width: 100%;">
|
||
<div class="text-lg font-semibold mb-2 flex items-center justify-between">
|
||
<div>
|
||
雷达组合反射率 <span id="titleDt" class="text-gray-500 text-sm"></span>
|
||
</div>
|
||
<div class="flex items-center gap-2 text-sm">
|
||
<button id="btnPrev" class="px-2 py-1 border rounded">上一时次</button>
|
||
<span id="countInfo" class="text-gray-600">共0条，第0条</span>
|
||
<button id="btnNext" class="px-2 py-1 border rounded">下一时次</button>
|
||
</div>
|
||
</div>
|
||
<div class="w-full flex justify-center mb-2">
|
||
<input id="timeSlider" type="range" min="0" max="0" value="0" step="1" class="slider slider-horizontal w-64" />
|
||
</div>
|
||
<div id="radarPlot" class="plot-box"></div>
|
||
</div>
|
||
<div class="card mt-4" style="width: 100%;">
|
||
<div class="text-lg font-semibold mb-2">正方形裁减区域</div>
|
||
<div id="squarePlot" class="plot-box"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let gTileValues = null, gXs = null, gYs = null;
|
||
let gWindFromDeg = null, gWindSpeedMS = null;
|
||
let gTimes = [];
|
||
let gCurrentIdx = -1;
|
||
// 当前渲染瓦片的时间（用于 ETA 基准时间）
|
||
let gTileDT = null;
|
||
|
||
async function loadLatestTile() {
|
||
const res = await fetch('/api/radar/latest?z=7&y=40&x=102');
|
||
if (!res.ok) { throw new Error('加载最新瓦片失败'); }
|
||
const t = await res.json();
|
||
await renderTile(t);
|
||
}
|
||
|
||
async function loadTileAt(dtStr) {
|
||
const url = `/api/radar/at?z=7&y=40&x=102&dt=${encodeURIComponent(dtStr)}`;
|
||
const res = await fetch(url);
|
||
if (!res.ok) { throw new Error('加载指定时间瓦片失败'); }
|
||
const t = await res.json();
|
||
await renderTile(t, dtStr);
|
||
}
|
||
|
||
function fmtDTLocal(dt){
|
||
const pad = (n)=> String(n).padStart(2,'0');
|
||
return `${dt.getFullYear()}-${pad(dt.getMonth()+1)}-${pad(dt.getDate())}T${pad(dt.getHours())}:${pad(dt.getMinutes())}`;
|
||
}
|
||
function fromDTLocalInput(s){
|
||
if(!s) return null;
|
||
const t = new Date(s.replace('T','-').replace(/-/g,'/'));
|
||
const pad=(n)=> String(n).padStart(2,'0');
|
||
return `${t.getFullYear()}-${pad(t.getMonth()+1)}-${pad(t.getDate())} ${pad(t.getHours())}:${pad(t.getMinutes())}:00`;
|
||
}
|
||
async function populateTimes(fromStr, toStr) {
|
||
try {
|
||
let url = '/api/radar/times?z=7&y=40&x=102';
|
||
if (fromStr && toStr) {
|
||
url += `&from=${encodeURIComponent(fromStr)}&to=${encodeURIComponent(toStr)}`;
|
||
} else {
|
||
url += '&limit=60';
|
||
}
|
||
const res = await fetch(url);
|
||
if (!res.ok) return;
|
||
const j = await res.json();
|
||
const sel = document.getElementById('timeSelect');
|
||
while (sel.options.length > 1) sel.remove(1);
|
||
gTimes = j.times || [];
|
||
gTimes.forEach(dt => {
|
||
const opt = document.createElement('option');
|
||
opt.value = dt; opt.textContent = dt; sel.appendChild(opt);
|
||
});
|
||
if (gTimes.length > 0 && gCurrentIdx < 0) {
|
||
sel.value = gTimes[0];
|
||
gCurrentIdx = 0;
|
||
}
|
||
updateCountAndButtons();
|
||
updateSlider();
|
||
} catch {}
|
||
}
|
||
|
||
async function renderTile(t, forcedDt) {
|
||
const fmt5 = (n) => Number(n).toFixed(5);
|
||
|
||
document.getElementById('dt').textContent = t.dt;
|
||
document.getElementById('z').textContent = t.z;
|
||
document.getElementById('y').textContent = t.y;
|
||
document.getElementById('x').textContent = t.x;
|
||
document.getElementById('size').textContent = `${t.width} × ${t.height}`;
|
||
document.getElementById('west').textContent = fmt5(t.west);
|
||
document.getElementById('south').textContent = fmt5(t.south);
|
||
document.getElementById('east').textContent = fmt5(t.east);
|
||
document.getElementById('north').textContent = fmt5(t.north);
|
||
document.getElementById('res').textContent = fmt5(t.res_deg);
|
||
document.getElementById('titleDt').textContent = `（${t.dt}）`;
|
||
const selBox = document.getElementById('timeSelect');
|
||
for (let i = 0; i < selBox.options.length; i++) {
|
||
if (selBox.options[i].value === t.dt) { selBox.selectedIndex = i; break; }
|
||
}
|
||
gCurrentIdx = gTimes.indexOf(t.dt);
|
||
updateCountAndButtons();
|
||
|
||
const colors = [
|
||
"#0000F6","#01A0F6","#00ECEC","#01FF00","#00C800",
|
||
"#019000","#FFFF00","#E7C000","#FF9000","#FF0000",
|
||
"#D60000","#C00000","#FF00F0","#780084","#AD90F0"
|
||
];
|
||
const w = t.width, h = t.height;
|
||
const resDeg = t.res_deg;
|
||
const west = t.west, south = t.south, north = t.north;
|
||
|
||
const xs = new Array(w);
|
||
for (let c = 0; c < w; c++) xs[c] = west + (c + 0.5) * resDeg;
|
||
const ys = new Array(h);
|
||
for (let r = 0; r < h; r++) ys[r] = south + (r + 0.5) * resDeg;
|
||
|
||
gTileValues = t.values;
|
||
gXs = xs; gYs = ys;
|
||
|
||
const zBins = new Array(h);
|
||
const custom = new Array(h);
|
||
for (let r = 0; r < h; r++) {
|
||
const rowBins = new Array(w);
|
||
const rowCustom = new Array(w);
|
||
for (let c = 0; c < w; c++) {
|
||
const val = t.values[r][c];
|
||
if (val === null || val === undefined) { rowBins[c] = null; rowCustom[c] = [r,c,null]; continue; }
|
||
let dbz = Number(val); if (dbz < 0) dbz = 0; if (dbz > 75) dbz = 75;
|
||
let bin = Math.floor(dbz / 5); if (bin >= 15) bin = 14;
|
||
rowBins[c] = bin; rowCustom[c] = [r, c, dbz];
|
||
}
|
||
zBins[r] = rowBins; custom[r] = rowCustom;
|
||
}
|
||
|
||
const scale = [];
|
||
for (let i = 0; i < colors.length; i++) {
|
||
const tpos = colors.length === 1 ? 0 : i / (colors.length - 1);
|
||
scale.push([tpos, colors[i]]);
|
||
}
|
||
|
||
const data = [{
|
||
type: 'heatmap',
|
||
x: xs,
|
||
y: ys,
|
||
z: zBins,
|
||
customdata: custom,
|
||
colorscale: scale,
|
||
zmin: 0,
|
||
zmax: 14,
|
||
colorbar: {
|
||
orientation: 'h',
|
||
x: 0.5,
|
||
y: -0.12,
|
||
xanchor: 'center',
|
||
yanchor: 'top',
|
||
len: 0.8,
|
||
thickness: 16,
|
||
title: { text: 'dBZ', side: 'bottom' },
|
||
tickmode: 'array',
|
||
tickvals: Array.from({length: 15}, (_,i)=>i),
|
||
ticktext: Array.from({length: 15}, (_,i)=>String(i*5))
|
||
},
|
||
hovertemplate: 'row=%{customdata[0]}, col=%{customdata[1]}<br>'+
|
||
'lon=%{x:.3f}, lat=%{y:.3f}<br>'+
|
||
'dBZ=%{customdata[2]:.1f}<extra></extra>'
|
||
}];
|
||
|
||
if (gWindFromDeg !== null && gWindSpeedMS > 0) {
|
||
const stLat = 23.097234, stLon = 108.715433;
|
||
const half = 30;
|
||
const samples = 64;
|
||
const start = gWindFromDeg - half;
|
||
const end = gWindFromDeg + half;
|
||
const rangeM = gWindSpeedMS * 3 * 3600;
|
||
const xsFan = [];
|
||
const ysFan = [];
|
||
xsFan.push(stLon); ysFan.push(stLat);
|
||
for (let i = 0; i <= samples; i++) {
|
||
const θ = start + (end - start) * (i / samples);
|
||
const p = destPoint(stLat, stLon, ((θ % 360) + 360) % 360, rangeM);
|
||
xsFan.push(p.lon); ysFan.push(p.lat);
|
||
}
|
||
xsFan.push(stLon); ysFan.push(stLat);
|
||
data.push({
|
||
type: 'scatter', mode: 'lines', x: xsFan, y: ysFan,
|
||
line: { color: '#FFFFFF', width: 2, dash: 'dash' },
|
||
fill: 'toself', fillcolor: 'rgba(255,255,255,0.18)',
|
||
hoverinfo: 'skip', showlegend: false
|
||
});
|
||
}
|
||
|
||
const layout = {
|
||
autosize: true,
|
||
margin: {l:40, r:8, t:8, b:90},
|
||
xaxis: {title: '经度', tickformat: '.2f', zeroline: false, constrain: 'domain', automargin: true},
|
||
yaxis: {title: {text: '纬度', standoff: 12}, tickformat: '.2f', zeroline: false, scaleanchor: 'x', scaleratio: 1, constrain: 'domain', automargin: true},
|
||
};
|
||
|
||
const plotEl = document.getElementById('radarPlot');
|
||
Plotly.newPlot(plotEl, data, layout, {responsive: true, displayModeBar: false}).then(() => {
|
||
const size = plotEl.clientWidth;
|
||
Plotly.relayout(plotEl, {height: size});
|
||
});
|
||
window.addEventListener('resize', () => {
|
||
const size = plotEl.clientWidth;
|
||
Plotly.relayout(plotEl, {height: size});
|
||
Plotly.Plots.resize(plotEl);
|
||
});
|
||
|
||
try {
|
||
const dt = forcedDt ? new Date(forcedDt.replace(/-/g,'/')) : new Date(t.dt.replace(/-/g,'/'));
|
||
// 记录本次瓦片的时间，供 ETA 计算使用
|
||
gTileDT = dt;
|
||
const ceil10 = new Date(dt);
|
||
const m = dt.getMinutes();
|
||
const up = (Math.floor(m/10)*10 + 10) % 60;
|
||
ceil10.setMinutes(up, 0, 0);
|
||
if (up === 0) { ceil10.setHours(dt.getHours()+1); }
|
||
const pad = (n)=> n.toString().padStart(2,'0');
|
||
const dtStr = `${ceil10.getFullYear()}-${pad(ceil10.getMonth()+1)}-${pad(ceil10.getDate())} ${pad(ceil10.getHours())}:${pad(ceil10.getMinutes())}:00`;
|
||
await loadRealtimeAt(dtStr);
|
||
maybeCalcSector();
|
||
maybePlotSquare();
|
||
} catch (e) {
|
||
await loadRealtimeLatest();
|
||
maybeCalcSector();
|
||
maybePlotSquare();
|
||
}
|
||
}
|
||
|
||
async function loadRealtimeLatest() {
|
||
const alias = encodeURIComponent('南宁雷达站');
|
||
const res = await fetch(`/api/radar/weather_latest?alias=${alias}`);
|
||
if (!res.ok) throw new Error('加载实时气象失败');
|
||
const r = await res.json();
|
||
const f2 = (n) => Number(n).toFixed(2);
|
||
const f4 = (n) => Number(n).toFixed(4);
|
||
document.getElementById('rt_alias').textContent = r.alias;
|
||
document.getElementById('rt_lat').textContent = f4(r.lat);
|
||
document.getElementById('rt_lon').textContent = f4(r.lon);
|
||
document.getElementById('rt_dt').textContent = r.dt;
|
||
document.getElementById('rt_t').textContent = f2(r.temperature);
|
||
document.getElementById('rt_h').textContent = f2(r.humidity);
|
||
document.getElementById('rt_c').textContent = f2(r.cloudrate);
|
||
document.getElementById('rt_vis').textContent = f2(r.visibility);
|
||
document.getElementById('rt_dswrf').textContent = f2(r.dswrf);
|
||
document.getElementById('rt_ws').textContent = f2(r.wind_speed);
|
||
document.getElementById('rt_wd').textContent = f2(r.wind_direction);
|
||
document.getElementById('rt_p').textContent = f2(r.pressure);
|
||
|
||
gWindFromDeg = Number(r.wind_direction);
|
||
gWindSpeedMS = Number(r.wind_speed);
|
||
}
|
||
|
||
async function loadRealtimeAt(dtStr) {
|
||
const alias = encodeURIComponent('南宁雷达站');
|
||
const res = await fetch(`/api/radar/weather_at?alias=${alias}&dt=${encodeURIComponent(dtStr)}`);
|
||
if (!res.ok) throw new Error('加载指定时间气象失败');
|
||
const r = await res.json();
|
||
const f2 = (n) => Number(n).toFixed(2);
|
||
const f4 = (n) => Number(n).toFixed(4);
|
||
document.getElementById('rt_alias').textContent = r.alias;
|
||
document.getElementById('rt_lat').textContent = f4(r.lat);
|
||
document.getElementById('rt_lon').textContent = f4(r.lon);
|
||
document.getElementById('rt_dt').textContent = r.dt;
|
||
document.getElementById('rt_t').textContent = f2(r.temperature);
|
||
document.getElementById('rt_h').textContent = f2(r.humidity);
|
||
document.getElementById('rt_c').textContent = f2(r.cloudrate);
|
||
document.getElementById('rt_vis').textContent = f2(r.visibility);
|
||
document.getElementById('rt_dswrf').textContent = f2(r.dswrf);
|
||
document.getElementById('rt_ws').textContent = f2(r.wind_speed);
|
||
document.getElementById('rt_wd').textContent = f2(r.wind_direction);
|
||
document.getElementById('rt_p').textContent = f2(r.pressure);
|
||
|
||
gWindFromDeg = Number(r.wind_direction);
|
||
gWindSpeedMS = Number(r.wind_speed);
|
||
}
|
||
|
||
function toRad(d){ return d * Math.PI / 180; }
|
||
function toDeg(r){ return r * 180 / Math.PI; }
|
||
function haversine(lat1, lon1, lat2, lon2){
|
||
const R = 6371000;
|
||
const dLat = toRad(lat2 - lat1);
|
||
const dLon = toRad(lon2 - lon1);
|
||
const a = Math.sin(dLat/2)**2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon/2)**2;
|
||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
|
||
return R * c;
|
||
}
|
||
function bearingDeg(lat1, lon1, lat2, lon2){
|
||
const φ1 = toRad(lat1), φ2 = toRad(lat2), Δλ = toRad(lon2 - lon1);
|
||
const y = Math.sin(Δλ) * Math.cos(φ2);
|
||
const x = Math.cos(φ1)*Math.sin(φ2) - Math.sin(φ1)*Math.cos(φ2)*Math.cos(Δλ);
|
||
let brng = toDeg(Math.atan2(y, x));
|
||
return (brng + 360) % 360;
|
||
}
|
||
function angDiff(a, b){
|
||
let d = ((a - b + 540) % 360) - 180;
|
||
return Math.abs(d);
|
||
}
|
||
function destPoint(lat, lon, brgDeg, distM){
|
||
const R = 6371000;
|
||
const δ = distM / R;
|
||
const θ = toRad(brgDeg);
|
||
const φ1 = toRad(lat);
|
||
const λ1 = toRad(lon);
|
||
const sinφ1 = Math.sin(φ1), cosφ1 = Math.cos(φ1);
|
||
const sinδ = Math.sin(δ), cosδ = Math.cos(δ);
|
||
const sinφ2 = sinφ1 * cosδ + cosφ1 * sinδ * Math.cos(θ);
|
||
const φ2 = Math.asin(sinφ2);
|
||
const y = Math.sin(θ) * sinδ * cosφ1;
|
||
const x = cosδ - sinφ1 * sinφ2;
|
||
const λ2 = λ1 + Math.atan2(y, x);
|
||
return { lat: toDeg(φ2), lon: ((toDeg(λ2) + 540) % 360) - 180 };
|
||
}
|
||
function maybeCalcSector(){
|
||
try{
|
||
if(!gTileValues || !gXs || !gYs || gWindFromDeg===null || gWindSpeedMS===null){
|
||
return;
|
||
}
|
||
const stLat = 23.097234, stLon = 108.715433;
|
||
const halfAngle = 30;
|
||
const rangeM = gWindSpeedMS * 3 * 3600;
|
||
|
||
let best = null;
|
||
const h = gTileValues.length;
|
||
const w = gTileValues[0].length;
|
||
for(let r=0; r<h; r++){
|
||
const lat = gYs[r];
|
||
for(let c=0; c<w; c++){
|
||
const val = gTileValues[r][c];
|
||
if(val==null) continue;
|
||
const dbz = Number(val);
|
||
if(!(dbz >= 40)) continue;
|
||
const lon = gXs[c];
|
||
const dist = haversine(stLat, stLon, lat, lon);
|
||
if(dist > rangeM) continue;
|
||
const brg = bearingDeg(stLat, stLon, lat, lon);
|
||
if(angDiff(brg, gWindFromDeg) > halfAngle) continue;
|
||
if(!best || dist < best.dist){ best = {dist, lat, lon, dbz}; }
|
||
}
|
||
}
|
||
const statusEl = document.getElementById('sectorStatus');
|
||
const detailEl = document.getElementById('sectorDetail');
|
||
if(!best){
|
||
statusEl.textContent = '无（≥40 dBZ）';
|
||
detailEl.classList.add('hidden');
|
||
}else{
|
||
const etaSec = best.dist / gWindSpeedMS;
|
||
// 使用雷达瓦片时间作为 ETA 基准
|
||
const base = gTileDT instanceof Date ? gTileDT : new Date();
|
||
const eta = new Date(base.getTime() + etaSec*1000);
|
||
const pad = (n)=> String(n).padStart(2,'0');
|
||
const etaStr = `${eta.getFullYear()}-${pad(eta.getMonth()+1)}-${pad(eta.getDate())} ${pad(eta.getHours())}:${pad(eta.getMinutes())}`;
|
||
document.getElementById('sectorDist').textContent = (best.dist/1000).toFixed(1);
|
||
document.getElementById('sectorETA').textContent = etaStr;
|
||
document.getElementById('sectorLat').textContent = Number(best.lat).toFixed(4);
|
||
document.getElementById('sectorLon').textContent = Number(best.lon).toFixed(4);
|
||
document.getElementById('sectorDBZ').textContent = Number(best.dbz).toFixed(1);
|
||
statusEl.textContent = '三小时内可能有降雨（≥40 dBZ ）';
|
||
detailEl.classList.remove('hidden');
|
||
}
|
||
}catch(e){
|
||
const statusEl = document.getElementById('sectorStatus');
|
||
statusEl.textContent = '风险评估计算失败：' + e.message;
|
||
}
|
||
}
|
||
|
||
function maybePlotSquare(){
|
||
try{
|
||
if(!gTileValues || !gXs || !gYs || gWindSpeedMS===null){
|
||
return;
|
||
}
|
||
const R = 6371000;
|
||
const stLat = 23.097234, stLon = 108.715433;
|
||
const rangeM = gWindSpeedMS * 3 * 3600;
|
||
const dLat = (rangeM / R) * (180/Math.PI);
|
||
const dLon = (rangeM / (R * Math.cos(toRad(stLat)))) * (180/Math.PI);
|
||
const latMin = stLat - dLat, latMax = stLat + dLat;
|
||
const lonMin = stLon - dLon, lonMax = stLon + dLon;
|
||
|
||
const h = gYs.length, w = gXs.length;
|
||
let rStart = 0; while(rStart < h && gYs[rStart] < latMin) rStart++;
|
||
let rEnd = h-1; while(rEnd >= 0 && gYs[rEnd] > latMax) rEnd--;
|
||
let cStart = 0; while(cStart < w && gXs[cStart] < lonMin) cStart++;
|
||
let cEnd = w-1; while(cEnd >= 0 && gXs[cEnd] > lonMax) cEnd--;
|
||
if(rStart >= rEnd || cStart >= cEnd){
|
||
const el = document.getElementById('squarePlot');
|
||
el.innerHTML = '<div class="p-3 text-sm text-gray-600">正方形范围超出当前瓦片或无有效像元</div>';
|
||
return;
|
||
}
|
||
|
||
const xs = gXs.slice(cStart, cEnd+1);
|
||
const ys = gYs.slice(rStart, rEnd+1);
|
||
|
||
const colors = [
|
||
"#0000F6","#01A0F6","#00ECEC","#01FF00","#00C800",
|
||
"#019000","#FFFF00","#E7C000","#FF9000","#FF0000",
|
||
"#D60000","#C00000","#FF00F0","#780084","#AD90F0"
|
||
];
|
||
const zBins = [];
|
||
const custom = [];
|
||
for(let r=rStart; r<=rEnd; r++){
|
||
const rowBins = [];
|
||
const rowCustom = [];
|
||
for(let c=cStart; c<=cEnd; c++){
|
||
const val = gTileValues[r][c];
|
||
if(val==null){ rowBins.push(null); rowCustom.push([r,c,null]); continue; }
|
||
let dbz = Number(val); if (dbz < 0) dbz = 0; if (dbz > 75) dbz = 75;
|
||
let bin = Math.floor(dbz / 5); if (bin >= 15) bin = 14;
|
||
rowBins.push(bin); rowCustom.push([r,c,dbz]);
|
||
}
|
||
zBins.push(rowBins); custom.push(rowCustom);
|
||
}
|
||
const scale = [];
|
||
for (let i = 0; i < colors.length; i++) {
|
||
const tpos = colors.length === 1 ? 0 : i / (colors.length - 1);
|
||
scale.push([tpos, colors[i]]);
|
||
}
|
||
const data = [{
|
||
type: 'heatmap',
|
||
x: xs,
|
||
y: ys,
|
||
z: zBins,
|
||
customdata: custom,
|
||
colorscale: scale,
|
||
zmin: 0,
|
||
zmax: 14,
|
||
colorbar: {
|
||
orientation: 'h', x: 0.5, y: -0.12, xanchor: 'center', yanchor: 'top',
|
||
len: 0.8, thickness: 16, title: { text: 'dBZ', side: 'bottom' },
|
||
tickmode: 'array', tickvals: Array.from({length: 15}, (_,i)=>i),
|
||
ticktext: Array.from({length: 15}, (_,i)=>String(i*5))
|
||
},
|
||
hovertemplate: 'lon=%{x:.3f}, lat=%{y:.3f}<br>dBZ=%{customdata[2]:.1f}<extra></extra>'
|
||
}];
|
||
|
||
if (gWindFromDeg !== null && gWindSpeedMS > 0) {
|
||
const half = 30;
|
||
const samples = 64;
|
||
const start = gWindFromDeg - half;
|
||
const end = gWindFromDeg + half;
|
||
const xsFan = [];
|
||
const ysFan = [];
|
||
xsFan.push(stLon); ysFan.push(stLat);
|
||
for (let i = 0; i <= samples; i++) {
|
||
const θ = start + (end - start) * (i / samples);
|
||
const p = destPoint(stLat, stLon, ((θ % 360) + 360) % 360, rangeM);
|
||
xsFan.push(p.lon); ysFan.push(p.lat);
|
||
}
|
||
xsFan.push(stLon); ysFan.push(stLat);
|
||
data.push({
|
||
type: 'scatter', mode: 'lines', x: xsFan, y: ysFan,
|
||
line: { color: '#FFFFFF', width: 2, dash: 'dash' },
|
||
fill: 'toself', fillcolor: 'rgba(255,255,255,0.18)',
|
||
hoverinfo: 'skip', showlegend: false
|
||
});
|
||
}
|
||
const layout = {
|
||
autosize: true,
|
||
margin: {l:40, r:8, t:8, b:90},
|
||
xaxis: {title: '经度', tickformat: '.2f', zeroline: false, constrain: 'domain', automargin: true},
|
||
yaxis: {title: {text: '纬度', standoff: 12}, tickformat: '.2f', zeroline: false, scaleanchor: 'x', scaleratio: 1, constrain: 'domain', automargin: true},
|
||
shapes: [
|
||
{type:'rect', xref:'x', yref:'y', x0: lonMin, x1: lonMax, y0: latMin, y1: latMax, line: {color:'#111', width:1, dash:'dot'}, fillcolor:'rgba(0,0,0,0)'}
|
||
]
|
||
};
|
||
const el = document.getElementById('squarePlot');
|
||
Plotly.newPlot(el, data, layout, {responsive: true, displayModeBar: false}).then(()=>{
|
||
const size = el.clientWidth;
|
||
Plotly.relayout(el, {height: size});
|
||
});
|
||
window.addEventListener('resize', () => {
|
||
const size = el.clientWidth;
|
||
Plotly.relayout(el, {height: size});
|
||
Plotly.Plots.resize(el);
|
||
});
|
||
}catch(e){
|
||
const el = document.getElementById('squarePlot');
|
||
el.innerHTML = `<div class="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded">正方形热力图渲染失败：${e.message}</div>`;
|
||
}
|
||
}
|
||
|
||
(function initRange(){
|
||
const end = new Date();
|
||
const start = new Date(end.getTime() - 3*3600*1000);
|
||
document.getElementById('tsStart').value = fmtDTLocal(start);
|
||
document.getElementById('tsEnd').value = fmtDTLocal(end);
|
||
})();
|
||
const startStr = fromDTLocalInput(document.getElementById('tsStart').value);
|
||
const endStr = fromDTLocalInput(document.getElementById('tsEnd').value);
|
||
loadLatestTile().then(()=>populateTimes(startStr, endStr)).catch(err => {
|
||
const plot = document.getElementById('radarPlot');
|
||
plot.innerHTML = `<div class="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded">加载失败：${err.message}（请确认 /static/js/plotly-2.27.0.min.js 已存在）</div>`;
|
||
});
|
||
document.getElementById('timeSelect').addEventListener('change', async (e) => {
|
||
const v = e.target.value;
|
||
if (!v) {
|
||
if (gTimes.length > 0) { gCurrentIdx = 0; await loadTileAt(gTimes[0]); }
|
||
else { gCurrentIdx = -1; await loadLatestTile(); }
|
||
} else {
|
||
gCurrentIdx = gTimes.indexOf(v);
|
||
await loadTileAt(v);
|
||
}
|
||
updateCountAndButtons();
|
||
updateSlider();
|
||
});
|
||
document.getElementById('tsQuery').addEventListener('click', async ()=>{
|
||
const s = fromDTLocalInput(document.getElementById('tsStart').value);
|
||
const e = fromDTLocalInput(document.getElementById('tsEnd').value);
|
||
await populateTimes(s, e);
|
||
});
|
||
|
||
function updateCountAndButtons(){
|
||
const N = gTimes.length;
|
||
const k = gCurrentIdx >= 0 ? (gCurrentIdx + 1) : 0;
|
||
document.getElementById('countInfo').textContent=`共${N}条数据，-${k-1}时次`;
|
||
const prev = document.getElementById('btnPrev');
|
||
const next = document.getElementById('btnNext');
|
||
prev.disabled = !(N > 0 && gCurrentIdx >= 0 && gCurrentIdx < N-1);
|
||
next.disabled = !(N > 0 && gCurrentIdx > 0);
|
||
}
|
||
document.getElementById('btnPrev').addEventListener('click', async ()=>{
|
||
if (gTimes.length === 0) return;
|
||
if (gCurrentIdx < 0) gCurrentIdx = 0;
|
||
if (gCurrentIdx < gTimes.length - 1) {
|
||
gCurrentIdx++;
|
||
const dt = gTimes[gCurrentIdx];
|
||
document.getElementById('timeSelect').value = dt;
|
||
await loadTileAt(dt);
|
||
}
|
||
updateCountAndButtons();
|
||
updateSlider();
|
||
});
|
||
document.getElementById('btnNext').addEventListener('click', async ()=>{
|
||
if (gTimes.length === 0) return;
|
||
if (gCurrentIdx > 0) {
|
||
gCurrentIdx--;
|
||
const dt = gTimes[gCurrentIdx];
|
||
document.getElementById('timeSelect').value = dt;
|
||
await loadTileAt(dt);
|
||
}
|
||
updateCountAndButtons();
|
||
updateSlider();
|
||
});
|
||
|
||
function updateSlider(){
|
||
const slider = document.getElementById('timeSlider');
|
||
const N = gTimes.length;
|
||
slider.max = N > 0 ? String(N-1) : '0';
|
||
if (N > 0 && gCurrentIdx >= 0) {
|
||
const sliderVal = (N - 1) - gCurrentIdx;
|
||
slider.value = String(sliderVal);
|
||
}
|
||
slider.disabled = N === 0;
|
||
}
|
||
document.getElementById('timeSlider').addEventListener('input', async (e)=>{
|
||
const N = gTimes.length; if (N === 0) return;
|
||
const raw = parseInt(e.target.value, 10);
|
||
const sliderVal = Math.max(0, Math.min(N-1, isNaN(raw)?0:raw));
|
||
const idx = (N - 1) - sliderVal;
|
||
if (idx === gCurrentIdx) return;
|
||
gCurrentIdx = idx;
|
||
const dt = gTimes[gCurrentIdx];
|
||
document.getElementById('timeSelect').value = dt;
|
||
await loadTileAt(dt);
|
||
updateCountAndButtons();
|
||
});
|
||
loadRealtimeLatest().catch(err => {
|
||
const info = document.getElementById('rtInfo');
|
||
info.innerHTML = `<div class="text-sm text-red-600">${err.message}</div>`;
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|