Листовка Draw "Не удается прочитать свойство 'enable' of undefined", добавив элемент управления в слой geoJSON

Question

Я пытаюсь использовать функцию редактирования листовок для полигонов, загруженных из моей базы данных.Когда я нажимаю кнопку редактирования листовки, я получаю сообщение об ошибке
Cannot read property 'enable' of undefined

В этой теме описывается похожая проблема, и пользователь ddproxy говорит

"Поскольку FeatureGroup расширяет LayerGroup Вы можете пройтись по представленным слоям и добавить их по отдельности в FeatureGroup, используемую для Leaflet.draw"

Я не совсем понимаю, что он имеет в виду под "обходом"Я думал, что добавляю группу слоев, поэтому я не уверен, через что я буду проходить.Связано ли это с тем, что я добавляю полигоны как объект geoJSON?
Добавление полигонов на карту, привязка их всплывающих окон и назначение им пользовательских цветов прекрасно работает для вас.

Ниже приведен соответствующий код:

<script>
window.addEventListener("load", function(event){
    //other stuff
    loadHazards(); 

});

//next 6 lines siply add map to page
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
var osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
var osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib})
var map = new L.Map('map', { center: new L.LatLng(39.255467, -76.711964), zoom: 16 })

osm.addTo(map);

var drawnItems = L.featureGroup().addTo(map);
var Hazards = L.featureGroup().addTo(map);

L.control.layers({
        'osm': osm.addTo(map)
        },
        {
           'drawlayer': drawnItems,
           "Hazards" : Hazards,
           "Tickets": Tickets
         },

         {
           position: 'topleft', collapsed: false
         }
         ).addTo(map);

map.addControl(new L.Control.Draw({
    edit: {
        featureGroup: Hazards,
        poly: {
            allowIntersection: false
        }
    },
    draw: {
        polygon: {
            allowIntersection: false,
            showArea: true
        },
        rectangle:false,
        circle:false,
        circlemarker:false
    }
}));

map.on(L.Draw.Event.CREATED, function (event) {
    var layer = event.layer;
    drawnItems.addLayer(layer);
});

</script>

И функция loadHazards ():

function loadHazards(){
$.ajax({
    type: 'GET',
    url:'/loadPolygonFromDatabase',
    success : function(polygons){           
        polygons = JSON.parse(polygons);

        var toAdd = [];
        for (i in polygons){

            var item = {
                    "type" : "Feature",
                    "properties":{
                        "category":"",
                        "description":"",
                        "ID":""
                     },
                     "geometry" : {
                        "type":"Polygon",
                        "coordinates":[],

                    }

            };

            item["geometry"]["coordinates"][0] = polygons[i]["coordinates"];
            item["properties"]["category"]     = polygons[i]["category"];
            item["properties"]["description"]  = polygons[i]["description"];
            item["properties"]["ID"]  = polygons[i]["ID"];
            toAdd.push(item);

        }

        //Add information to popup
        var layerGroup = L.geoJSON(toAdd, {
            onEachFeature: function (feature, layer) {
                layer.bindPopup(  '<h1>' + feature.properties.category + '</h1>'
                                + '<p>'  + feature.properties.description + '</p>');
                layer.id = feature.properties.ID;

          },
          style: function(feature){
             switch (feature.properties.category) {
                case 'Rabid_Beavers': return {color: "#663326"};
                case 'Fire':   return {color: "#ff0000"};
                case 'Flood':   return {color: "#0000ff"};
            }
          }
        }).addTo(Hazards);

    }
});
}

Заранее спасибо!

Answer 1

Как упомянуто @ghybs Leaflet.Draw не поддерживает группы или мультиполигоны.Мне нужна была та же функциональность, поэтому несколько лет назад я создал leaflet.pm, который поддерживает отверстия, MultiPolygons, GeoJSON и LayerGroups:

https://github.com/codeofsumit/leaflet.pm

Надеюсь, это поможет.

Answer 2

К сожалению, плагин Leaflet.draw не обрабатывает вложенные группы слоев (то же самое для групп объектов / групп слоев GeoJSON).

В этом смысл проблемы Leaflet.draw # 398 , которую выссылка: они советуют проходить по слоям дочерних вашей группы слоев Layer / Feature / GeoJSON (например, с помощью их метода eachLayer).Если дочерний слой не является групповым, добавьте его в редактируемую группу объектов.Если это другая вложенная группа, то снова переберите свои собственные дочерние слои.

См. Код, предложенный в этом посте:

https://gis.stackexchange.com/questions/203540/how-to-edit-an-existing-layer-using-leaflet

var geoJsonGroup = L.geoJson(myGeoJSON);
addNonGroupLayers(geoJsonGroup, drawnItems);

// Would benefit from https://github.com/Leaflet/Leaflet/issues/4461
function addNonGroupLayers(sourceLayer, targetGroup) {
  if (sourceLayer instanceof L.LayerGroup) {
    sourceLayer.eachLayer(function(layer) {
      addNonGroupLayers(layer, targetGroup);
    });
  } else {
    targetGroup.addLayer(sourceLayer);
  }
}

В вашемВ этом случае вы также можете выполнить рефакторинг своего кода с помощью 2 других решений:

• Вместо создания вашей layerGroup (которая на самом деле является Leaflet GeoJSON Layer Group ), а затем добавьтевключите в свою группу элементов Hazards, сделайте последнюю группу слоев GeoJSON с самого начала и addData для каждой из ваших отдельных функций (item):

var Hazards = L.geoJSON(null, yourOptions).addTo(map);

for (i in polygons) {
  var item = {
    "type" : "Feature",
    // etc.
  };
  // toAdd.push(item);
  Hazards.addData(item); // Directly add the GeoJSON Feature object
}

• Вместо создания объекта объектов GeoJSON (item) и анализа его в слое Leaflet GeoJSON, вы можете напрямую создать Polygon * Leaflet и добавить его в свой Hazards слой/ Группа функций:

for (i in polygons) {
  var coords = polygons[i]["coordinates"];
  var style = getStyle(polygons[i]["category"]);
  var popup = ""; // fill it as you wish

  // Directly build a Leaflet layer instead of an intermediary GeoJSON Feature
  var itemLayer = L.polygon(coords, style).bindPopup(popup);
  itemLayer.id = polygons[i]["ID"];
  itemLayer.addTo(Hazards);
}

function getStyle(category) {
  switch (category) {
    case 'Rabid_Beavers': return {color: "#663326"};
    case 'Fire':   return {color: "#ff0000"};
    case 'Flood':   return {color: "#0000ff"};
  }
}