更新geojson的属性以将其与传单一起使用 [英] update properties of geojson to use it with leaflet

问题描述

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

I have a requirement of using leaflet.js to add a map to my site. The site has an administration view where an admin can add markers and add description and image to each marker.

我使用了leaflet.draw插件，在创建事件中，我尝试更新使用event.layer.toGeoJSON()获得的GeoJSON对象，以添加一些属性，例如图像和文本，但是没有运气.

I used the leaflet.draw plugin, and on the create event I try to update the GeoJSON object I got using event.layer.toGeoJSON() to add some properties like image and text but with no luck.

有人可以帮我吗?

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;
}

推荐答案

您的"draw:created"侦听器中无需将其转换为GeoJSON，然后再返回到图层.

There is no need in your "draw:created" listener to convert into GeoJSON and then back to a layer.

顺便说一句，然后将弹出窗口添加到layer，而您无需对其进行任何操作，因为您已将其转换为GeoJSON数据并从该数据中创建了一个新层.

By the way, you then add a popup to layer whereas you do not do anything with it, since you transformed it into GeoJSON data and created a new layer out of that data.

只需创建以下结构，以便稍后将存储的数据转换为GeoJSON(如果您需要此功能):layer.feature.type = "Feature"和layer.feature.properties.

Simply create the following structure, so that the stored data can be converted into GeoJSON later on (if you ever need that functionality): layer.feature.type = "Feature" and 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功能(由于缺少layer.feature.type = "Feature"，因此保存在geometry而不是feature上，另请参见将FeatureGroup转换为GeoJson时，Leaflet Draw不采用属性)

Edited: previous code did not actually implemented well the GeoJSON properties functionality (was saved on geometry instead of feature, due to missing layer.feature.type = "Feature", see also Leaflet Draw not taking properties when converting FeatureGroup to GeoJson)

这篇关于更新geojson的属性以将其与传单一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！