Leaflet.Draw 矩形的坐标答案

【问题标题】：Coordinates of Leaflet.Draw rectangleLeaflet.Draw 矩形的坐标
【发布时间】：2013-03-07 07:52:27
【问题描述】：

是否可以在鼠标点击时获取矩形的坐标，所以我有矩形的所有角？

【问题讨论】：

【解决方案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()。

【讨论】：

请显示边界语义，我的输入是{ne:{lat: -23.5601806640625lon: -46.64794921875}, sw:{lat: -23.565673828125,lon: -46.658935546875}}。
谢谢。多年后这对我有帮助:)
当我尝试一些 mapBounds.extend() 时，一个不错的小 sn-p。只需为每组新的边界绘制一个不同的框，然后看看它是如何适应地图的。谢谢，+1

【解决方案2】：

Leaflet.draw plugin 使用标准的Leaflet's L.Rectangle。

传单的矩形扩展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);
});

【讨论】：

你知道为什么 layer.toGeoJSON().geometry.coordinates 会添加另一个坐标吗？
@Spir: layer.getLatLngs() 将返回一个未闭合多边形的 LatLng 数组。 layer.toGeoJSON().geometry.coordinates 将返回 CLOSED 多边形的 LngLat 数组。（最后一点就是第一点）
另外，如果形状是圆形，layer.getLatLngs() 将不可用。一个圆将改为具有 layer.getLatLng()，但 ToGeoJSON().geometry.coordinates 始终存在。

【解决方案3】：

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

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

    console.log(layer.getLatLngs())

});

【讨论】：

【解决方案4】：

需要注意的是 e.layerType 包含正在创建的形状类型。
getLatLngs 和 getLatLng 等方法特定于 shapetype。

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

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

并且 e.layerType 的可能值是（根据 typescript 定义文件）

circle, marker, polygon, polyline, rectangle

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

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

【讨论】：