Leafletの座標矩形

Question

矩形の座標をmouseClickで取得できるのですか？矩形のすべての角がありますか？

Answer 1

参照イベントオブジェクト（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()。

Answer 2

Leaflet.draw pluginは、標準Leaflet's L.Rectangleを使用します。

リーフレットの長方形は、Polygonに拡張されています。ポリゴンはPolylineまで拡張されます。

したがって、Leaflet.drawの四角形の座標を取得するには、ポリラインのメソッドgetLatLngs()を使用して、パス内の点の配列を返します。

例：なぜlayer.toGeoJSON（）

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); 
});