web-dev-qa-db-ja.com

リーフレットの座標。長方形を描く

マウスクリックで長方形の座標を取得することは可能ですか？長方形のすべての角がありますか？

javascriptleafletleaflet.draw
14
mortenstarck

イベントオブジェクトを参照してください（ 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()を使用します。

13
tbicr

_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);
});
_
9
martynas
map.on(L.Draw.Event.CREATED, function (e) {

    var layer = e.layer;
    drawnItems.addLayer(layer);

    console.log(layer.getLatLngs())

});
0
Bashirpour