canvas绘制地图需将wgs84经纬度经web墨卡托投影转为像素坐标，核心是建立视图范围与画布尺寸的动态映射，并注意y轴翻转、降点优化及交互判断。
Canvas 本身不理解地理坐标，绘制地图轮廓需要将经纬度（WGS84）转换为像素坐标，核心在于选择合适的投影方式和坐标系转换逻辑。
明确地图投影与参考系
真实世界是球面，地图是平面，必须通过投影（如墨卡托、等距圆柱）展开。Web 地图常用 Web 墨卡托（EPSG:3857），其特点是：
- x 范围约 [-20037508.34, 20037508.34]，对应赤道周长
- y 范围在 [-20037508.34, 20037508.34] 内，但两极被截断（y 实际有效上限约 ±20037508）
- 经纬度转 Web 墨卡托公式：
x = lon × 20037508.34 / 180
y = log(tan((90 + lat) × π / 360)) × 20037508.34 / π
准备地理轮廓数据
获取 GeoJSON 或 TopoJSON 格式的行政区划边界（例如中国各省、某市辖区）。关键点：
- 确认数据坐标系：必须是 WGS84（EPSG:4326），即标准经纬度（经度在前，纬度在后）
- 简化几何：高精度矢量可能含数万个点，用 Douglas-Peucker 算法降点（如使用
geojson-simplify），避免 Canvas 绘制卡顿 - 剔除无效环、自相交多边形，可用
geojsonhint或@turf/boolean-valid验证
实现经纬度→Canvas像素的动态映射
不能直接套用固定缩放系数，需建立「视图范围 → 画布尺寸」的映射关系。推荐做法：
- 定义当前可视区域：bounds = { west, south, east, north }（单位：度）
- 计算 Web 墨卡托下的左下、右上坐标（
project({lon, lat})） - 根据 Canvas 宽高，算出 x/y 方向每单位墨卡托坐标的像素值（scaleX, scaleY）
- 对每个经纬度点执行：
px = (projectedX - boundsProjectedWest) × scaleX
py = height - (projectedY - boundsProjectedSouth) × scaleY
（注意 Canvas y 轴向下，需翻转）
在 Canvas 上绘制并交互优化
绘制本身用 beginPath + moveTo + lineTo 即可，但实用中要注意：
- 用
ctx.lineWidth = 1和ctx.lineCap = 'round'让边界更自然 - 填充颜色建议用半透明（
ctx.fillStyle = 'rgba(60,120,255,0.3)'），避免遮挡底图或文字 - 若需点击识别区域，不推荐逐像素 hitTest；建议用
@turf/boolean-point-in-polygon对鼠标反向转换后的经纬度做判断 - 缩放/平移时，只更新
bounds和重绘路径，不要重新解析 GeoJSON
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
