当前位置:  开发笔记 > 前端 > 正文

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

如何解决《更新geojson的属性以将其与传单一起使用》经验,为你挑选了1个好方法。

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

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

谁可以帮我这个事?

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib = '© OpenStreetMap 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;
}

ghybs.. 5

您的"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 = '© OpenStreetMap 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,在将FeatureGroup转换为GeoJson时layer.feature.type = "Feature",Leaflet Draw不采用属性)



1> ghybs..:

您的"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 = '© OpenStreetMap 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,在将FeatureGroup转换为GeoJson时layer.feature.type = "Feature",Leaflet Draw不采用属性)

推荐阅读
雯颜哥_135
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有