Canvas 实现地图拖拽与旋转需手动维护 DOMMatrix 变换矩阵，通过 translate/rotate/scale 更新状态，重绘时 setTransform 应用，并用逆矩阵将点击坐标反向映射回地图逻辑坐标。
Canvas 的 transform 矩阵本身不直接支持“拖拽”或“旋转”这类交互操作，它只负责将绘图坐标系按矩阵规则重新映射。真正实现地图的自由拖拽与旋转，关键在于：**手动维护一个变换矩阵（如用 DOMMatrix 或数组），根据鼠标/触摸事件持续更新平移、缩放、旋转参数，再将该矩阵一次性应用到 Canvas 上，并在绘制时用逆矩阵将点击坐标反向映射回地图逻辑坐标。**
一、用 DOMMatrix 管理复合变换状态
避免反复调用 ctx.translate()、ctx.rotate() 导致累积误差或难以重置。推荐用 DOMMatrix 封装当前地图视图状态：
- 初始化一个单位矩阵：
let viewMatrix = new DOMMatrix(); - 拖拽时更新平移：
viewMatrix = viewMatrix.translateSelf(deltaX, deltaY); - 缩放时更新缩放（以某点为锚点）：
viewMatrix = viewMatrix.translateSelf(-anchorX, -anchorY).scaleSelf(scale, scale).translateSelf(anchorX, anchorY); - 旋转时更新旋转（同样绕锚点）：
viewMatrix = viewMatrix.translateSelf(-anchorX, -anchorY).rotateSelf(0, 0, angleDeg).translateSelf(anchorX, anchorY); - 每次重绘前，用
ctx.setTransform(...viewMatrix.toFloat32Array())应用整个变换
二、拖拽实现：捕获鼠标按下→移动→释放全流程
核心是记录起始位置与当前偏移，而非直接操作 Canvas 坐标：
- 鼠标按下时，保存初始鼠标位置
startPos = {x, y}和当前viewMatrix的平移分量（可用viewMatrix.e和viewMatrix.f获取） - 移动中计算差值：
deltaX = currentX - startPos.x，deltaY = currentY - startPos.y - 用该差值更新矩阵：
viewMatrix = originalMatrix.translateSelf(deltaX, deltaY)（注意不是累加 translate，而是基于原始矩阵重建） - 松开后不再更新，下次拖拽重新记录起点
三、旋转交互：限制角度、锚点与视觉反馈
纯旋转易导致地图“飞走”，需配合锚点与合理约束：
立即学习“前端免费学习笔记（深入）”；
- 旋转锚点建议设为鼠标按下位置（或画布中心），避免空转
- 每次旋转增量不宜过大（如 ≤ 0.5°），并做角度归一化：
angle = ((angle % 360) + 360) % 360 - 若需“按住 Shift 键旋转”，监听
event.shiftKey判断是否启用旋转模式 - 旋转后，用户继续拖拽应基于新朝向的坐标系——这正是使用统一矩阵的优势：所有操作都在同一套变换下生效
四、坐标反向映射：点击识别地图要素的关键
用户点击画布某点，要判断是否点中了某个地理要素（如城市图标），必须把屏幕坐标转换回地图坐标：
- 获取点击位置
{clientX, clientY}，减去 Canvas 左上角偏移得到 canvas 坐标{x, y} - 计算当前变换的逆矩阵：
const inv = viewMatrix.inverse(); - 用逆矩阵变换点击点：
const pt = inv.transformPoint({x, y}); -
pt.x和pt.y即为该点对应的地图逻辑坐标（例如经纬度投影后的像素值），可用于碰撞检测或查询
不复杂但容易忽略：每次重绘前务必调用 ctx.resetTransform() 清除旧状态，再用 setTransform 应用最新矩阵；否则历史变换会叠加。DOMMatrix 是现代浏览器标准方案，兼容性可查 caniuse.com —— 若需支持 IE 或老版本 Safari，可用轻量矩阵库（如 gl-matrix 的 mat3）自行实现 3×3 仿射变换运算。
