Получить координаты прямоугольника в Leaflet

Я хочу получить координаты каждого угла прямоугольника, который пользователь будет рисовать на карте (листовке).
Цель состоит в том, чтобы извлечь максимальную / минимальную широту и максимальную / минимальную долготу.

Вот код, под которым я показываю свою карту и рисую свой прямоугольник с помощью 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/[email protected]/dist/leaflet.css">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.draw.css" />
        <script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
        <script src="https://unpkg.com/[email protected]/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

У тебя есть какой-нибудь совет для меня? Или информацию?
Заранее спасибо!


javascript coordinates html leaflet leaflet-draw
person A-d-r-i    schedule 26.10.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать эту функцию:

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];
}
person Falke Design    schedule 26.10.2020
comment
Спасибо за ответ;) Вы можете помочь мне разместить эту функцию в моем скрипте? Я не могу найти никакой информации. Еще раз спасибо! - person A-d-r-i; 27.10.2020
comment
Обновил ответ, не забудьте проверить ответ;) - person Falke Design; 27.10.2020
comment
Wo! Это абсолютно идеально: именно то, что я просил! Большое спасибо Falke Design. - person A-d-r-i; 27.10.2020

arrow_upward
0
arrow_downward

Используйте getCenter () вместо getLatLng ()

РЕДАКТИРОВАТЬ: я вижу проблему, в которой вам нужен каждый угол прямоугольника, getCenter не решает это

Также рекомендую для редактирования листок-геоман вместо рисования листовки. (Но это только мое мнение :) )

person Henrik Maaland    schedule 26.10.2020
comment
Спасибо за ответ! Но я не пытаюсь узнать координаты центра моего прямоугольника, я пытаюсь узнать координаты четырех углов, которые я разделю позже (Я указываю, что у меня нет проблем с получением координат ). Спасибо за совет, но я не собираюсь редактировать карту онлайн, просто нарисуйте прямоугольник, поэтому простоты Leaflet-Draw для меня более чем достаточно. - person A-d-r-i; 27.10.2020