Leaflet 更新geojson的属性以将其与传单一起使用

我需要使用传单.js将地图添加到我的站点。该网站有一个管理视图，管理员可以在其中添加标记，并向每个标记添加说明和图像

我使用了spoolet.draw插件，在创建事件中，我尝试使用

event.layer.toGeoJSON（）

来更新GeoJSON对象，以添加一些属性，如图像和文本，但没有成功

有人能帮我吗

var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'，
osmAttrib='&复制；投稿人,，
osm=L.tileLayer（osmUrl{
maxZoom:18，
署名：奥斯马特里布
});
map=新的L.map（'map'{
层：[osm]，
中心：新L.LatLng（31.9500,35.9333），
缩放：15
}),
drawnItems=L.geoJson（）.addTo（map）；
map.addControl（新的L.Control.Draw({
编辑：{
功能组：drawnItems
}
}));
map.on（'draw:created'，函数（事件）{
var层=event.layer；
var json=event.layer.toGeoJSON（）；
json.properties.desc=null；
json.properties.image=null；
addLayer（L.GeoJSON.geometryToLayer（json））；
添加弹出窗口（层）；
});
功能添加弹出窗口（层）{
var内容=“”；
layer.bindPopup（content.openPopup（）；
警惕（‘外出’）；
}
函数saveData（层）{
var markerDesc=$（'#markerDesc'）.val（）；
var json=layer.toGeoJSON（）；
json.feature.properties.desc=markerDesc；
}

在您的

“draw:created”

监听器中，无需将其转换为GeoJSON然后返回到图层

顺便说一句，然后将弹出窗口添加到

层

，而不使用它，因为您将其转换为GeoJSON数据，并使用该数据创建了一个新层

只需创建以下结构，以便存储的数据稍后可以转换为GeoJSON（如果您需要该功能）：

layer.feature.type=“feature”

和

layer.feature.properties

var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'，
osmAttrib='&复制；投稿人,，
osm=L.tileLayer（osmUrl{
maxZoom:18，
署名：奥斯马特里布
});
map=L.map（'map'{
层：[osm]，
中间：[31.9500,35.9333]，
缩放：15
});
var drawnItems=L.geoJson（）.addTo（map）；
map.addControl（新的L.Control.Draw({
编辑：{
功能组：drawnItems
}
}));
map.on（'draw:created'，函数（事件）{
var layer=event.layer，
feature=layer.feature=layer.feature |{}；
feature.type=feature.type | |“feature”；
var props=feature.properties=feature.properties | |{}；
props.desc=null；
props.image=null；
drawnItems.addLayer（层）；
添加弹出窗口（层）；
});
功能添加弹出窗口（层）{
var content=document.createElement（“textarea”）；
content.addEventListener（“键控”，函数（）{
layer.feature.properties.desc=content.value；
});
layer.on（“popupopen”，函数（）{
content.value=layer.feature.properties.desc；
content.focus（）；
});
layer.bindPopup（content.openPopup（）；
}

演示：

编辑：以前的代码实际上没有很好地实现GeoJSON

属性

功能（由于缺少

layer.feature.type=“feature”

，因此保存在

geometry

上，而不是

feature

，另请参见）