Leaflet.Draw使用GeoJson保存数据

Question

Leaflet.Draw使用GeoJson保存数据

asb*_*nOR 4 javascript json geojson leaflet leaflet.draw

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

Run Code Online (Sandbox Code Playgroud)

我添加了 leaflet.draw.js 和 leaflet.draw.css，我可以从外部 geoJson 文件设置地图；但我一生都无法弄清楚如何将输入 html 保存到 geoJson 功能，因为 featureGroup DrawingItems 将导出长和纬度，但不会导出 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)
    });

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

fly*_*ire 5

从包含完整演示的传单绘制中保存。

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，3 月前
查看次数：	7134 次
最近记录：	5 年，4 月前