gpt4 book ai didi

javascript - Leaflet.Draw 使用 GeoJson 保存数据

转载 作者:行者123 更新时间:2023-12-04 01:39:19 25 4
gpt4 key购买 nike

map.addControl(new L.Control.Draw({
draw: {
polygon: false,
polyline: false,
rectangle: false,
circle: false

},
edit: {featureGroup: drawnItems}

}));

map.on('draw:created', function(e) {
var type = e.layerType;
var layer = e.layer;
var idIW = L.popup();
var content = '<span><b>Title</b></span><br/><input id="salrepnu" type="text"/><br/><br/><span><b>Report<b/></span><br/><textarea id="salrep" cols="25" rows="5"></textarea><br/><br/><input type="button" id="okBtn" value="Save" onclick="saveIdIW()"/>';
idIW.setContent(content);
idIW.setLatLng(layer.getLatLng());
idIW.openOn(map);
drawnItems.addLayer(layer)
});

function saveIdIW() {
var sName = $('#salrepnu').val();
var salRep = $('#salrep').val();
var drawings = drawnItems.getLayers(); //drawnItems is a container for the drawn objects
drawings[drawings.length - 1].title = sName;
drawings[drawings.length - 1].content = salRep;
map.closePopup();
};

//Export
document.getElementById('export').onclick = function(e) {
// Extract GeoJson from featureGroup
var data = drawnItems.toGeoJSON();
// Stringify the GeoJson
var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
// Create export
document.getElementById('export').setAttribute('href', 'data:' + convertedData);
document.getElementById('export').setAttribute('download', 'drawnItems.geojson');
}

我添加了 leaflet.draw.js 和 leaflet.draw.css,我可以从外部 geoJson 文件设置 map ;但我一辈子都想不出如何将输入的 html 保存到 geoJson 功能,因为 featureGroup drawnItems 将导出 long 和 lat 而不是 html 功能。

我希望将 featureGroup 标记附加到 geoJson 文件,然后该文件将显示在实时 map 上。感谢任何帮助

map.on('draw:created', function(e) {
var type = e.layerType;
var layer = e.layer;
var feature = layer.feature = layer.feature || {}; // Intialize layer.feature

feature.type = feature.type || "Feature"; // Intialize fueature.type
var props = feature.properties = feature.properties || {}; // Intialize feature.properties

if (type === 'marker'){
props.repnumb = prompt("Sales Report No. ");
props.sales = prompt("Sales");
var popContent = "<p><b>SALUTE Report No. " +
props.repnumb + "</b></br>" +
"<b>Sales: " + props.sales + "</b></p>";
layer.bindPopup(popContent);
}
drawnItems.addLayer(layer)
});

我想出了如何创建干净的特征输入,但格式部门似乎缺少提示方法。有一个提出问题的弹出窗口,但至少问题在设置后现在出现在标记上。

最佳答案

来自 save from leaflet draw其中包含 Full demo .

...
<body>

<a href='#' id='export'>Export Features</a>

<script>

document.getElementById('export').onclick = function(e) {
// Extract GeoJson from featureGroup
var data = featureGroup.toGeoJSON();

// Stringify the GeoJson
var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));

// Create export
document.getElementById('export').setAttribute('href', 'data:' + convertedData);
document.getElementById('export').setAttribute('download','data.geojson');
}
</script>

</body>

关于javascript - Leaflet.Draw 使用 GeoJson 保存数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58126090/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com