Leaflet.draw 无法编辑multipolygon类型多边形 解决方法
问题说明
在做面要素的编辑的时候,当对multiploygon类型的面要素进行编辑的时候,出现如下错误:
TypeError: Cannot read property 'lat' of null
通过查看github issues发现Leaftlet.Draw插件并不支持multipolygon类型的要素
https://github.com/Leaflet/Leaflet.draw/issues/268
解决方法
通过测试发现可以通过将multipolygon拆分成多个polygon要素的方法可以解决这个问题
拆分方法如下:
function multiPolygon2polygons (multiPolygon){ if(multiPolygon.type !== 'MultiPolygon'){ return } var polygons = []; multiPolygon.coordinates.forEach((item)=>{ var polygon = { type: "Polygon", coordinates: [] }; polygon.coordinates = item; polygons.push(polygon) }); return polygons; }
有时候原始数据可能还是需要保存成multipolygon类型的数据 这时就需要再讲拆分的polygons合并成一个multipolygon
合并方法如下:
function polygons2MultiPolygon(geoJson) { var newGeoJson = { type: "FeatureCollection", features: [{geometry: {coordinates: [], type: "MultiPolygon"}, type: "Feature", properties: {}}] }; geoJson.features.forEach((item) => { if(item.geometry.type === "Polygon"){ newGeoJson.features[0].geometry.coordinates.push(item.geometry.coordinates); }else{ item.geometry.coordinates.forEach((item) => { newGeoJson.features[0].geometry.coordinates.push(item); }) } }) return newGeoJson; }
分类:
WebGIS
标签:
Leaflet.draw
, multipolygon
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】博客园2025新款「AI繁忙」系列T恤上架,前往周边小店选购
【推荐】凌霞软件回馈社区,携手博客园推出1Panel与Halo联合会员
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 解锁.NET 9性能优化黑科技:从内存管理到Web性能的最全指南
· 通过一个DEMO理解MCP(模型上下文协议)的生命周期
· MySQL下200GB大表备份,利用传输表空间解决停服发版表备份问题
· 记一次 .NET某固高运动卡测试 卡慢分析
· 微服务架构学习与思考:微服务拆分的原则
· 解锁.NET 9性能优化黑科技:从内存管理到Web性能的最全指南
· .net clr 8年才修复的BUG,你让我损失太多了
· .NET周刊【3月第5期 2025-03-30】
· 一个神奇的JS代码,让浏览器在新的空白标签页运行我们 HTML 代码(createObjectURL
· 即时通信SSE和WebSocket对比