feat: Initial CBPOA commit — 武汉儿童呼吸疾病风险评估系统
Context: Build a spatial risk assessment system correlating air quality data with children's respiratory disease incidence across Wuhan. Approach: FastAPI backend serving PostGIS spatial queries, React frontend with Deck.gl maps, and a PyTorch SpatialTemporalGCN pipeline for multi-day (1d/3d/7d) risk prediction. Changes: - backend/ — FastAPI API with auth (JWT), alerts, risk analysis, geocoded case data, grid statistics, and report endpoints - frontend/ — React dashboard with interactive risk maps, alert monitoring, district comparison charts, and timeline player - models/ — SpatialTemporalGCN model with trained weights and ONNX export for inference - scripts/ — ETL pipeline for weather + medical data, grid generation, feature engineering, training, and daily inference - deploy/ — Docker Compose configs for backend, frontend, and MLflow - docs/ — API docs, deployment guide, user guide, and code review Impact: Enables spatial risk visualization, alert monitoring, and ML-driven health risk forecasting for environmental health teams.
This commit is contained in:
358
frontend/src/components/LodGridLayer.tsx
Normal file
358
frontend/src/components/LodGridLayer.tsx
Normal file
@@ -0,0 +1,358 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import L from 'leaflet';
|
||||
import { useLodGrid, type MapBounds } from '@/hooks/useLodGrid';
|
||||
|
||||
const RISK_COLORS: [number, number, string][] = [
|
||||
[0.0, 0.2, '#22c55e'],
|
||||
[0.2, 0.4, '#3b82f6'],
|
||||
[0.4, 0.6, '#eab308'],
|
||||
[0.6, 0.8, '#f97316'],
|
||||
[0.8, 1.0, '#ef4444'],
|
||||
];
|
||||
|
||||
// Pre-computed color buckets for fillStyle caching
|
||||
const COLOR_BUCKETS: Record<string, { full: string; dim: string }> = {};
|
||||
for (const [, , color] of RISK_COLORS) {
|
||||
COLOR_BUCKETS[color] = { full: color, dim: color + '14' };
|
||||
}
|
||||
|
||||
function getRiskColor(value: number): string {
|
||||
for (const [min, max, color] of RISK_COLORS) {
|
||||
if (value >= min && value <= max) return color;
|
||||
}
|
||||
return '#22c55e';
|
||||
}
|
||||
|
||||
// 100m grid step in degrees
|
||||
const LAT_STEP = 0.0009;
|
||||
const LON_STEP = 0.001046;
|
||||
|
||||
// Mercator helpers (avoid per-cell latLngToContainerPoint)
|
||||
function latToMercY(lat: number): number {
|
||||
return 128 - (256 * Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI) / 360))) / (2 * Math.PI);
|
||||
}
|
||||
|
||||
function lonToMercX(lon: number): number {
|
||||
return ((lon + 180) / 360) * 256;
|
||||
}
|
||||
|
||||
interface LodGridLayerProps {
|
||||
map: L.Map | null;
|
||||
forecastDay: 1 | 3 | 7;
|
||||
visible?: boolean;
|
||||
riskRange?: [number, number];
|
||||
onCellClick?: (lat: number, lon: number, risk: number) => void;
|
||||
}
|
||||
|
||||
export function LodGridLayer({
|
||||
map,
|
||||
forecastDay,
|
||||
visible = true,
|
||||
riskRange,
|
||||
onCellClick,
|
||||
}: LodGridLayerProps) {
|
||||
const [zoom, setZoom] = useState(map?.getZoom() ?? 10);
|
||||
const [mapBounds, setMapBounds] = useState<MapBounds | undefined>();
|
||||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
const paneRef = useRef<HTMLElement | null>(null);
|
||||
const animFrameRef = useRef<number>(0);
|
||||
const clickCallbackRef = useRef(onCellClick);
|
||||
const gridsRef = useRef<number[][]>([]);
|
||||
const forecastDayRef = useRef(forecastDay);
|
||||
const riskRangeRef = useRef(riskRange);
|
||||
const visibleRef = useRef(visible);
|
||||
const drawnOriginRef = useRef<{ x: number; y: number } | null>(null);
|
||||
|
||||
// Keep refs in sync
|
||||
useEffect(() => { clickCallbackRef.current = onCellClick; }, [onCellClick]);
|
||||
useEffect(() => { forecastDayRef.current = forecastDay; }, [forecastDay]);
|
||||
useEffect(() => { riskRangeRef.current = riskRange; }, [riskRange]);
|
||||
useEffect(() => { visibleRef.current = visible; }, [visible]);
|
||||
|
||||
// Track map bounds and zoom
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
const update = () => {
|
||||
const b = map.getBounds();
|
||||
setMapBounds({
|
||||
min_lat: b.getSouth(),
|
||||
max_lat: b.getNorth(),
|
||||
min_lon: b.getWest(),
|
||||
max_lon: b.getEast(),
|
||||
});
|
||||
setZoom(map.getZoom());
|
||||
};
|
||||
update();
|
||||
map.on('moveend', update);
|
||||
map.on('zoomend', update);
|
||||
return () => {
|
||||
map.off('moveend', update);
|
||||
map.off('zoomend', update);
|
||||
};
|
||||
}, [map]);
|
||||
|
||||
const { grids } = useLodGrid(zoom, forecastDay, mapBounds);
|
||||
|
||||
// Update gridsRef only when we have actual data (preserve stale data during loading)
|
||||
useEffect(() => {
|
||||
if (grids.length > 0) {
|
||||
gridsRef.current = grids;
|
||||
}
|
||||
}, [grids]);
|
||||
|
||||
// Create canvas overlay pane and attach to map
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
|
||||
const pane = map.createPane('lod-grid-pane');
|
||||
pane.style.zIndex = '450';
|
||||
pane.style.pointerEvents = 'none';
|
||||
paneRef.current = pane;
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.style.position = 'absolute';
|
||||
canvas.style.top = '0';
|
||||
canvas.style.left = '0';
|
||||
canvas.style.width = '100%';
|
||||
canvas.style.height = '100%';
|
||||
canvas.style.pointerEvents = 'none';
|
||||
pane.appendChild(canvas);
|
||||
canvasRef.current = canvas;
|
||||
|
||||
// Handle map clicks for grid cell selection
|
||||
const handleMapClick = (e: L.LeafletMouseEvent) => {
|
||||
if (!clickCallbackRef.current) return;
|
||||
const currentGrids = gridsRef.current;
|
||||
if (!currentGrids || currentGrids.length === 0) return;
|
||||
|
||||
const { lat, lng } = e.latlng;
|
||||
const riskIdx = forecastDayRef.current === 1 ? 2 : forecastDayRef.current === 3 ? 3 : 4;
|
||||
let nearestDist = Infinity;
|
||||
let nearestRisk = 0;
|
||||
let nearestLat = 0;
|
||||
let nearestLon = 0;
|
||||
|
||||
for (const g of currentGrids) {
|
||||
const d = Math.sqrt((g[0] - lat) ** 2 + (g[1] - lng) ** 2);
|
||||
if (d < nearestDist) {
|
||||
nearestDist = d;
|
||||
nearestRisk = g[riskIdx] ?? 0;
|
||||
nearestLat = g[0];
|
||||
nearestLon = g[1];
|
||||
}
|
||||
}
|
||||
|
||||
if (nearestDist < 0.01) {
|
||||
clickCallbackRef.current(nearestLat, nearestLon, nearestRisk);
|
||||
}
|
||||
};
|
||||
|
||||
map.on('click', handleMapClick);
|
||||
|
||||
// Full redraw function
|
||||
const redraw = () => {
|
||||
if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
|
||||
animFrameRef.current = requestAnimationFrame(() => {
|
||||
const container = map.getContainer();
|
||||
const w = container.clientWidth;
|
||||
const h = container.clientHeight;
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
|
||||
canvas.width = w * dpr;
|
||||
canvas.height = h * dpr;
|
||||
canvas.style.width = w + 'px';
|
||||
canvas.style.height = h + 'px';
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
// Reset drift transform after redraw
|
||||
canvas.style.transform = '';
|
||||
drawnOriginRef.current = null;
|
||||
|
||||
if (!visibleRef.current) return;
|
||||
|
||||
const currentGrids = gridsRef.current;
|
||||
if (!currentGrids || currentGrids.length === 0) return;
|
||||
|
||||
const z = map.getZoom();
|
||||
const riskIdx = forecastDayRef.current === 1 ? 2 : forecastDayRef.current === 3 ? 3 : 4;
|
||||
const range = riskRangeRef.current;
|
||||
const mapBounds = map.getBounds();
|
||||
const south = mapBounds.getSouth();
|
||||
const north = mapBounds.getNorth();
|
||||
const west = mapBounds.getWest();
|
||||
const east = mapBounds.getEast();
|
||||
|
||||
// Use Mercator math for pixel conversion (avoids per-cell latLngToContainerPoint)
|
||||
const scale = 2 ** z;
|
||||
const origin = map.getPixelOrigin();
|
||||
drawnOriginRef.current = { x: origin.x, y: origin.y };
|
||||
|
||||
// Pre-compute Mercator Y steps for cell size at this zoom
|
||||
const halfLat = LAT_STEP / 2;
|
||||
const halfLon = LON_STEP / 2;
|
||||
|
||||
// Group cells by color to minimize fillStyle changes
|
||||
const colorGroups: Record<string, { x: number; y: number; w: number; h: number }[]> = {};
|
||||
|
||||
// Viewport culling margin in degrees
|
||||
const margin = 0.02;
|
||||
const isHighZoom = z >= 12;
|
||||
const isMedZoom = z >= 10;
|
||||
|
||||
for (const g of currentGrids) {
|
||||
const lat = g[0];
|
||||
const lon = g[1];
|
||||
const risk = g[riskIdx] ?? 0;
|
||||
|
||||
// Pre-filter: skip zero-risk cells (majority of cells at most zooms)
|
||||
if (risk === 0) continue;
|
||||
|
||||
// Viewport culling
|
||||
if (lat < south - margin || lat > north + margin ||
|
||||
lon < west - margin || lon > east + margin) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Risk range filter
|
||||
let alpha = 0.85;
|
||||
if (range) {
|
||||
if (risk < range[0]) {
|
||||
alpha = 0.08;
|
||||
} else if (risk > range[1]) {
|
||||
alpha = 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
const color = getRiskColor(risk);
|
||||
|
||||
if (isHighZoom) {
|
||||
// Compute cell rectangle using Mercator math
|
||||
const lx = lonToMercX(lon - halfLon) * scale - origin.x;
|
||||
const rx = lonToMercX(lon + halfLon) * scale - origin.x;
|
||||
const ty = latToMercY(lat + halfLat) * scale - origin.y;
|
||||
const by = latToMercY(lat - halfLat) * scale - origin.y;
|
||||
const cellW = rx - lx;
|
||||
const cellH = by - ty;
|
||||
|
||||
if (cellW < 0.5 || cellH < 0.5) continue;
|
||||
|
||||
// Group by color+alpha for batch rendering
|
||||
const key = alpha < 1 ? `${color}_${alpha}` : color;
|
||||
if (!colorGroups[key]) colorGroups[key] = [];
|
||||
colorGroups[key].push({ x: lx, y: ty, w: cellW, h: cellH });
|
||||
} else {
|
||||
// Medium/low zoom: compute center pixel
|
||||
const cx = lonToMercX(lon) * scale - origin.x;
|
||||
const cy = latToMercY(lat) * scale - origin.y;
|
||||
|
||||
const key = alpha < 1 ? `${color}_${alpha}` : color;
|
||||
if (!colorGroups[key]) colorGroups[key] = [];
|
||||
colorGroups[key].push({ x: cx, y: cy, w: 0, h: 0 });
|
||||
}
|
||||
}
|
||||
|
||||
// Render grouped cells
|
||||
for (const [key, cells] of Object.entries(colorGroups)) {
|
||||
const parts = key.split('_');
|
||||
const color = parts[0];
|
||||
const alpha = parts.length > 1 ? parseFloat(parts[1]) : 1;
|
||||
|
||||
ctx.globalAlpha = alpha;
|
||||
ctx.fillStyle = color;
|
||||
|
||||
if (isHighZoom) {
|
||||
for (const c of cells) {
|
||||
ctx.fillRect(c.x, c.y, c.w, c.h);
|
||||
}
|
||||
// Stroke only at high enough cell sizes
|
||||
ctx.globalAlpha = 0.4;
|
||||
ctx.strokeStyle = '#ffffff';
|
||||
ctx.lineWidth = 0.5;
|
||||
for (const c of cells) {
|
||||
if (c.w > 2 && c.h > 2) {
|
||||
ctx.strokeRect(c.x, c.y, c.w, c.h);
|
||||
}
|
||||
}
|
||||
} else if (isMedZoom) {
|
||||
const size = Math.max(2, Math.min(6, z - 7));
|
||||
const halfSize = size / 2;
|
||||
for (const c of cells) {
|
||||
ctx.fillRect(c.x - halfSize, c.y - halfSize, size, size);
|
||||
}
|
||||
} else {
|
||||
const radius = Math.max(1, Math.min(3, z - 5));
|
||||
for (const c of cells) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(c.x, c.y, radius, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ctx.globalAlpha = 1;
|
||||
});
|
||||
};
|
||||
|
||||
// During pan: apply CSS transform to track tile movement (fixes drift)
|
||||
const onMove = () => {
|
||||
const drawn = drawnOriginRef.current;
|
||||
if (!drawn) {
|
||||
// No previous draw yet, just request a redraw
|
||||
redraw();
|
||||
return;
|
||||
}
|
||||
const current = map.getPixelOrigin();
|
||||
const dx = drawn.x - current.x;
|
||||
const dy = drawn.y - current.y;
|
||||
canvas.style.transform = `translate(${dx}px, ${dy}px)`;
|
||||
};
|
||||
|
||||
// On moveend/zoomend: reset transform and do full redraw
|
||||
const onMoveEnd = () => {
|
||||
canvas.style.transform = '';
|
||||
drawnOriginRef.current = null;
|
||||
redraw();
|
||||
};
|
||||
|
||||
const onResize = () => redraw();
|
||||
|
||||
map.on('move', onMove);
|
||||
map.on('moveend', onMoveEnd);
|
||||
map.on('zoomend', onMoveEnd);
|
||||
map.on('resize', onResize);
|
||||
|
||||
// Store redraw reference for external triggers
|
||||
(canvas as any).__lodRedraw = redraw;
|
||||
|
||||
// Initial draw
|
||||
redraw();
|
||||
|
||||
return () => {
|
||||
map.off('move', onMove);
|
||||
map.off('moveend', onMoveEnd);
|
||||
map.off('zoomend', onMoveEnd);
|
||||
map.off('resize', onResize);
|
||||
map.off('click', handleMapClick);
|
||||
if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
|
||||
pane.removeChild(canvas);
|
||||
if (pane.parentNode) pane.parentNode.removeChild(pane);
|
||||
canvasRef.current = null;
|
||||
paneRef.current = null;
|
||||
};
|
||||
}, [map]);
|
||||
|
||||
// Trigger redraw when data changes
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (canvas && (canvas as any).__lodRedraw) {
|
||||
(canvas as any).__lodRedraw();
|
||||
}
|
||||
}, [grids, forecastDay, riskRange, visible]);
|
||||
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user