geoJson 层保存 [for send DB] 在 map-Leaflet-Draw 上绘制的特征

Question

我用了this method，但是

var features = [];
map.on('draw:created', function (e) {
  drawnItems.addLayer(e.layer);
  var layers = drawnItems._layers;
  for (var key in layers) features.push(layers[key].toGeoJSON());
  console.log(drawnItems)
});

但是控制台日志中出现如下错误：

Object { options: Object, _layers: Object, _initHooksCalled: true, _leaflet_id: 24, _map: Object, _leaflet_events: Object }

当我尝试以下代码时：

        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
            map = new L.Map('map', {layers: [osm], center: new L.LatLng(-37.7772, 175.2756), zoom: 15 });

        var drawnItems = L.geoJson();
        map.addLayer(drawnItems);

        var drawControl = new L.Control.Draw({
            draw: {
                position: 'topleft',
                polygon: {
                    title: 'Draw a sexy polygon!',
                    allowIntersection: false,
                    drawError: {
                        color: '#b00b00',
                        timeout: 1000
                    },
                    shapeOptions: {
                        color: '#bada55'
                    },
                    showArea: true
                },
                polyline: {
                    metric: false
                },
                circle: {
                    shapeOptions: {
                        color: '#662d91'
                    }
                }
            },
            edit: {
                featureGroup: drawnItems
            }
        });
        map.addControl(drawControl);

        var geojson_for_FeatureCollection = drawnItems.toGeoJSON();

//to get the drawn item geo data--for poly line
//initialize the array for collect drawn items.
var features = [];


map.on('draw:created', function (e) {

    var type = e.layerType,
        layer = e.layer;

    if (type === 'polyline') {
        // structure the geojson object
        var geojson = {};
        geojson['type'] = 'Feature';
        geojson['geometry'] = {};
        geojson['geometry']['type'] = "Polyline";

        // export the coordinates from the layer
        coordinates = [];
        latlngs = layer.getLatLngs();
        for (var i = 0; i < latlngs.length; i++) {
            coordinates.push([latlngs[i].lng, latlngs[i].lat])
        }

        // push the coordinates to the json geometry
        geojson['geometry']['coordinates'] = [coordinates];

        // Finally, show the poly as a geojson object in the console
        console.log(JSON.stringify(geojson));

    }
    else if 
//to get the drawn item geo data--for polygon   
    (type === 'polygon') {
        // structure the geojson object
        var geojson = {};
        geojson['type'] = 'Feature';
        geojson['geometry'] = {};
        geojson['geometry']['type'] = "Polygon";

        // export the coordinates from the layer
        coordinates = [];
        latlngs = layer.getLatLngs();
        for (var i = 0; i < latlngs.length; i++) {
            coordinates.push([latlngs[i].lng, latlngs[i].lat])
        }

        // push the coordinates to the json geometry
        geojson['geometry']['coordinates'] = [coordinates];

        // Finally, show the poly as a geojson object in the console
       // console.log(JSON.stringify(geojson));
var down = JSON.stringify(geojson);
var a = document.createElement('a');
a.href = 'data:' + down;
a.download = 'down.json';
a.innerHTML = 'download JSON';

var container = document.getElementById('container');
container.appendChild(a);

console.log(down);
    }

    drawnItems.addLayer(layer);

});

//testing.........for featureGroup geo json once  download
map.on('draw:edited', function (e) {
  var layers = drawnItems._layers;
  for (var key in layers) features.push(layers[key].toGeoJSON());
  console.log(drawnItems)
});

map.on('draw:created', function (e) {
  drawnItems.addLayer(e.layer);
  var layers = drawnItems._layers;
  for (var key in layers) features.push(layers[key].toGeoJSON());
  console.log(JSON.stringify(geojson_for_FeatureCollection));
});`enter code here`

    </script>

控制台显示：

{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[175.26536464691162,-37.77241087974657],[175.26291847229004,-37.778007869815774],[175.273175239563,-37.77410698208879]]]}}

{"type":"FeatureCollection","features":[]}

我想知道的是如何将绘制的项目附加到 geojson 对象以将其发送到数据库？

Answer 1

L.LayerGroup、L.FeatureGroup 和 L.GeoJSON 有一个名为 toGeoJSON 的方法，其中 returns 一个 GeoJSON FeatureCollection:

var collection = drawnItems.toGeoJSON();

Returns a GeoJSON representation of the layer group (GeoJSON FeatureCollection).

http://leafletjs.com/reference.html#layergroup-togeojson

Answer 2

GetShares 并将它们保存为 geoJson

var getShapes = function (drawnItems) {

        var shapes = [];
        shapes["polyline"] = [];
        shapes["circle"] = [];
        shapes["marker"] = [];

        drawnItems.eachLayer(function (layer) {

            // Note: Rectangle extends Polygon. Polygon extends Polyline.
            // Therefore, all of them are instances of Polyline
            if (layer instanceof L.Polyline) {
                shapes["polyline"].push(layer.toGeoJSON())
            }

            if (layer instanceof L.Circle) {
                shapes["circle"].push([layer.toGeoJSON()])
            }

            if (layer instanceof L.Marker) {
                shapes["marker"].push([layer.toGeoJSON()], layer.getRadius());
            }

        });

        return shapes;
    };

geoJson 层保存 [for send DB] 在 map-Leaflet-Draw 上绘制的特征

geoJson layer to save [for send DB] the features drawn on the map-Leaflet-Draw

javascript

json

leaflet

leaflet.draw