Обновить свойства geojson, чтобы использовать его с брошюрой

У меня есть требование использования leaflet.js для добавления карты на мой сайт. На сайте есть вид администрирования, где администратор может добавлять маркеры и добавлять описание и изображение к каждому маркеру.

Я использовал плагин leaflet.draw, а в событии создания я пытаюсь обновить объект GeoJSON, который я использовал с помощью event.layer.toGeoJSON(), чтобы добавить некоторые свойства, такие как изображение и текст, но не повезло.

Может ли кто-нибудь помочь мне в этом?

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 osm = L.tileLayer(osmUrl, {
 maxZoom: 18,
 attribution: osmAttrib
 });
map = new L.Map('map', {
 layers: [osm],
 center: new L.LatLng(31.9500, 35.9333),
 zoom: 15
 }),
 drawnItems = L.geoJson().addTo(map);
map.addControl(new L.Control.Draw({
 edit: {
 featureGroup: drawnItems
 }
}));
map.on('draw:created', function(event) {
 var layer = event.layer;
 var json = event.layer.toGeoJSON();
 json.properties.desc = null;
 json.properties.image = null;
 drawnItems.addLayer(L.GeoJSON.geometryToLayer(json));
 addPopup(layer);
});
function addPopup(layer) {
 var content = '';
 layer.bindPopup(content).openPopup();
 alert('out');
}
function saveData(layer) {
 var markerDesc = $('#markerDesc').val();
 var json = layer.toGeoJSON();
 json.feature.properties.desc = markerDesc;
}
1 ответ

Нет необходимости в вашем слушателе "draw:created" для преобразования в GeoJSON, а затем обратно на слой.

Кстати, вы затем добавляете всплывающее окно в layer, в то время как вы ничего не делаете с ним, поскольку вы преобразовали его в данные GeoJSON и создали новый слой из этих данных.

Просто создайте следующую структуру, чтобы впоследствии сохраненные данные могли быть преобразованы в GeoJSON (если вам когда-либо понадобится эта функция): layer.feature.type = "Feature" и layer.feature.properties.

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 osm = L.tileLayer(osmUrl, {
 maxZoom: 18,
 attribution: osmAttrib
 });
map = L.map('map', {
 layers: [osm],
 center: [31.9500, 35.9333],
 zoom: 15
});
var drawnItems = L.geoJson().addTo(map);
map.addControl(new L.Control.Draw({
 edit: {
 featureGroup: drawnItems
 }
}));
map.on('draw:created', function (event) {
 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(layer);
 addPopup(layer);
});
function addPopup(layer) {
 var content = document.createElement("textarea");
 content.addEventListener("*****", function () {
 layer.feature.properties.desc = content.value;
 });
 layer.on("popupopen", function () {
 content.value = layer.feature.properties.desc;
 content.focus();
 });
 layer.bindPopup(content).openPopup();
}

Демо: https://jsfiddle.net/ve2huzxw/314/

Отредактировано: предыдущий код фактически не реализовал функциональность GeoJSON properties (был сохранен на geometry вместо feature, из-за отсутствия layer.feature.type = "Feature", см. также Листовка Ничья не принимает свойства при преобразовании FeatureGroup в GeoJson)

licensed under cc by-sa 3.0 with attribution.