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.js 中得到 ERR_CONNECTION_TIMED_OUT? 2022-01-01
- 什么是不使用 jQuery 的经验技术原因? 2022-01-01
- 如何使用 CSS 显示和隐藏 div? 2022-01-01
- Javascript 在多个元素上单击事件侦听器并获取目标 2022-01-01
- WatchKit 支持 html 吗?有没有像 UIWebview 这样的控制器? 2022-01-01
- Node.js 有没有好的索引/搜索引擎? 2022-01-01
- 如何使用sencha Touch2在单页中显示列表和其他标签 2022-01-01
- 每次设置弹出窗口的焦点 2022-01-01
- 如何在特定日期之前获取消息? 2022-01-01
- jQuery File Upload - 如何识别所有文件何时上传 2022-01-01
