canvas绘制交互地图需将经纬度投影为像素坐标并手动实现命中检测。核心步骤：①用线性映射或墨卡托投影转换坐标；②为每个区域保存投影顶点、id及业务数据；③用射线法检测鼠标是否在多边形内；④通过状态管理触发重绘实现高亮与选中效果。
Canvas 绘制带交互属性的地图图形，核心在于将地理坐标（如经纬度）映射到画布像素坐标，并为每个图形区域绑定事件响应逻辑。Canvas 本身不支持 DOM 元素的原生事件（如 click、hover），所以必须手动实现命中检测与事件分发。
地理坐标到 Canvas 坐标的投影转换
真实地图数据通常是 WGS84 经纬度（如北京：39.9°N, 116.4°E），而 Canvas 只认像素（x, y）。需选择合适的投影方式（常用墨卡托或简单线性缩放）进行转换。若地图范围不大（如单个城市），可简化为线性映射：
- 先确定地理边界（minLng, maxLng, minLat, maxLat）和画布尺寸（canvas.width, canvas.height）
- 横向：x = (lng - minLng) / (maxLng - minLng) * canvas.width
- 纵向：y = canvas.height - (lat - minLat) / (maxLat - minLat) * canvas.height（注意 Y 轴翻转）
- 建议封装为 project(lat, lng) 函数，后续所有绘制和点击检测都复用该逻辑
图形绘制与区域数据绑定
不要只画形状，要为每个可交互区域（如省份、地块）保存结构化数据。推荐用数组或 Map 存储“区域对象”，每个对象至少包含：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
points：经投影后的顶点数组，如
[{x:120, y:80}, {x:135, y:75}, ...] - id / name：唯一标识，用于后续识别
- data：业务数据（人口、GDP 等），直接关联渲染与交互
- 绘制时用
ctx.beginPath()+ctx.moveTo()+ctx.lineTo()+ctx.fill()
点击/悬停检测：点是否在多边形内
Canvas 没有内置 hit-testing，需自行判断鼠标位置是否落在某个多边形内部。推荐使用**射线法（Ray-casting）**，轻量且准确：
- 监听
canvas.addEventListener('click', e)，用getBoundingClientRect()计算相对于画布的鼠标坐标 - 遍历所有区域，对每个区域调用 isPointInPolygon(x, y, points)
- 函数逻辑：从点向右发射水平射线，统计与多边形边的交点数，奇数则在内
- 悬停检测同理，用
mousemove事件 + 防抖避免频繁计算
状态管理与视觉反馈
交互效果依赖重绘。不要直接操作 DOM 样式，而是通过修改数据状态触发 Canvas 重绘：
- 维护一个 hoveredId 和 selectedId 变量
- 每次 render 时，对 hovered 区域用高亮色
ctx.fillStyle = '#ffcc00'，selected 区域加描边ctx.stroke() - 避免在事件中直接 fill/stroke，统一收口到 render 函数，保证一致性
- 如需 tooltip，可在 canvas 外层叠加一个绝对定位的 div，根据 lastHovered 数据动态更新内容
不复杂但容易忽略：投影一致性、区域数据持久化、重绘性能控制（避免每帧遍历全部区域做 hit-test）。做好这三点，Canvas 地图交互就能既灵活又稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
