Leaflet.drawを使用してリージョンのアウトラインを作成したいと思います。私はこれをうまく機能させることができました: https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-draw/
次に、各ポリゴンのデータをmysqlテーブルに保存します。データのエクスポート方法と実行するフォーマットに少しこだわっています。
可能であれば、将来的にデータをマップボックス/リーフレットマップに戻したいので、geojsonのようなものが良いと思います。
したがって、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);
});
座標を収集する場合は、次の方法で行うことができます。
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;
};
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);
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
}
円の半径を忘れないでください
if (layer instanceof L.Circle) {
shapes.Push([layer.getLatLng()],layer.getRadius())
}
PSそのステートメントは適切なフォーマットを取得しない場合がありますが、要点はわかります。 (またはむしろ、半径と点;-)
連想配列+円の半径としてシェアを取得
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;
};
私にとってはこれはうまくいきました:
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);
});