Add existing leaflet polygons to an existing leaflet layer(将现有的传单多边形添加到现有的传单图层)
问题描述
我有一堆存储在数据库中的多边形.我想将它们添加到地图中,以便可以使用 leaflet-draw 工具栏.虽然,现在多边形已添加到地图中,但我无法对其进行编辑.
I have a bunch of polygons which are stored in a database. I would like to add them to the map in such a way that they can be edited using the leaflet-draw toolbar. Although, now the polygons get added to the map, I am unable edit them.
我认为这是因为它们没有添加到 layerGroup()
添加新绘制的形状.
I think this is because they are not added to the layerGroup()
to which newly drawn shapes are added.
请帮忙.
推荐答案
你必须将你的多边形添加到 featureGroup drawnItems
!比方说,
You have to add your polygons to the featureGroup drawnItems
! Let's say,
var polyLayers = dbArray;
是您的带有多边形的数据库数组.首先使用您绘制的项目创建一个特征组:
is your database array with polygons. First create a feature group with your drawn items:
var drawnItems = new L.FeatureGroup();
并将其添加到地图中:
map.addLayer(drawnItems);
然后你只需要从你的数据库中迭代你的多边形并将它们添加到drawedItems FeatureGroup
:
Then you simply need to iterate over your polygons from your database and add them to the drawnItems FeatureGroup
:
for(layer of polyLayers) {
drawnItems.addLayer(layer);
};
现在图层已添加到地图并可以编辑.
Now the layers are added to the map and editable.
这里有一个示例:
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var polyLayers = [];
var polygon1 = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]);
polyLayers.push(polygon1)
var polygon2 = L.polygon([
[51.512642, -0.099993],
[51.520387, -0.087633],
[51.509116, -0.082483]
]);
polyLayers.push(polygon2)
// Add the layers to the drawnItems feature group
for(let layer of polyLayers) {
drawnItems.addLayer(layer);
}
这篇关于将现有的传单多边形添加到现有的传单图层的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:将现有的传单多边形添加到现有的传单图层
基础教程推荐
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 直接将值设置为滑块 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01