更新 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.

谁能帮我解决这个问题?

Can any one help me on this?

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 功能(保存在 geometry 而不是 feature，由于缺少 layer.feature.type = "Feature"，另请参阅 Leaflet Draw 在将 FeatureGroup 转换为 GeoJson 时不采用属性)

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屋！