Python面试高频问题 list与字符串、字典和元组的转换
2026/9/15 0:28:27
简介：围绕Leaflet矩形采集与编辑的实战资源包，面向GIS前端开发者与Leaflet学习者，聚焦矩形绘制、事件监听、Leaflet.Draw插件集成及GeoJSON数据交互等核心操作。包体共49个文件，以36个js脚本、9个png图标、2个css样式、1个html示例页和1个svg资源为主，合计263KB，结构清晰便于按功能模块查阅。已有457人学习下载，适合希望快速掌握地图矩形交互功能的中级前端开发者。资源内含可运行的HTML演示页面、配套的Leaflet与Leaflet.Draw相关JavaScript库文件，以及界面所需图片资源；通过示例代码可直接理解矩形创建、编辑、面积显示和事件回调的完整流程，并可作为项目模板直接复用，降低二次开发与调试成本。
1. leaflet 矩形采集与矩形编辑，先想清楚“采集”到底要什么
leaflet 矩形采集与矩形编辑，看起来是地图开发里最不值一提的需求：画个框，存起来，回头还能改。但真正接手过电子围栏、地块登记、楼栋外包线这类项目的人都知道，一旦把“画框”变成“采集”，事情就从一行L.rectangle变成了三件事：绘制交互怎么控制、四角坐标怎么落库、已画图形怎么再编辑。只静态画一个矩形确实简单，但编辑态涉及 leaflet-draw 的 FeatureGroup、事件回调和坐标回写，任何一个环节断掉，前端画得再漂亮，后端也拿不到能直接入库的数据。这篇文章按采集、存储、编辑、回显这条主线走一遍，适合刚接触 Leaflet 的读者照着抄，也适合已经写过地图交互的人回来看参数边界和坐标坑。
2. 用 leaflet-draw 跑通矩形采集的最小实现
2.1 为什么选 leaflet-draw 而不是手写鼠标事件
Leaflet 原生 API 只提供L.rectangle这个静态构造函数，它接收一个LatLngBounds和一个样式对象，调用后在地图上渲染出一个矩形图层。但“采集”意味着你要自己处理从按下鼠标到拖拽、松手、双击结束这一整条事件链，还要考虑矩形吸附、最小尺寸限制、与地图缩放的手势冲突。这些逻辑看似简单，写起来全是细节，比如拖拽时如何实时更新预览矩形、双击结束时如何避免同时触发地图双击缩放。
社区事实标准是 leaflet-draw 插件，它把绘制交互抽象成了L.Control.Draw工具栏，并为每种图形提供独立事件。矩形在 leaflet-draw 内部并不特殊，它就是四个顶点的 Polygon，所以绘制完成、编辑拖拽的机制全部复用 Polygon 的那一套，这意味着你学会了矩形，后续画多边形、画线是同样的心智模型。选择它的另一个理由是编辑能力：leaflet-draw 的edit配置直接绑定实现矩形缩放与移动，自己写编辑手柄工作量会成倍增长。
2.2 最小页面：一个能画矩形并取回坐标的地图
下面是一份可以直接复制到本地跑起来的完整页面，核心是初始化地图、创建L.FeatureGroup作为采集结果的容器、挂上L.Control.Draw工具栏并监听创建事件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>leaflet 矩形采集最小实现</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" /> <style> #map { height: 100vh; } </style> </head> <body> <div id="map"></div> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script> <script> const map = L.map('map').setView([30.25, 120.15], 15); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map); // 存放所有已采集矩形的容器 const drawnItems = new L.FeatureGroup().addTo(map); const drawControl = new L.Control.Draw({ draw: { polygon: false, circle: false, marker: false, polyline: false, rectangle: { shapeOptions: { color: '#3388ff', weight: 2, fillOpacity: 0.25 } } }, edit: { featureGroup: drawnItems, edit: true, remove: true } }); map.addControl(drawControl); map.on(L.Draw.Event.CREATED, function (e) { const layer = e.layer; drawnItems.addLayer(layer); }); </script> </body> </html>这段代码里值得说明的参数有三个：draw对象里把其他图形类型全部置为false，只保留rectangle，这样工具栏只出现矩形按钮，避免用户误画；shapeOptions是绘制预览期的样式，注意它只在绘制过程生效，编辑态样式由edit配置单独控制；edit.featureGroup必须指向drawnItems，这是后面矩形编辑能生效的前提，漏掉它工具栏的编辑按钮会一直处于灰色不可点状态。
2.2.1 draw:rectangle 事件里到底能拿到什么
L.Draw.Event.CREATED事件触发时机是用户完成一次绘制，事件对象里有两个关键属性：e.layer是绘制产生的图形图层，e.layerType是字符串'rectangle'，可以在多图形混用时做类型分流。矩形图层的取参有两种常见写法。
map.on(L.Draw.Event.CREATED, function (e) { const layer = e.layer; drawnItems.addLayer(layer); // 方式一：LatLngBounds，适合算中心点、算面积、判断点是否在框内 const bounds = layer.getBounds(); const sw = bounds.getSouthWest(); const ne = bounds.getNorthEast(); console.log('西南角', sw.lat, sw.lng, '东北角', ne.lat, ne.lng); // 方式二：GeoJSON，适合直接提交后端 const gj = layer.toGeoJSON(); const coords = gj.geometry.coordinates[0]; console.log('四个角点', coords); });需要注意坐标顺序的反直觉点：getBounds返回的是 Leaflet 一贯的[lat, lng]顺序，而toGeoJSON输出的坐标数组是 GeoJSON 标准要求的[lng, lat]顺序。如果直接把getLatLngs()的结果序列化给后端，前端看着是矩形，后端画出来可能横跨半个地球。我一般建议落库统一走 GeoJSON，前端展示再走 LatLng。
2.3 采集结果的三套存储格式怎么选
矩形采集完成后，落库格式决定后续编辑回显的复杂度，这里整理三种做法的对比。
| 存储格式 | 取值方式 | 适合场景 | 注意事项 |
|---|---|---|---|
| LatLngBounds | layer.getBounds() | 内存内临时计算，如聚合分析 | 不是标准地理格式，不能直接序列化 |
| 四角坐标数组 | layer.getLatLngs()[0] | 后端有自定义表结构 | 点顺序要约定一致，前后端共担风险 |
| GeoJSON Polygon | layer.toGeoJSON() | PostGIS、MongoDB 地理索引 | 经纬度顺序为 lng/lat，与 Leaflet 相反 |
leaflet-draw 生成的矩形顶点顺序通常是顺时针，从西北角开始，这与多数 GIS 后端约定的逆时针正好相反。如果后端要做面积正负判断或多边形拓扑校验，建议在前端落库前统一做一次顶点重排，避免在联调阶段反复核对“为什么从数据库读出来三角形”。采集这个环节做厚一点，后面编辑和回显会省很多事。
3. leaflet 矩形编辑：开启编辑态并监听 edit:resize 与 edit:move
3.1 FeatureGroup 是矩形编辑容器的底子
矩形编辑的机制和绘制不同：绘制是创建新图层，编辑是修改已存在图层，所以必须有一个容器告诉 leaflet-draw“哪些图层允许被编辑”。这个容器就是L.FeatureGroup。在上一章代码里，drawnItems同时承担了两个职责：接收新建矩形、作为edit.featureGroup的编辑目标。
当用户点击工具栏的编辑按钮后，leaflet-draw 会对 FeatureGroup 里的每个图层调用layer.editing.enable()，矩形图层会挂上可拖拽的角点手柄。矩形的编辑本质上是四个顶点的编辑，拖角点是缩放，拖中间是移动，这与多边形编辑完全一致。理解了这一层，就明白为什么编辑矩形时角点可以被拖成非直角形状——leaflet-draw 根本没有“保持矩形”的概念，它只知道编辑四个顶点。
3.2 编辑配置参数与两种开启编辑态的方式
L.Control.Draw的edit配置有四类常用参数，其中featureGroup是必填项。
| 参数 | 默认值 | 作用 |
|---|---|---|
featureGroup | 无，必填 | 指定可编辑图层所在的分组 |
edit | true | 是否显示编辑按钮，控制进入顶点编辑态 |
remove | true | 是否显示删除按钮 |
selectedPathOptions | null | 选中后高亮样式，如虚线描边 |
除了通过工具栏进入编辑态，代码里也可以直接控制，这在做“选中某个矩形后自动进入编辑”的场景里很常用。
// 方案一：监听工具栏进入编辑模式的时刻 map.on(L.Draw.Event.EDITMODE, function (e) { console.log('已进入编辑模式，这时的矩形都有角点手柄'); }); // 方案二：代码直接开启/关闭编辑态 function startEdit() { drawnItems.eachLayer(function (layer) { layer.editing.enable(); }); } function stopEdit() { drawnItems.eachLayer(function (layer) { layer.editing.disable(); }); } // 编辑过程中持续监听形状变化 map.on(L.Draw.Event.EDIT_RESIZE, function (e) { const layer = e.layer; console.log('缩放后范围', layer.getBounds().toBBoxString()); }); map.on(L.Draw.Event.EDIT_MOVE, function (e) { const layer = e.layer; console.log('移动后范围', layer.getBounds().toBBoxString()); });EDIT_RESIZE和EDIT_MOVE是矩形编辑最核心的两个事件。EDIT_RESIZE在拖拽角点时触发，每帧触发一次，适合做实时校验，比如限制矩形不能小于某个面积；EDIT_MOVE在整体平移时触发。toBBoxString()输出的是minLng,minLat,maxLng,maxLat格式的字符串，做日志和调试比打印两个角点对象直观得多。
3.3 edit:stop 时把拖歪的矩形拉回正
前面提到，编辑矩形等于编辑四个顶点，用户完全可以把角点拖成一个任意四边形。对于围栏、地块这类业务，后端通常接受的是严格矩形，这时需要在编辑结束时做一次校正。常见做法是取四个角点的经纬度极值，重新构造外接矩形，等于把用户拖歪的形状强制拉正。
map.on(L.Draw.Event.EDIT_STOP, function (e) { drawnItems.eachLayer(function (layer) { const latlngs = layer.getLatLngs()[0]; // 编辑后的四个角点 const lats = latlngs.map(p => p.lat); const lngs = latlngs.map(p => p.lng); const minLat = Math.min(...lats); const maxLat = Math.max(...lats); const minLng = Math.min(...lngs); const maxLng = Math.max(...lngs); // 用极值外接矩形覆盖拖歪的四边形 layer.setBounds([[minLat, minLng], [maxLat, maxLng]]); }); });setBounds是L.Rectangle的专用方法，传入两个对角点即可重设形状。这段代码的原理是用最小外接矩形的思路消解拖拽误差，代价是如果用户确实需要旋转矩形，这类校正会破坏旋转角。所以它只适用于正南正北的业务矩形，旋转场景的解法放在下一章单独讲。
4. 矩形数据回显、坐标系转换与 leaflet 地图旋转的适配
4.1 用 GeoJSON 把已存矩形回显并放回编辑容器
采集数据落库后，页面刷新需要把后端数据重新画到地图上，并且要能继续编辑。回显用的L.geoJSON工厂函数会按 GeoJSON 的 geometry 类型自动生成对应图层，Polygon 会生成L.Polygon实例，它同样支持拖拽编辑。
const featureCollection = { type: 'FeatureCollection', features: [{ type: 'Feature', properties: { id: 1001, name: 'A-01 地块' }, geometry: { type: 'Polygon', coordinates: [[ [120.1500, 30.2500], [120.1550, 30.2500], [120.1550, 30.2550], [120.1500, 30.2550], [120.1500, 30.2500] ]] } }] }; const geoLayer = L.geoJSON(featureCollection, { style: function () { return { color: '#ff6600', weight: 2, fillOpacity: 0.2 }; }, onEachFeature: function (feature, layer) { // 关键：把回显图层放进编辑容器，工具栏才能编辑它 drawnItems.addLayer(layer); } }).addTo(map); map.fitBounds(geoLayer.getBounds());onEachFeature回调里的drawnItems.addLayer(layer)是最容易漏的一行。如果不把回显图层放进 FeatureGroup，数据能看到但工具栏的编辑按钮对它无效。此外注意L.geoJSON生成的图层默认没有setBounds方法，因为它是 Polygon 而不是 Rectangle，如果之后要对它执行矩形校正，需要先判断layer instanceof L.Rectangle，不是则用setLatLngs重设顶点。
4.2 leaflet 地图旋转场景下，旋转矩形用 L.polygon 算四角
检索“leaflet地图旋转”的人，往往有两种诉求：一种是旋转整个地图容器，那是 CSS transform 或专用插件的事；另一种是业务需要采集带旋转角的矩形，比如与道路平行、与建筑朝向一致的地块框选。原生L.rectangle只支持正南正北，因为它的构造函数参数是LatLngBounds，天然是经纬度对齐的。旋转矩形必须用L.polygon手工计算四个角点。
// 给定中心点、半宽半高和旋转角（度），计算旋转矩形的四角 function rotatedRectPoints(center, halfWidth, halfHeight, angleDeg) { const rad = angleDeg * Math.PI / 180; const cos = Math.cos(rad); const sin = Math.sin(rad); // 以中心为原点的四个角偏移量 const corners = [ [-halfHeight, -halfWidth], [-halfHeight, halfWidth], [halfHeight, halfWidth], [halfHeight, -halfWidth] ]; return corners.map(([dy, dx]) => { const lat = center.lat + dy * cos + dx * sin; const lng = center.lng - dy * sin + dx * cos; return [lat, lng]; }); } // 用法：中心 (30.25, 120.15)，宽高各约 0.002 度，旋转 30 度 const pts = rotatedRectPoints({ lat: 30.25, lng: 120.15 }, 0.002, 0.001, 30); const layer = L.polygon(pts, { color: '#ff6600', weight: 2 }).addTo(map);旋转矩阵的计算公式是二维旋转的标准写法，注意这里把角度制转弧度制，并且经纬度各乘以 cos 和 sin 分量。这种旋转矩形的编辑不能复用 leaflet-draw 的角点拖拽，因为拖拽后旋转中心会漂移，常见做法是自绘两个手柄分别控制平移和旋转角，或者只允许编辑中心点和旋转角两个参数。遇到这类需求时，要提前和后端确认存储结构，仅存四角坐标会导致旋转参数无法还原。
4.3 采集坐标精度与 EPSG:4326 / EPSG:3857 的取舍
Leaflet 地图默认使用 EPSG:3857 作为渲染坐标系，但所有 API 返回的经纬度都是 EPSG:4326。大多数情况下后端存 4326 即可，但如果对接的是天地图、高德这类叠加层，或者后端用 PostGIS 且空间索引建立在 3857 上，就需要做转换。
// WGS84 经纬度转 Web 墨卡托米制坐标 function wgs84ToMercator(lat, lng) { const R = 6378137; const x = lng * (Math.PI / 180) * R; const y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) * R; return [x, y]; } // 落库前统一保留 6 位小数，避免浮点噪声 const coords = layer.getLatLngs()[0].map(p => [ Number(p.lng.toFixed(6)), Number(p.lat.toFixed(6)) ]);坐标系选型直接影响后续所有编辑回显的精度。4326 是经纬度制，1 度经度在不同纬度对应的实际距离不同，不适合做面积计算；3857 是米制，适合算面积和距离，但高纬度区域形变严重。采集场景我一般建议后端存 4326，前端做展示，计算面积时再用L.GeometryUtil或 turf 临时转换，这样数据结构最干净。toFixed(6)把经纬度保留 6 位小数，对应约 0.1 米的精度，对围栏和地块场景足够，浮点数直接序列化反而会产生30.250000000000004这类脏数据。
5. 一体化落地：必调参数与三个高频坑
5.1 直接抄的工具栏参数表
把采集和编辑做到一个页面上时，下面这组参数是经过多次项目验证的起点配置。
| 参数位置 | 参数名 | 推荐值 | 原因 |
|---|---|---|---|
| map | doubleClickZoom | 绘制时动态disable() | 双击完成绘制时地图不缩放 |
| draw.rectangle | repeatMode | false | 单次采集模式，避免连续误画 |
| draw.rectangle.shapeOptions | color/weight | '#3388ff'/2 | 绘制预览视觉清晰 |
| edit | selectedPathOptions | { dashArray: '8 8' } | 选中态与普通态区分明显 |
| edit | remove | 按需false | 需要软删除时关闭物理删除 |
对应代码里，绘制开始前关掉双击缩放，绘制完成后恢复的逻辑比较隐蔽，实际项目中我一般挂在工具栏的按钮事件上，判断map.doubleClickZoom.enabled()动态切换，而不是全局写死。
5.2 三个高频坑与验证技巧
第一个坑是绘制时双击缩放打断操作。leaflet-draw 默认在双击时结束绘制，但地图容器的双击缩放事件会同时触发，导致绘制结束时视角被拉近。解决方式是在创建L.Control.Draw之前执行map.doubleClickZoom.disable()，绘制完成事件里再enable()回来。
第二个坑是编辑后保存的数据和视觉不一致。这通常出现在旋转矩形场景，因为L.polygon没有getBounds语义的矩形范围，直接调getBounds()得到的是外接矩形而不是真实四角，落库后重新加载会发现图形“长大了”。旋转矩形必须从getLatLngs()取原始顶点，不要依赖getBounds。
第三个坑是重复监听导致采集数据翻倍。如果map.on(L.Draw.Event.CREATED)写在某个初始化函数里，而该函数被路由切换时反复调用，每次绘制完成都会执行多次addLayer。排查方法是监控drawnItems.getLayers().length，绘制一个矩形前先清理旧监听，或者把监听逻辑收敛到单例初始化。
验证矩形采集与编辑是否真正闭环，我的建议是在浏览器控制台执行drawnItems.toGeoJSON()，把输出的 FeatureCollection 和落库前的 JSON 做一次字段级对比，重点看坐标顺序是[lng, lat]还是[lat, lng]，再看小数位数是否满足后端精度校验。这一步通过，矩形从绘制、编辑到回显的数据链路才算真正跑通。
本文还有配套的精品资源，点击获取