web-dev-qa-db-fra.com

Comment sauvegarder une feuille de polygone terminée leaflet.draw dans la table mysql

Je voudrais utiliser leaflet.draw pour créer des contours de régions. J'ai réussi à faire en sorte que tout fonctionne bien: https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-draw/

Maintenant, j'aimerais enregistrer les données de chaque polygone dans une table mysql. Je ne sais pas trop comment exporter des données et le format dans lequel je devrais le faire. 

Si possible, j'aimerais extraire les données dans une carte mapbox/leaflet à l'avenir, alors pensez à quelque chose comme geojson serait bien. 

mysqlleafletmapbox
19
user3703511

Vous pouvez donc utiliser draw: created pour capturer la couche, la convertir en geojson puis la lier pour la sauvegarder dans votre base de données. Je ne l'ai fait qu'une fois et c'était sale mais ça a marché.

map.on('draw:created', function (e) {
  var type = e.layerType;
  var layer = e.layer;

  var shape = layer.toGeoJSON()
  var shape_for_db = JSON.stringify(shape);
});
27
Michael Evans

Si vous voulez collecter les coordonnées, vous pouvez le faire de cette façon:

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

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

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

    drawnItems.addLayer(layer);

    var shapes = getShapes(drawnItems);

    // Process them any way you want and save to DB
    ...

});

var getShapes = function(drawnItems) {

    var shapes = [];

    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.Push(layer.getLatLngs())
        }

        if (layer instanceof L.Circle) {
            shapes.Push([layer.getLatLng()])
        }

        if (layer instanceof L.Marker) {
            shapes.Push([layer.getLatLng()]);
        }

    });

    return shapes;
};
5
martynas

La méthode @ Michael Evans devrait fonctionner si vous voulez utiliser GeoJSON.

Si vous souhaitez enregistrer des points LatLngs pour chaque forme, vous pouvez procéder comme suit:

map.on('draw:created', function (e) {
    var type = e.layerType;
    var layer = e.layer;
    var latLngs;

    if (type === 'circle') {
       latLngs = layer.getLatLng();
    }
    else
       latLngs = layer.getLatLngs(); // Returns an array of the points in the path.

    // process latLngs as you see fit and then save
}
1
pk.

N'oubliez pas le rayon du cercle 

            if (layer instanceof L.Circle) {
                shapes.Push([layer.getLatLng()],layer.getRadius())
            }

PS cette déclaration peut ne pas obtenir la bonne mise en forme mais vous voyez le point. (Ou plutôt le rayon ainsi que le point ;-)

1
bds

Obtenir les partages sous forme de tableau associatif + rayon de cercle

  map.on('draw:created', function (e) {
        var type = e.layerType,
                layer = e.layer;

        if (type === 'marker') {
            layer.bindPopup('Call Point!');
        }

        drawnItems.addLayer(layer);

        var shapes = getShapes(drawnItems);

        console.log("shapes",shapes);




    });


    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.getLatLngs())
            }

            if (layer instanceof L.Circle) {
                shapes["circle"].Push([layer.getLatLng()])
            }

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

        });

        return shapes;
    };
1
Naumche Ivanovski
map.on('draw:created', function (e) {
  var type = e.layerType;
  var layer = e.layer;

  var shape = layer.toGeoJSON()
  var shape_for_db = JSON.stringify(shape);
});

// restore
L.geoJSON(JSON.parse(shape_for_db)).addTo(mymap);
1
Lin Vic

Pour moi cela a fonctionné ceci: 

map.on(L.Draw.Event.CREATED, function (e) {
    map.addLayer(e.layer);
    var points = e.layer.getLatLngs();
  puncte1=points.join(',');
  puncte1=puncte1.toString();
  //puncte1 = puncte1.replace(/[{}]/g, '');
  puncte1=points.join(',').match(/([\d\.]+)/g).join(',')
//this is the field where u want to add the coordinates
$('#geo').val(puncte1);
});
0
Robinson Chera