异步加载
async setup() 允许使用 await，确保地图图片和 CSV 数据加载完成后再进入绘制流程。
学习目标
01
使用 async setup() 与 await 加载资源
02
通过 loadStrings() 和 split() 解析 CSV
03
理解经纬度到平面坐标的投影
04
把震级映射为圆的尺寸与颜色
核心概念
原理解析
Web Mercator 投影
x = (256/π) × 2^zoom × (lon + π)
y = (256/π) × 2^zoom × (π − ln(tan(π/4 + lat/2)))
y = (256/π) × 2^zoom × (π − ln(tan(π/4 + lat/2)))
数据映射
scaled = √(10^magnitude)
diameter = map(scaled, 0, max, 0, 30)
diameter = map(scaled, 0, max, 0, 30)
先压缩震级跨度，再映射到可见的尺寸和颜色范围。
扩展挑战
- 用震源深度映射颜色
- 加入悬停信息
- 改变 zoomLevel 比较投影尺度
案例演示
实时运行 · 观察地震记录逐帧投射到世界地图
sketch.js打开源码
正在载入源码…核心要点
资源依赖需要等待
异步流程保证数据和底图按正确顺序就绪。
投影连接地理与像素
经纬度必须经过数学转换才能落到画布上。
映射决定叙事
同一份数据通过不同视觉变量会表达不同重点。