将现有的传单多边形添加到现有的传单图层

2022-01-12 00:00:00 leaflet javascript leaflet.draw

我有一堆存储在数据库中的多边形.我想将它们添加到地图中，以便可以使用 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); 
    }

相关文章