0

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

这是我显示地图并使用 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)

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

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

4

2 回答 2

1

您可以使用此功能：

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

将 Func 添加到脚本中

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];
}
于 2020-10-26T21:10:26.247 回答
0

使用 getCenter() 而不是 getLatLng()

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

我还推荐使用传单地理人进行编辑，而不是传单绘制。（但那只是我的个人意见 ：） ）

于 2020-10-26T20:54:55.317 回答