обновить свойства geojson, чтобы использовать его с листовкой

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

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

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

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; <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 = '<input id="markerDesc" type="text"/ onblur="saveData(layer);">';
    layer.bindPopup(content).openPopup();
    alert('out');
}

function saveData(layer) {
    var markerDesc = $('#markerDesc').val();
    var json = layer.toGeoJSON();
    json.feature.properties.desc = markerDesc;
}

leaflet geojson leaflet.draw
person Moon123    schedule 12.01.2016    source источник

Ответы (1)


arrow_upward
5
arrow_downward

В вашем "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 = '&copy; <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("keyup", 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", см. также Leaflet Draw не использует свойства при преобразовании FeatureGroup в GeoJson)

person ghybs    schedule 12.01.2016