浙江空气质量大屏里的 Three.js 3D 地图

组件职责

3D 地图是空气质量系统的空间入口。用户先看浙江各地市的 AQI 分布，再进入城市详情和图表分析。它负责空间理解和交互导航，不替代统计图表对趋势和模型结果的解释。

地图生成

地图数据来自浙江 GeoJSON。前端先用 D3 的 geoMercator 将经纬度投影为平面坐标，再把每个地市边界转换为 Three.js Shape，用 ExtrudeGeometry 拉伸成立体区块。

核心过程是：读取 GeoJSON、投影坐标、生成形状、拉伸几何体，再放入统一的 mapGroup。通过旋转 mapGroup，让局部坐标和屏幕中的 3D 视角对齐。

交互与数据映射

Raycaster 检测 hover 和点击：命中城市后显示数据卡片，点击后进入城市详情。AQI 更新时，同时更新城市颜色、标签、悬浮信息和顶部统计值。

标签使用 CanvasTexture 绘制，再作为 Three.js sprite 放入场景。降水粒子使用 BufferGeometry 批量创建，并根据城市降水量分配粒子数量，避免大量独立对象带来的开销。

使用边界

3D 地图适合展示空间分布和提供入口。污染物详情、趋势比较和模型解释仍交给 ECharts 和城市详情页面。实现时先保证 GeoJSON、API 数据和空间对象的对应关系，再增加视觉效果。

相关内容：数据、模型与看板链路、空气质量项目页。