简介：一套基于H5 Canvas与ECharts的交互式地图绘制资源，面向具备一定前端基础的开发者，解决在网页中自由定义地理轮廓、加载GeoJSON数据并实现缩放展开等可视化需求。资源以rar压缩包形式提供，整体约1.1MB，内部包含Canvas绘图核心逻辑、ECharts地图配置示例以及GeoJSON数据对接方法。使用者可以从中了解如何将地理坐标转换为画布坐标，借助beginPath、lineTo等API绘制边界，并结合roam、zoomOnMouseWheel等配置实现地图漫游与层级下钻。同时，利用geojson.io可自行编辑地理数据，使省级、市级地图的切换与样式定制变得直观可控。资源还涉及将统计数据与地图区域绑定，通过颜色或大小呈现差异化分布，适合用于地理数据展示、业务监控及可视化大屏搭建。目前已有1630人学习，适合希望借助Canvas与ECharts提升地图应用开发能力的前端开发者参考借鉴。
1. 把 H5 Canvas 当成一张空白图纸：地图原来可以这样画出来
做前端地图，很多人第一反应是引入重量级地图 SDK，但如果你只是要在网页里展示一个自定义区域、画几个可点击的区块，或者做一张不需要底图瓦片的示意图，用 Canvas 手绘反而更轻、更可控。这个资源包的核心思路就是：用 HTML5 Canvas 作为绘图容器，配合 geojson.io 来准备地图边界数据，最后在页面上把经纬度坐标换算成画布像素坐标，实现一张可缩放、可平移、可点击的地图。
它适合谁？适合要做区域选址、地块划分、简易热区展示，又不想被第三方地图平台绑定交互逻辑的前端开发者。你不需要懂 GIS 原理，但需要能读懂 GeoJSON 里的 coordinates 数组，并且愿意为“Y 轴翻转”这件事花两分钟。这套方案跑通之后，你会发现，画地图其实就是画一堆多边形，难点从来不在 Canvas API，而在坐标换算和数据清洗。
2. 理解 GeoJSON 与 Canvas 的坐标系差异：一切绘制从坐标换算开始
2.1 GeoJSON 里存的是经纬度，Canvas 只要像素
在 geojson.io 里拖拽地图边界，导出的文件是 GeoJSON 格式。它的核心结构很简单：一个FeatureCollection里包含多个Feature，每个Feature的geometry字段描述了图形的类型和坐标。比如一个 Polygon 类型的数据，坐标数组长这样：
{ "type": "Feature", "properties": { "name": "示例区域" }, "geometry": { "type": "Polygon", "coordinates": [ [ [101.7, 26.9], [101.75, 26.92], [101.8, 26.88] ] ] } }这里的[101.7, 26.9]是经度和纬度，单位是十进制度数。但浏览器 Canvas 的坐标系是像素，原点在画布左上角，X 轴向右，Y 轴向下。这意味着你拿到了经纬度数据之后，不能直接拿去ctx.lineTo()，必须先把经纬度映射到画布坐标。
我一般把这层换算封装成一个函数，输入是经纬度数组和画布尺寸，输出是像素坐标数组。这一步是整个方案里最枯燥但最不能省的环节，换算写对了，后面缩放、平移都只是在原有换算基础上叠加偏移和比例因子。
2.2 投影选择：别在方案初期纠结墨卡托
常见的做法是把经纬度当作平面坐标来用，也就是“等距圆柱投影”的简化版。对于市、区、园区这类小范围地图，经纬度数值的跨度可能只有几十秒甚至几秒，直接用线性映射的变形误差肉眼根本看不出来。只有当你绘制省级以上大范围地图时，才需要考虑真实的投影转换。
这个资源包默认不做经纬度到墨卡托投影的转换，而是直接计算经纬度的最小值和最大值，然后把所有的点按比例放大到画布上。这种方案的优点是代码量小，边界数据一眼能看懂；缺点是区域跨度大时会显得形状“扁”或者“鼓”，和地图 App 里的样子有差异。如果你只需要示意展示，这个误差可以接受；如果对形状精度有要求，就得在换算函数里加入投影计算，通常是先转墨卡托，再做线性映射。
核心换算逻辑可以用一段伪代码表示：
function lonLatToPixel(lon, lat, bounds, canvasSize) { const x = (lon - bounds.minLon) / (bounds.maxLon - bounds.minLon) * canvasSize.width; const y = (bounds.maxLat - lat) / (bounds.maxLat - bounds.minLat) * canvasSize.height; return { x, y }; }这段代码做了两件事：X 轴用经度差的比例算像素位置，和常规图表一致；Y 轴用纬度最大值减去当前纬度，因为 Canvas 的 Y 轴向下，纬度越大越靠北，在画布上应该越靠上，所以必须翻转。参数bounds是数据集的经纬度范围，canvasSize是画布的实际像素宽高。如果后续要加缩放，就在乘比例之前先对经纬度范围做偏移处理。这段逻辑是后面所有渲染功能的地基。
2.3 可视化边界：先把 Polygon 的闭合性搞清楚
GeoJSON 的 Polygon 有一个容易踩坑的规则：坐标数组的最后一个点和第一个点必须相同，形成闭合环。geojson.io 导出的数据基本都符合这个规则，但如果你手工修改过 JSON，或者从其他来源合并了数据，就可能出现首尾不闭合的情况。Canvas 的ctx.closePath()会自动把最后一个点和第一个点连起来，所以即便数据里缺了闭合点，绘制出来的形状也能看，但后续做“点是否在多边形内”的判断时，闭合性就会影响边界上的命中结果。
在处理任何一份 GeoJSON 之前，我习惯先跑一段规范化代码，把所有 Polygon 的首尾坐标补齐，顺便过滤掉坐标数组长度小于 4 的异常数据。这个步骤不需要写复杂的校验库，几行循环就能完成，但能避免后面很多奇怪的小 bug。
function normalizePolygon(coordinates) { return coordinates.map(ring => { const first = ring[0]; const last = ring[ring.length - 1]; if (first[0] !== last[0] || first[1] !== last[1]) { ring.push([...first]); } return ring; }); }这段代码遍历每个坐标环，检查首尾点是否相等，如果不相等就拷贝第一个点追加到数组末尾。注意[...first]是为了防止之后修改数组时影响原数据。执行完这段处理之后，所有多边形都具备首尾闭合特性，绘制和命中判断都更稳。
3. 用 geojson.io 准备地图数据：手绘边界的正确姿势
3.1 在 geojson.io 里手动描绘区域
项目名称里的 geojson.io 指的是一个在线 GeoJSON 编辑工具，它能在真实地图底图上让你用鼠标画点、画线、画面。画完可以直接导出 JSON 文件，也可以直接拿生成的 GeoJSON 文本复制到项目里使用。对这个资源包来说，geojson.io 相当于数据采集端，Canvas 是渲染端，两者通过 GeoJSON 这个数据格式衔接。
打开 geojson.io 之后，左侧是地图，右侧是 JSON 编辑区。用左侧的“绘制多边形”工具在地图上点选几个锚点，双击结束绘制，右侧的 JSON 文本会自动同步更新。这个过程非常直观，你不需要记任何经纬度数值，只需要在地图上框出想要的轮廓。需要注意的是，锚点越多，生成的坐标点越密，文件体积也会变大。对于 Canvas 绘制来说，几千个点的多边形渲染压力不大，但如果你要加动画交互，就要考虑对坐标点做抽稀处理。
导出的 GeoJSON 可以直接保存成.geojson文件放进你的项目里，也可以复制 JSON 字符串在代码里解析。资源包里附带的数据文件就是通过这种方式准备的，你可以直接替换其中的坐标数据，Shape 的绘制逻辑不用动。
3.2 把多个 Feature 合并成一张完整地图
在实际项目里，一张区域地图通常由多个多边形组成。比如某产业园地图，可能包含一期地块、二期地块、道路轮廓、绿化区域等。在 geojson.io 里，你可以分别绘制这些区块，每个区块是一个独立的 Feature，最终统一导出为一个 FeatureCollection。
在 Canvas 渲染时，需要遍历 FeatureCollection 里的每个 Feature，把每个 Polygon 单独绘制出来。每个区块可以设置独立的填充色、边框色，也可以绑定点击事件。属性的存储位置在properties字段里，比如你在 geojson.io 里给某个区块设置一个name属性，前端读取时就能拿到，用于显示标签或者做数据联动。
const geojson = await fetch('./map/data.geojson').then(res => res.json()); const features = geojson.features || []; features.forEach(feature => { const coords = feature.geometry.coordinates; const name = feature.properties?.name || '未命名区块'; const path = coords[0].map(pt => lonLatToPixel(pt[0], pt[1], bounds, canvasSize)); drawPolygon(path, name); });这段代码是地图渲染的主循环。fetch加载 GeoJSON 文件，bounds需要预先扫描所有 Feature 的坐标算出经纬度范围。drawPolygon负责用可选颜色填充多边形并描边。这里的coords[0]只取了多边形的外环，对于带洞的 Polygon（比如中间有湖泊地块），需要额外遍历后续的坐标环，以相反方向绘制形成镂空效果。首次实现时先不管洞，能画出完整的区域轮廓后再处理复杂情况。作为兜底，如果某个 Feature 的 geometry 类型是 MultiPolygon，需要额外递归一层，否则会少画图形。
3.3 数据清洗：边界点串了怎么办
geojson.io 手动绘制最大的坑是误操作导致坐标点串线。比如你想画一个矩形，鼠标误点了一个额外的点，图形就会多出一个尖角。在数据量小的时候，最简单的方法是回到 geojson.io 删除重新绘制；如果数据已经导出了，可以在 JSON 编辑区找到对应的坐标数组，手眼配合删掉异常点。
更普遍的问题是经纬度顺序混乱。GeoJSON 标准是[经度, 纬度]，但部分工具会导出[纬度, 经度]，如果你的代码按lonLatToPixel(pt[0], pt[1])处理，而数据实际是纬度在前，画出来的图形会错位严重，多边形会横向或者纵向镜像。判断方法很简单：看第一个坐标值的取值范围，如果第一个数值是两位数（大约 -180 到 180 之间），通常是经度；如果第一个数值是几十左右且和纬度范围一致，就可能反了。两轴交换后重新渲染一次即可确认。
4. Canvas 渲染核心：从画多边形到可交互地图状态管理
4.1 坐标系转换与自适应缩放
当一张地图的经纬度跨度很大或很小时，直接按原始比例绘制会导致地图在画布上只占一小块区域。常见的处理方式是先扫描所有坐标，计算经纬度的最小最大值，得到 bounding box，然后根据画布宽高计算缩放比例。代码通常会长这样：
function calcBounds(features) { let minLon = Infinity, maxLon = -Infinity; let minLat = Infinity, maxLat = -Infinity; features.forEach(f => { f.geometry.coordinates.forEach(ring => { ring.forEach(pt => { if (pt[0] < minLon) minLon = pt[0]; if (pt[0] > maxLon) maxLon = pt[0]; if (pt[1] < minLat) minLat = pt[1]; if (pt[1] > maxLat) maxLat = pt[1]; }); }); }); return { minLon, maxLon, minLat, maxLat }; }这段代码遍历所有坐标点，找出经纬度极值。ring可能包含大量点，所以时间复杂度受点数量影响，但一般一个地图文件也就是几百到几千个点，性能没有压力。拿到 bounds 之后，缩放比例一般取canvasWidth / (maxLon - minLon)与canvasHeight / (maxLat - minLat)中的较小值，再乘以一个 margin 系数（比如 0.9），确保地图边缘留白。当用户缩放时，这个基础比例要乘上 zoom 因子，而 zoom 因子建议限制在 0.5 到 5 之间，超出这个范围会导致图形过大失去边界，或者过小看不出形状。
4.2 缩放、平移与点击命中的状态管理
Canvas 交互和 DOM 交互的区别在于：Canvas 绘制完一帧后，画布只是一张静态位图，任何交互都要重绘。所以你需要维护一个状态对象，包含偏移量 offsetX、offsetY 和缩放比例 scale。每次重绘时，坐标换算公式变为：
function toScreen(lon, lat) { const x = (lon - bounds.minLon) * scale * baseScale + offsetX; const y = (bounds.maxLat - lat) * scale * baseScale + offsetY; return { x, y }; }缩放时注意一个细节：以鼠标位置为缩放中心，而不是画布中心。缩放前先记录鼠标位置的经纬度对应的屏幕坐标，调整 scale 之后再计算出新的 offset，使鼠标指针对应的地图点保持不动。这样交互手感才自然。平移则是监听 mousedown、mousemove、mouseup 事件，在 mousemove 中累加 offset 的差值，最后用requestAnimationFrame节流重绘，避免高频事件导致绘制堆积。
点击命中检测的核心算法是射线法（ray casting）：从点击点画一条水平射线，统计与多边形边界的交点数，奇数则点在多边形内部。这个方法在纯 JavaScript 中实现起来也就十几行：
function isPointInPolygon(px, py, polygon) { let inside = false; for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { const xi = polygon[i].x, yi = polygon[i].y; const xj = polygon[j].x, yj = polygon[j].y; if ((yi > py) !== (yj > py) && px < (xj - xi) * (py - yi) / (yj - yi) + xi) { inside = !inside; } } return inside; }这段射线法实现利用了 Canvas 画布坐标系的特性，点击事件的clientX/clientY减去画布偏移即可得到画布坐标。核心判断是检查每条边两端的 Y 坐标是否跨过点击点的 Y 值，再计算交点 X 并和点击点 X 比较。由于 Canvas 坐标系 Y 轴向下，算法不关心方向，只关心交点的奇偶性。
为了提升性能，在 mousemove 时可以先用每个多边形的 bounding box 过滤一遍，把明显不可能命中的区块提前排除，只有 bbox 包含鼠标位置的区块才执行完整射线法。地图区块数量在几十个以内时其实无所谓，但如果区块数量达到上百，bbox 过滤的性能提升就比较明显了。
4.3 渲染性能与重绘策略
Canvas 地图最常见的性能问题是每次交互都全量重绘所有多边形。优化方式分几层：第一层，只在状态变化时重绘，不做无效渲染；第二层，在requestAnimationFrame回调里集中处理状态变化后的重绘，避免同一帧内多次触发 draw 方法；第三层，当多边形数量大且缩放拖拽频繁时，可以把静态底图离屏渲染到缓存 canvas 上，交互时只重绘叠加层。这个资源包的地图区块数量通常不大，第二层优化就够用了。
重绘逻辑一般封装成一个render()方法，内部按顺序执行三步：清空画布、遍历 Features 绘制所有多边形、绘制交互状态（比如悬浮高亮或选中填充）。清空时注意不要用canvas.width = canvas.width这种 hack，虽然它能清空画布但会重置 transform 状态，在缩放场景下容易出问题。建议用ctx.clearRect(0, 0, canvas.width, canvas.height)，然后把 transform 设置在绘制循环开始时统一赋值。
5. Canvas 地图避坑：坐标系、清晰度与边界判断的三个教训
5.1 画出来的地图是镜像翻转的
这是新手最容易遇到的第一个问题：绘制的图形和 geojson.io 里预览的形状上下颠倒。原因就是纬度与 Canvas Y 轴的映射关系处理错误。在 geojson.io 的底图里，纬度值越大越靠上，而 Canvas 的 Y 轴方向是向下增长的。如果你直接y = (lat - minLat) * scale，纬度大的点会被画在下方，图形自然垂直翻转。解决方法是y = (maxLat - lat) * scale，把纬度范围整体翻转。判断方法很简单：绘制一个已知形状（比如一个 L 型区域）后，对比原始地图的轮廓方向，如果上下颠倒，立即调整 Y 轴换算。
5.2 高 DPI 屏幕下图线发虚
Canvas 在 retina 屏幕上默认宽度是 CSS 像素宽度，但物理像素密度更高，导致绘制出的线条边缘模糊。解决办法是把画布的真实尺寸放大为 CSS 尺寸乘以devicePixelRatio，同时用ctx.scale(dpr, dpr)让坐标系统保持不变：
const dpr = window.devicePixelRatio || 1; canvas.width = canvasWidth * dpr; canvas.height = canvasHeight * dpr; canvas.style.width = canvasWidth + 'px'; canvas.style.height = canvasHeight + 'px'; ctx.scale(dpr, dpr);关键点在于ctx.scale要放在绘制任何图形之前，并且后面所有的坐标计算依然使用 CSS 像素值。如果不做ctx.scale，图会放大但坐标对不上；如果做了ctx.scale但画布宽高没乘 dpr，则图形会只占用角落区域，两者缺一不可。
5.3 缩放后点击判断失效
缩放后点击感知异常，通常是因为重绘时用了新的 scale 和 offset，但点击命中检测还在用初始状态的坐标转换公式。排查方法是打印点击瞬间鼠标位置的 canvas 坐标和多边形的当前实际坐标，确认它们是否在同一坐标系下。我的习惯是统一封装一个全局的transformPoint(lon, lat)函数，渲染和命中检测都走同一个函数，确保不会出现两套换算逻辑。另一个常见坑是 canvas 的 CSS 尺寸和属性尺寸不一致，click 事件拿到的offsetX是基于 CSS 尺寸的，而内部绘制用的是实际像素尺寸，如果画布有dpr缩放或自适应布局，点击坐标要除以canvas.getBoundingClientRect().width / canvas.width得到正确的逻辑坐标后再参与命中判断。
5.4 多边形点击区域出现空洞或错选
当多个多边形相互嵌套或紧邻时，射线法可能出现边界误判。GeoJSON 的规范是多边形外环逆时针，内环顺时针，但 by geojson.io 手绘的数据不保证方向正确。如果两个区块共用一条边，点击公共边时可能同时命中两个多边形，此时应根据业务需求决定优先级，比如后绘制的区块覆盖先绘制的区块，那么在命中检测时从后往前遍历，命中即跳出。对于带洞的多边形，洞区域要单独做排除判断，如果点击点在外环内但在内环外，才算真正命中区块。实现时先判断外环，再遍历内环坐标数组排除。
5.5 拖动和点击事件冲突
在支持缩放平移的地图上点击和拖拽是天然冲突的：用户按下鼠标后稍微移动了几像素，本意是点击，却被误判为平移。解决办法是记录 mousedown 时的坐标，在 mouseup 时计算移动距离，如果小于某个阈值（比如 4 像素）则视为点击，否则视为平移结束。这个阈值要按实际设备调，触屏设备阈值可以放大到 8-10 像素，避免手指轻微晃动导致误触。
6. 进阶：从静态地图到可交互的区域选择器
当基础的地图渲染、缩放平移、点击命中都跑通之后，下一步通常是把地图嵌进业务表单。最常见的需求是：让用户点击地图上的区域，选中某个地块，然后把对应的属性值写入表单。
我一般会在properties里额外维护一个selected状态，但注意这个状态不要直接写进 GeoJSON 的 properties 对象里，因为那会破坏原始数据的纯净化，字段混在一起将来替换数据时容易忘了清理。更好的做法是单独维护一个Map对象，以 Feature 的 id 为 key，把选中状态存在渲染层的状态容器中：
const selectState = new Map(); function handleClick(point) { for (let i = features.length - 1; i >= 0; i--) { const screenPath = getScreenPath(features[i]); if (isPointInPolygon(point.x, point.y, screenPath)) { selectState.set(features[i].id, !selectState.get(features[i].id)); render(); break; } } }这段代码的遍历顺序是从后往前，保证层级靠上的区块优先判断。getScreenPath内部调用全局坐标转换函数，确保屏幕坐标和渲染坐标一致。更新选中状态之后调用render()重绘，在 render 函数里通过selectState.has(feature.id)判断填充色是否切换为高亮色。
如果想加深交互反馈，还可以在 hover 时高亮候选区块，做法是把 mousemove 事件里命中的多边形 id 存入一个hoverId变量，render 时给对应区块加一层半透明填充。注意 hover 检测频繁，遍历所有多边形会带来不必要的计算，我习惯先鼠标移动绘制后用 bbox 粗筛，命中数量大于 0 才执行精确射线法。
对于区块数量特别多（比如几百个地块）的场景，可以给每个区块做一个离屏 canvas，缩放入场时只绘制可见区域对应的区块，视野外的区块用 bbox 判断后跳过。这个资源包默认不启用这个优化，但代码结构上预留了visibleFeatures过滤器，需要时替换即可。
最后说一个我自己的教训：某次做一个地块选择功能，数据源换了新一版 geojson，多边形的字段名从name改成了title，所有区域点击后都拿不到正确名字，排查了半小时，才发现是数据字段不匹配。从那以后我每次接新数据，都会先打印一个 Feature 的完整结构，确认 properties 和 geometry 类型再继续写渲染逻辑。希望帮到你。
本文还有配套的精品资源，点击获取
