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。

Leaflet的矩形延伸Polygon。多边形延伸Polyline。

因此，为了获得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); });

Answer 3

map.on(L.Draw.Event.CREATED, function (e) {

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

    console.log(layer.getLatLngs())

});

Answer 4

应注意，e.layerType包含正在创建的形状类型。
诸如getLatLngs和getLatLng之类的方法特定于shapetype。

这些是根据打字稿定义文件在图层中允许使用的不同类型

Circle | CircleMarker | Marker | Polygon | Polyline | Rectangle;

e.layerType的可能值为（根据打字稿定义文件）

circle, marker, polygon, polyline, rectangle

因此，您始终可以使用e.layer.toGeoJSON（）。geometry.coordinates获取坐标。
但是您需要在e.layerType-s之间切换，因为圆geojson不包含半径，因此您需要使用getRadius获取它。
进一步注意，getLatLngs返回 UN 闭合多边形的 LatLng 数组，而toGeoJSON（）。geometry.coordinates返回具有闭合多边形的坐标为 LngLat -arrray。

// console.log((<any>e.layer).getLatLngs()); // polyline // console.log((<any>e.layer).getLatLng()); // circle // mind the s at the end of the function... map.on('draw:created', function(e:L.DrawEvents.Created) { console.log('On draw:created', e.target); console.log(e.type, e); console.log(e.layerType); // console.log((<any>e.layer).getLatLngs()); // polyline // console.log((<any>e.layer).getLatLng()); // circle // e.layerType // polygon, circle, etc. // polygon // e.layer.getLatLngs() // circle // e.layer.getLatLng() // e.layer.getRadius() // e.layer.toGeoJSON().geometry.type // is point if circle // e.layer.toGeoJSON().geometry.coordinates let type = e.layerType, layer = e.layer; drawnItems.addLayer(layer); });

Leaflet.Draw矩形的坐标

4 个答案: