获取 Leaflet 上矩形的坐标

Question

我想要获取用户将在地图（传单）上绘制的矩形的每个角的坐标。
目标是提取 max/min 纬度和 max/min 经度。

这是我显示地图并使用 Leaflet-Draw 绘制矩形的代码：

// center of the map
var center = [46.5, 3];

// Create the map
var map = L.map('map').setView(center, 6);

// Set up the OSM layer
L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Data Â© <a href="http://osm.org/copyright">OpenStreetMap</a>',
    maxZoom: 18
  }).addTo(map);

// add a marker in the given location
//L.marker(center).addTo(map);

// Initialise the FeatureGroup to store editable layers
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

var drawPluginOptions = {
  position: 'topleft',
  draw: {
    // disable toolbar item by setting it to false
    polygon:false,
    polyline: false,
    circle: false, // Turns off this drawing tool
    rectangle: true,
    marker: false,
  },
  edit: {
    featureGroup: editableLayers, //REQUIRED!!
    remove: true
  }
};

// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw(drawPluginOptions);
map.addControl(drawControl);

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

map.on('draw:created', function(e) {
  var type = e.layerType,
    layer = e.layer;

  if (type === 'rectangle') {
        layer.on('mouseover', function() {
            var tmp = document.getElementById('ID');
            tmp.textContent = layer.getLatLngs();
            var sud = document.getElementById('SUD');
            sud.textContent = tmp.substring(7, 9);
            var est = document.getElementById('EST');
            est.textContent = tmp.substring(18, 9);


            
        });

    }

  editableLayers.addLayer(layer);

  
});

html, body { height: 100% }

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
        <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet-src.js"></script>
        <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
    </head>

    <body>
        <div id="map" style="width:100%; height:300px"></div>
        <span id="ID"></span>
        <span id="SUD"></span>
        <span id="EST"></span>

    </body>
</html>

我得到了四个角的坐标（.getLatLngs()），但是我无法对这个系列进行排序。
例如这里是结果 : LatLng(45.644768, -0.175781),LatLng(47.428087, -0.175781),LatLng(47.428087, 5.844727),LatLng(45.644768, 5.844727)

我想将每个纬度/经度存储在我将在我的网页中显示的变量中：
纬度：47.428087
经纬度：45.644768
孤独：5.844727
lonW：-0.175781

你对我有什么建议吗？还是资料？
提前致谢！

Answer 1

使用 getCenter() 而不是 getLatLng()

编辑：我看到你需要矩形的每个角的问题，getCenter 没有解决

此外，我建议 leaflet-geoman 进行编辑而不是传单绘制。（但这只是我的意见 :) )

Answer 2

您可以使用这个功能：

function getCorners(layer) {
    const corners = layer.getBounds();

    const northwest = corners.getNorthWest();
    const northeast = corners.getNorthEast();
    const southeast = corners.getSouthEast();
    const southwest = corners.getSouthWest();

    return [northwest, northeast, southeast, southwest];
}

将函数添加到脚本

map.on('draw:created', function(e) {
  var type = e.layerType,
    layer = e.layer;

  if (type === 'rectangle') {
        layer.on('mouseover', function() {
            var tmp = document.getElementById('ID');
            var c= getCorners(layer);
            tmp.textContent = "NW:"+c[0].toString()+" NE:"+c[1].toString()+" SE:"+c[2].toString()+" SW:"+c[3].toString();
            var sud = document.getElementById('SUD');
            sud.textContent = tmp.substring(7, 9);
            var est = document.getElementById('EST');
            est.textContent = tmp.substring(18, 9);
        });
}
function getCorners(layer) {
    const corners = layer.getBounds();

    const northwest = corners.getNorthWest();
    const northeast = corners.getNorthEast();
    const southeast = corners.getSouthEast();
    const southwest = corners.getSouthWest();

    return [northwest, northeast, southeast, southwest];
}

获取 Leaflet 上矩形的坐标

Get the coordinates of a rectangle on Leaflet

html

javascript

coordinates

leaflet

leaflet-draw