web-dev-qa-db-ja.com

完成したポリゴンポイントleaflet.drawをmysqlテーブルに保存する方法

Leaflet.drawを使用してリージョンのアウトラインを作成したいと思います。私はこれをうまく機能させることができました： https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-draw/

次に、各ポリゴンのデータをmysqlテーブルに保存します。データのエクスポート方法と実行するフォーマットに少しこだわっています。

可能であれば、将来的にデータをマップボックス/リーフレットマップに戻したいので、geojsonのようなものが良いと思います。

mysqlleafletmapbox
20
user3703511

したがって、draw：createdを使用してレイヤーをキャプチャし、それをgeojsonに変換してから文字列化してデータベースに保存できます。私はこれを一度だけやった、それは汚れていたが、うまくいった。

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);
});
28
Michael Evans

座標を収集する場合は、次の方法で行うことができます。

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;
};
6
martynas
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);
2
Lin Vic

GeoJSONを使用する場合は、@ Michael Evansメソッドが機能するはずです。

シェイプごとにLatLngsポイントを保存する場合は、次のようにします。

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.

円の半径を忘れないでください

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

PSそのステートメントは適切なフォーマットを取得しない場合がありますが、要点はわかります。 （またはむしろ、半径と点;-)

1
bds

連想配列+円の半径としてシェアを取得

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