简介：面向GIS前端开发者的Leaflet矩形采集与编辑实战资源，围绕L.Rectangle类与Leaflet.Draw插件，系统讲解矩形绘制、边界获取、点击监听、动态编辑与删除等核心操作，涵盖LatLngBounds构造、draw:created事件、getBounds/setBounds及toGeoJSON等常用方法，适合需要在地图中快速实现矩形框选、地理围栏或区域面积展示的初中级开发者。压缩包共49个文件，包含36个js脚本、2个css样式、9个png图标及示例html页面，整体263KB，js脚本按功能切分、样式与页面分离，png图片可用于地图标注，目录结构清晰，方便读者按模块阅读和复用。资源提供完整可运行的演示页面，不仅展示矩形采集和编辑的基础写法，还给出Leaflet.Draw控件的初始化配置与回调处理思路，覆盖地图初始化、矩形绘制的完整链路，可帮助开发者快速掌握从绘制到编辑的完整交互流程。现有457人学习使用，是一份贴近实战的参考素材，可快速上手。
1. leaflet 矩形采集与矩形编辑：比 Polygon 更省事，但也更挑参数
在 Leaflet 的地图业务里，画点、画线、画面都好说，唯独「画矩形」是个容易被低估的活儿。放大看是画了一个矩形，落到数据层才知道，它既要满足「能采」——框住一块区域、拿到四至范围并转成 GeoJSON 存库，还要满足「能改」——一次没画准，不能删了重画，而是要能拖动、能缩放、能改完了再存一次。标题里的「leaflet矩形采集与矩形编辑」拆开看，就对应 Leaflet.draw 插件的 rectangle 绘制与编辑能力，再往深走一步，还涉及 L.rectangle 实例、layer.editing、bounds 的坐标换算这些底层 API。
比较反直觉的一点是：矩形采集看着比 Polygon 简单，实际踩坑却更深。因为它同时依赖 L.Rectangle 的几何逻辑和 L.Draw.Rectangle 的交互逻辑，任何一边选型错了，比如用了 canvas renderer、没设 zIndexOffset、编辑完只拿图层没拿 bounds，都会在「采完存库、再加载编辑」两个环节连环出问题。这篇文章会直接从最小可运行写法入手，把采集、编辑、数据落库、动态刷新这四个关键动作分别展开，最后落到旋转地图视角这个容易被忽略的坑上。适合正在做 GIS 低代码平台、国土/园区/楼宇可视化这类矩形框选需求的工程师，拿到就能抄。
2. 用 Leaflet.draw 做矩形采集：从绘制到触发数据输出
2.1 矩形采集不能上来就 new L.Rectangle
很多团队做矩形采集，第一反应是给地图绑定 click 事件，点两个点拉出矩形。这样做不是不行，而是后续要叠加编辑能力时要自己处理句柄、拖拽、焦点态，工作量不会比用插件少。更稳的做法是基于 Leaflet.draw 的 L.Draw.Rectangle，它内部已经把鼠标拖拽、经纬度换算、兜底事件都处理完了。
采集前的初始化分两层：一是地图实例本身，二是 draw 控件的开关。地图初始化这一步，如果项目是 vue/react 里挂载，需要留意容器尺寸，不能在 display:none 状态下初始化，否则矩形拖出来坐标会偏。下面是一个最小可跑的初始化写法：
const map = L.map('map', { center: [30.5, 114.3], zoom: 14, zoomControl: true, renderer: L.svg() // 统一用 SVG，避免 canvas 下部分 leaflet.draw 样式失效 }); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map);初始化完成之后，才轮到矩形绘制能力。注意一个细节：绘制矩形这个动作不是一上来就调map.pm.enable()（那是 leaflet-geoman 的 API），Leaflet.draw 需要单独 new 一个绘制控制实例，再手动开启：
const drawControl = new L.Control.Draw({ position: 'topright', draw: { rectangle: { shapeOptions: { color: '#3388ff', weight: 2, fillOpacity: 0.2, lineJoin: 'round' }, showArea: true, metric: true }, polygon: false, polyline: false, circle: false, marker: false, circlemarker: false }, edit: false }); map.addControl(drawControl); // 点击「画矩形」按钮时开启绘制 document.getElementById('startRect').addEventListener('click', function () { new L.Draw.Rectangle(map, { shapeOptions: { color: '#ff6600', weight: 2 } }).enable(); });这段代码能直接跑，但有两个点要说清楚。
rectangle.shapeOptions控制的是绘制过程中预览图形的样式。lineJoin: 'round'这个参数很多人忽略了，默认是miter，在地图旋转或者缩放级别很低时，矩形四个角会出现尖刺般的折角，视觉上像矢量图形破损。showArea: true会显示当前绘制区域的面积，如果只是给业务截图用，开着更直观，但它会额外做一次坐标换算，对极高频的绘制场景有轻微性能影响。
2.2 created 事件是矩形采集的数据出口
绘制完成只是交互层面结束，真正要让矩形变成数据，必须监听map.on(L.Draw.Event.CREATED)。这个事件是 Leaflet.draw 在整个绘制流程结束后派发的，但它的回调参数里并不直接给 bounds，而是给一个已经构造好的图层对象：
let currentRectLayer = null; map.on(L.Draw.Event.CREATED, function (e) { const layer = e.layer; // 清除上一次绘制的矩形 if (currentRectLayer) { map.removeLayer(currentRectLayer); } currentRectLayer = layer; map.addLayer(layer); // 这里才是矩形数据的核心出口 const bounds = layer.getBounds(); const bbox = bounds.toBBoxString(); // "west,south,east,north" const northEast = bounds.getNorthEast(); const southWest = bounds.getSouthWest(); const feature = { type: 'Feature', geometry: layer.toGeoJSON().geometry, // 这里面的 coordinates 是四角闭合环 properties: { bbox: bbox, center: [bounds.getCenter().lat, bounds.getCenter().lng], area: L.GeometryUtil.geodesicArea(layer.getLatLngs()) } }; console.log('矩形采集结果：', JSON.stringify(feature)); });这段代码里有个容易区分不清的地方：layer.toGeoJSON()返回的 geometry 是 Polygon 类型，不是 Rectangle 类型。它输出的coordinates是一个四角环，外环五个点（首尾重合），也就是说 Leaflet 在导出时把所有矩形都归一成了多边形。所以如果你的后端表结构里 geometry 字段存的是 Polygon，直接存没问题；如果存的是矩形专用结构，必须自己用bbox落库。
toBBoxString()输出的顺序是 “west,south,east,north”，也就是 左经度、下纬度、右经度、上纬度。这里有个初学时绕不过去的坑：PostGIS 的ST_Envelope和很多空间索引用的也是这种顺序，但 GeoJSON 的标准顺序是[west, south, east, north]本身，到数组下标时就成了[xmin, ymin, xmax, ymax]。建议落库时把 bbox 字符串解析成四个字段并单独建列，空间查询直接用 GIST 索引，不要在库里从 Polygon 反推四至范围。
2.2.1 用 bounds 还是会丢失信息？看业务粒度
如果业务需要记录用户画矩形时的地图层级，created回调里用map.getZoom()直接拿到，存进 properties。这点很多团队会漏掉，导致后续做“按缩放级别加载矩形区域内的 POI”时，缺失了一口关键的上下文信息。
另外，L.GeometryUtil.geodesicArea(layer.getLatLngs())计算的是球面面积，单位平方米。如果你看过很多教程，会发现也有人直接用L.GeometryUtil.geodesicArea传layer.getLatLngs()[0]，区别在于getLatLngs()返回的是三维数组（每个环一层），传整个数组会算出所有环面积之和，不报错，但结果可能比你预期大一圈。稳妥做法是取[0]。
3. 矩形编辑闭环：enable 开启、drag 拖动、resize 改形
3.1 为什么采集后必须挂 editing，而不是 remove 重画
Leaflet.draw 提供的矩形编辑，底层依赖L.Edit.Rectangle。很多人对它的理解停留在“能拖四个角改大小”，实际它的能力分两组：整体拖动和顶点拉伸。
整体拖动是按住矩形内部任意位置拖，改变的是矩形中心坐标，不改变宽高比例。顶点拉伸是拖四个角上的编辑句柄，它会同时改变宽和高——注意这里是“同时改变”，不是像 CAD 里拉一个角只改两条边。这是 Leaflet.draw 矩形编辑和 Polygon 编辑最大的差异：Polygon 可以编辑任意一点，而 Rectangle 只能保持矩形形状的前提下拉伸。
开启编辑的代码不是在created回调里直接layer.editing.enable()这么简单。因为一旦开启编辑，矩形会加上编辑句柄，如果用户紧接着点击地图空白处，编辑状态可能没有自动退出，后面的绘制事件会被干扰。通常的做法是给矩形图层加一个配合交互的容器类，然后再开启编辑：
// 采集完成后启用编辑 function enableRectEdit(layer, map) { // 保证每次编辑的是当前矩形，避免历史矩形句柄残留 map.eachLayer(function (l) { if (l._layers && l._layers._leaflet_id && l.editing) { // 这部分留给你做：只关掉其他图层的编辑态 } }); if (layer.editing) { layer.editing.enable(); } }layer.editing这个属性是 Leaflet.draw 在图层创建时注入的，不是所有 L.Rectangle 都有，所以要先判断存在再调用。
3.2 edited 事件：值此时才真正更新
和采集阶段一样，编辑结束后 Leaflet 不会自动把新 bounds 推给你，必须监听L.Draw.Event.EDITED。这个事件会返回e.layers，它是一个 LayerGroup，遍历它才能拿到每一个被编辑过的图层对象：
map.on(L.Draw.Event.EDITED, function (e) { e.layers.eachLayer(function (layer) { const newBounds = layer.getBounds(); const newBBox = newBounds.toBBoxString(); const center = newBounds.getCenter(); // 更新业务状态 rectStore.set({ // 更新前后端交互数据 bbox: newBBox, center: [center.lat, center.lng], updatedAt: Date.now() }); // 同步修改图层自身的 tooltip / popup if (layer.getPopup()) { layer.setPopupContent( '中心：' + center.lat.toFixed(6) + ', ' + center.lng.toFixed(6) + '<br/>' + '范围：' + newBBox ); } }); });注意，EDITED触发的前提是矩形真的发生了位移或缩放。如果用户只是点了一下矩形进入了编辑状态，没做任何操作就点地图退出，Leaflet.draw 不会派发这个事件。所以前端“保存矩形”按钮不能只依赖这个事件，还要在手动保存时主动读取currentRectLayer.getBounds()。
3.3 编辑时给矩形加视觉反馈：用 setStyle 与恢复
矩形编辑和点线编辑不一样，它是面编辑，视觉反馈要同时照顾“选中态”和“编辑态”。选中态用setStyle给矩形边框加粗、填色加深；编辑态需要把句柄显式暴露给用户。但leaflet.draw默认的编辑句柄很小，只有 8px 左右，在高分屏或小屏设备上很难点中。
常见做法是编辑开启前，先手动标记“当前激活矩形”，然后对矩形做一次样式重写：
function activateRectLayer(layer) { // 关闭上一个 if (window.__activeRectLayer) { window.__activeRectLayer.setStyle({ color: '#3388ff', weight: 2, fillOpacity: 0.2 }); } layer.setStyle({ color: '#ff6600', weight: 3, fillOpacity: 0.35 }); window.__activeRectLayer = layer; // 放大编辑句柄（在 css 里针对性调 leaflet-marker-icon） layer.editing.enable(); } // 编辑结束（保存或取消）时复原 function deactivateRectLayer() { if (window.__activeRectLayer) { window.__activeRectLayer.editing.disable(); window.__activeRectLayer.setStyle({ color: '#3388ff', weight: 2, fillOpacity: 0.2 }); window.__activeRectLayer = null; } }这里有个经验：编辑句柄是普通 divIcon 渲染的，不是 SVG 元素，所以不能用setStyle改大小，只能通过 CSS 覆盖.leaflet-marker-icon配合transform: translate(-50%, -50%)。而且编辑句柄的 DOM 是开启编辑时才挂上去的，如果你提前配了 CSS，要保证选择器优先级足够高，不要让地图自带的 icon 样式把它覆盖掉。
3.3.1 拖动手感优化：调整 tolerance
地图旋转或缩放过程中，把鼠标移动到矩形边角上，需要一种“吸附感”。Leaflet.draw 没有内置的 snap 功能，但可以通过tolerance选项控制鼠标与编辑点的触发距离。虽然这个参数不在官方文档的矩形配置里（它是L.Edit.Rectangle内部调用L.Edit.SimpleShape时用的），但可以通过edit配置里的touch选项间接影响：
new L.Control.Draw({ edit: { featureGroup: drawnItems, edit: { selectedPathOptions: { maintainColor: true, opacity: 0.6 } } } });注意maintainColor: true表示选中时保留原来设定的颜色，如果不设，默认选中态会是半透明的蓝色，可能影响业务方对“当前编辑矩形”的感知。
4. 数据落库与回显：矩形坐标的保存、加载和再编辑
4.1 落库要不要转 Polygon，直接用 bbox 的四种分层方案
矩形数据在 Leaflet 侧有两种表示：L.Rectangle 本质上是一个带 bounds 的 Polygon，所以数据库层面的存储方案可以设计成四种：
| 存储方案 | 字段结构 | 适合场景 | 查询方式 |
|---|---|---|---|
| 纯 bbox 四字段 | west, south, east, north 四个 double | 简单查询、列表页过滤 | west <= lng AND east >= lng AND south <= lat AND north >= lat |
| bbox + 中心点 | 四字段 + center_lng, center_lat | 需要做距离排序 | 中心点建 BTREE，组合查询 |
| GeoJSON Polygon | geometry jsonb / geometry 类型 | 后端要用空间函数 | GIST / PostGISST_Intersects |
| 双保险 | bbox 字段 + geometry 字段 | 既有空间查询又要简单字段读取 | 两者同步维护 |
如果你用的是 PostGIS，四字段方案虽然直观，但没法用ST_Contains这类空间函数做复杂空间关系判断。所以建议「双保险」：存一个 geometry 列做空间计算，同时把 bbox 四个字段平铺出来，方便 ORM 直接读值。同步维护的成本在写入时有一段通用逻辑，不复杂，但能省掉以后在 BI 系统里解析 GeoJSON 的麻烦。
4.2 从数据库回显到 Leaflet：从 bbox 字符串反构 L.Rectangle
采集完成后，刷新页面重新加载矩形，不能再走 draw 控件，而是要直接在地图上实例化 L.Rectangle，再挂到保存用图层组（featureGroup）上。这样后续再次编辑时，edit.featureGroup才能正确识别图层。
从后端读出的bbox字符串一定要先 split 成四个数值，不要直接拼成数组。因为L.rectangle接收的 bounds 参数，可以是[[south, west], [north, east]]，也可以是L.latLngBounds对象。很多新手直接写L.rectangle([[north, west],[south, east]])导致矩形上下翻转，数据看起没问题，地图上却是错位的。
下面这段回显代码兼容了两种前端框架（vue/react 里拿到接口数据后同样适用）：
function loadRectFromDB(rectData) { const [west, south, east, north] = rectData.bbox.split(',').map(Number); const bounds = [ [south, west], [north, east] ]; const rectLayer = L.rectangle(bounds, { color: '#ff6600', weight: 2, fillColor: '#ff6600', fillOpacity: 0.15, interactive: true }); rectLayer.on('click', function () { // 点击回显矩形时，允许进入编辑 enableRectEdit(rectLayer, map); }); rectLayer.addTo(drawnItems); drawnItems.addTo(map); return rectLayer; }这段代码里有个关键点：rectLayer.addTo(drawnItems)之前不能先map.addLayer(rectLayer)。因为featureGroup必须在图层加入后才能统一管理后续的编辑操作；如果先加到 map 再加到 featureGroup，编辑后图层句柄容易出现重复挂载。
4.3 渲染精度与renderer的选择：SVG 优先于 Canvas
Leaflet 默认会用 canvas 作为矢量图层渲染器，但矩形编辑对鼠标事件精度要求高，canvas 在放大缩小时会出现线和句柄错位。尤其在 Windows 上开启 125% 缩放时，canvas 内坐标与 DOM 事件坐标会出现偏移，编辑句柄很难点中。项目里如果矩形数量不多（少于 200 个），建议全局设置L.svg()：
const map = L.map('map', { renderer: L.svg() });如果公司项目已经用了 canvas 渲染大量点位或轨迹，矩形量又不大，也可以单独给绘制图层指定独立 renderer：
const rectRenderer = L.svg({ padding: 0.5 }); const drawnItems = L.featureGroup([], { renderer: rectRenderer });注意padding参数控制重绘缓冲，矩形拖出视野边缘再拖回来时，如果不加 padding，会出现渲染滞后。
4.3.1 坑：bbox字符串 split 后是 Number，状态管理里要保留原始字符串
很多前端状态库（Vuex / Pinia / Redux）里，矩形状态保存的是格式化后的bbox，但后端接受的是字符串，重新拉取后与本地状态做对比时，一个字符串一个数组，永远比不上。建议统一保存为[west, south, east, north]数组，在接口出参时再join(',')，里面写一个纯函数做双向往返，避免业务代码里到处都是 split 逻辑。
5. 矩形绘制的 3 个骨架级参数与应用建议
5.1maxBounds、pmIgnore与continueDrawing：限制绘制范围的三个维度
矩形采集在高版本 Leaflet 里，绘制范围默认是全地图，有些业务限制只在某一区域内框选。常见限制手段有三层：
第一，地图层面设置maxBounds，限制用户拖拽可视区域，但这对绘制本身是弱约束，用户照样可能从边界外拖一个矩形进来。
第二，图层层面，L.Draw.Rectangle的构造参数里有一个maxBounds，它控制绘制时矩形不能超出这个边界。但这并不是硬切断，超出部分会被裁剪，数据层拿到的是裁剪后的矩形，不会提示用户。
第三，事件层做拦截，在绘制过程中监听draw:drawvertex这类事件，当矩形角点坐标越界时，直接调disable()。这种方式最可靠，但对交互的打断感很强，要看产品接受度。
continueDrawing是控制绘制完一个矩形后是否立即进入下一个矩形绘制的参数。采集场景一般设为true，连续录入多个区域会顺手很多；编辑场景设为false，防止画完一块不小心又拉出第二个矩形。
5.2 应用建议：矩形编辑和地图旋转的一组可靠组合
标题热词里带出了「leaflet地图旋转」，这个能力在矩形采集编辑场景里是个真实的干扰项。Leaflet 原生map.setBearing()并不存在，旋转视角常用方案是给 map 容器做 CSS transform。这个方案下，矩形绘制的坐标换算不会出错，因为 Leaflet 内部用的是经纬度坐标系，不受 CSS transform 影响；但鼠标事件采集点位会受影响，因为事件坐标是相对容器左上角的，而容器被旋转了。
如果项目确实需要做地图旋转（某些园区/建筑场景），建议使用支持旋转的插件做图层渲染，同时用L.DomEvent单独处理滚轮和拖拽事件，避免旋转之后矩形编辑句柄点击错位。简单说：矩形采编和地图旋转天然冲突，优先保证采编操作的稳定性，旋转作为次要交互开关，并且只能在非编辑状态下允许旋转。在编辑状态下，通过map.dragging.disable()来强行关闭旋转和拖拽，避免语义冲突。这是在低代码平台上做矩形框选时最稳的交互策略。
5.3 从采集到交付：一条两秒上手的验证路径
写完整个流程，快速验证的方式是：先在初始化后手动构造一个矩形L.rectangle([[30.48, 114.28], [30.52, 114.32]])，写入 featureGroup，然后模拟一次EDITED事件回放数据，确认 bbox 与getBounds()一致。这个验证能一次性覆盖渲染、编辑、数据回读三层逻辑，比画一次真切很多，也更可控。
整个方案的精髓在于，矩形采集不要当作普通 Polygon 的子集来处理，而是要当成一个独立的交互组件：创建用 draw control，编辑用 editing.enable，存储用 bbox 双保险，渲染用 SVG renderer，交互上给矩形单独的编辑器优先级。把这四点理顺，后续叠加权限、审计日志、矩形内 POI 查询都只是数据消费层面的事，不会再返工到交互底层。
本文还有配套的精品资源，点击获取
