問題描述
我正在嘗試對(duì)從數(shù)據(jù)庫加載的多邊形使用傳單的編輯功能.當(dāng)我單擊傳單的編輯按鈕時(shí)，我收到錯(cuò)誤無法讀取未定義的屬性啟用"
I am trying to use leaflet's edit function on polygons that I loaded from my database. When I click on leaflet's edit button I get the error
Cannot read property 'enable' of undefined
這個(gè)帖子描述了一個(gè)類似的問題，用戶ddproxy說
This thread describes a similar problem, and user ddproxy said
由于FeatureGroup擴(kuò)展了LayerGroup，你可以遍歷圖層呈現(xiàn)并將它們單獨(dú)添加到用于Leaflet.draw"
"Since FeatureGroup extends LayerGroup You can walk through the layers presented and add them individually to the FeatureGroup used for Leaflet.draw"
我很困惑他所說的穿過"是什么意思，我以為我正在添加一個(gè)圖層組，所以我不確定我會(huì)穿過什么.這是否與我將多邊形添加為 geoJSON 對(duì)象這一事實(shí)有關(guān)?
將多邊形添加到地圖，綁定它們的彈出窗口，并為它們分配自定義顏色，僅供參考.
I am confused what he means by "walk through", I thought I was adding a layer group, so i'm not sure what I would be walking through. Does this have to do with the fact that i'm adding the polygons as a geoJSON object?
Adding the polygons to the map, binding their popups, and assigning them custom colors works perfectly FYI.
以下是相關(guān)代碼:
<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 = '© <a >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() 函數(shù):
And the loadHazards() function:
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);
}
});
}
提前致謝！
推薦答案
不幸的是，Leaflet.draw 插件不處理嵌套層組(功能組/GeoJSON 層組相同).
Unfortunately Leaflet.draw plugin does not handle nested Layer Groups (same for Feature Groups / GeoJSON Layer Groups).
這就是你參考的Leaflet.draw #398問題的意思:他們建議遍歷您的 Layer/Feature/GeoJSON 層組的 child 層(例如，使用他們的 eachLayer 方法).如果子圖層是非組圖層，則將其添加到您的可編輯要素組.如果是另一個(gè)嵌套組，則再次循環(huán)遍歷其自己的子層.
That is the meaning of the Leaflet.draw #398 issue you reference: they advise looping through the child layers of your Layer/Feature/GeoJSON Layer Group (e.g. with their eachLayer method). If the child layer is a non-group layer, then add it to your editable Feature Group. If it is another nested group, then loop through its own child layers again.
查看該帖子中提出的代碼:
See the code proposed in that post:
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 個(gè)其他解決方案重構(gòu)您的代碼:
In your very case, you can also refactor your code with 2 other solutions:
- 而不是構(gòu)建您的
layerGroup(實(shí)際上是一個(gè) LeafletGeoJSON 圖層組)，然后將其添加到您的Hazards功能組中，從頭開始將后者設(shè)為 GeoJSON 圖層組，然后addData用于您的每個(gè)功能(item):
- Instead of building your
layerGroup(which is actually a Leaflet GeoJSON Layer Group) first and then add it into yourHazardsFeature Group, make the latter a GeoJSON Layer Group from the beginning, andaddDatafor each of your single Features (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
}
- 您可以直接構(gòu)建一個(gè) Leaflet Polygon 并將其添加到您的
Hazards圖層/功能組中: - Instead of building a GeoJSON Feature Object (
item) and parse it into a Leaflet GeoJSON Layer, you can directly build a Leaflet Polygon and add it into yourHazardsLayer/Feature Group:
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"};
}
}
這篇關(guān)于傳單繪制“無法讀取未定義的屬性‘啟用’"向 geoJSON 層添加控制的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！