マウスクリックで長方形の座標を取得することは可能ですか?長方形のすべての角がありますか?
イベントオブジェクトを参照してください( http://leafletjs.com/reference.html#event-objects ):
_var map = L.map('map').setView([53.902257, 27.561640], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var bounds = [[53.912257, 27.581640], [53.902257, 27.561640]];
var rect = L.rectangle(bounds, {color: 'blue', weight: 1}).on('click', function (e) {
// There event is event object
// there e.type === 'click'
// there e.lanlng === L.LatLng on map
// there e.target.getLatLngs() - your rectangle coordinates
// but e.target !== rect
console.info(e);
}).addTo(map);
_
e.target.getLatLngs()
を使用します。
_Leaflet.draw
_プラグイン 標準を使用 リーフレットのL.Rectangle 。
リーフレットの長方形は ポリゴン に拡張されます。ポリゴンは ポリライン を拡張します。
したがって、Leaflet.drawの長方形の座標を取得するには、パス内のポイントの配列を返すPolylineのメソッドgetLatLngs()
を使用できます。
例:
_var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'rectangle') {
layer.on('mouseover', function() {
alert(layer.getLatLngs());
});
}
drawnItems.addLayer(layer);
});
_
map.on(L.Draw.Event.CREATED, function (e) {
var layer = e.layer;
drawnItems.addLayer(layer);
console.log(layer.getLatLngs())
});