Как создать LatLngBounds вокруг точки LatLng с расстоянием в метрах?

Question

Я хотел бы создать квадрат (LatLngBounds) вокруг центральной точки (LatLng) на расстоянии X метров.

Answer 1

Использовать L.LatLng.toBounds() method, например.

var center = L.latLng(40,-3); 
var bounds = center.toBounds(500); 

или

var bounds = L.latLng(40,-3).toBounds(500) 

Answer 2

Следующее решение демонстрирует, как сделать такой квадрат:

• вычислить границы рисуя круг в точке с радиусом указано в метрах
• дро квадрат с использованием границ окружности

Пример

function drawSquare(map, center, properties, sideLengthInMeters){ 
    var circle = L.circle(center, sideLengthInMeters/2).addTo(map); 
    var bounds = circle.getBounds(); 
    map.removeLayer(circle); //hide circle 
    var rect = L.rectangle(bounds, properties).addTo(map); 
    return rect; 
} 

Demo

var center = [59.33,18.02]; 
 

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

 
// Set up the OSM layer 
 
L.tileLayer(
 
     'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
 
     { maxZoom: 18 }).addTo(map); 
 

 
    
 
L.marker(center).addTo(map); 
 

 
var sideInMeters = 10000; 
 
drawSquare(map,center,{ color: 'blue', weight: 1 }, sideInMeters); 
 

 

 
function drawSquare(map, center, properties, sideLengthInMeters){ 
 
    var circle = L.circle(center, sideLengthInMeters/2).addTo(map); 
 
    var bounds = circle.getBounds(); 
 
    map.removeLayer(circle); //hide circle 
 
    var rect = L.rectangle(bounds, properties).addTo(map); 
 
    return rect; 
 
}

#map { 
 
    height: 400px; 
 
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
 
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> 
 
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
<script type="text/javascript" src="app.js"></script> 
 
<div id="map"></div>