Leaflet.Draw 使用 GeoJson 保存数据答案

【问题标题】：Leaflet.Draw saving data with GeoJsonLeaflet.Draw 使用 GeoJson 保存数据
【发布时间】：2019-09-26 23:55:45
【问题描述】：

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 文件设置地图；但我一生都无法弄清楚如何将输入的 html 保存到 geoJson 功能，因为 featureGroup 的drawedItems 将导出 long 和 lat 但不会导出 html 功能。

我希望将 featureGroup 标记附加到 geoJson 文件中，然后该文件将显示在实时地图上。任何帮助表示赞赏

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

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

【问题讨论】：

您好，您可以在 geoman.io 上查看我是如何使用 Leaflet-Geoman 完成的，也许该库有帮助：github.com/geoman-io/leaflet-geoman

标签： javascript json leaflet geojson leaflet.draw

【解决方案1】：

来自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>

【讨论】：