Leaflet.Draw сохраняет данные с помощью GeoJson

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 будут экспортировать длинные и широчайшие, но не 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)
    });

Я понял, как создавать чистые входные данные для функций, но метод подсказок, похоже, отсутствует в отделе формата. Есть всплывающее окно, которое задает вопрос, но, по крайней мере, вопрос появляется на маркере теперь, когда он установлен.


javascript json leaflet geojson leaflet.draw
person asbrandssonOR    schedule 26.09.2019    source источник
comment
привет, вы можете проверить, как я сделал это с Leaflet-Geoman на geoman.io Может быть, эта библиотека поможет: github.com/geoman-io/leaflet-geoman   -  person ProblemsOfSumit    schedule 22.10.2019

Ответы (1)


arrow_upward
4
arrow_downward

Из сохранить из брошюры, которая содержит Полная демонстрация.

...
<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>
person flywire    schedule 05.09.2020