квадрат листовки с заданным центром и шириной квадрата

В Leaflet я могу легко создать новый круг, учитывая центр и радиус:

// Circle
var radius = 500; // [metres]
var circleLocation = new L.LatLng(centreLat, centreLon);
var circleOptions = {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
};
var circle = new L.Circle(circleLocation, radius, circleOptions);
map.addLayer(circle);

Круг выше создается и рисуется без проблем, так что все.

Однако, если бы я хотел сейчас создать и нарисовать прямоугольник, который ограничивает круг, это не сработает. Вот что я сделал:

// Rectangle
var halfside = radius;   // It was 500 metres as reported above
// convert from latlng to a point (<-- I think the problem is here!)
var centre_point = map.latLngToContainerPoint([newCentreLat, newCentreLon]);
// Compute SouthWest and NorthEast points
var sw_point = L.point([centre_point.x - halfside, centre_point.y - halfside]);
var ne_point = L.point([centre_point.x + halfside, centre_point.y + halfside]);
// Convert the obtained points to latlng
var sw_LatLng = map.containerPointToLatLng(sw_point);
var ne_LatLng = map.containerPointToLatLng(ne_point);
// Create bound
var bounds = [sw_LatLng, ne_LatLng];
var rectangleOptions = {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
};
var rectangle = L.rectangle(bounds, rectangleOptions);
map.addLayer(rectangle);

Размер прямоугольника, который я получаю, не имеет ничего общего с 500 метрами. Кроме того, похоже, что размер прямоугольника зависит от уровня масштабирования карты. Ни одна из этих проблем не возникла для круга.

Я подозреваю, что способ преобразования широты/долготы в точку и наоборот неверен.


javascript leaflet latitude-longitude angular-leaflet-directive
person user1472709    schedule 04.02.2016    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Просто используйте метод getBounds, который L.Circle наследует от L.Path:

Возвращает LatLngBounds пути.

http://leafletjs.com/reference.html#path-getbounds

var circle = new L.Circle([0,0], 500).addTo(map);

var rectangle = new L.Rectangle(circle.getBounds()).addTo(map);

Рабочий пример на Plunker: http://plnkr.co/edit/n55xLOIohNMY6sVA3GLT?p=preview

person iH8    schedule 04.02.2016
comment
Это решение требует промежуточной формы (круг), чтобы найти квадрат. Тем не менее, я приму этот ответ, поскольку он аккуратный и элегантный. Благодарю вас! - person user1472709; 04.02.2016
comment
Нет проблем, нет, спасибо. Да, для этого нужно L.Circle, но если вы хотите обойтись без него, это очень быстро превращается в очень сложное решение. Вы можете взглянуть на строку 23 метода L.Circle getBounds и вывести оттуда то, что нужно для правильного вычисления границ. Я думаю, вы согласитесь, что делать это таким образом проще и чище. Вам не нужно объявлять круг как var и добавлять его на карту, вы можете просто сделать: L.rectangle(L.circle([0,0], 500).getBounds()).addTo(map); :) - person iH8; 04.02.2016
comment
Я полностью согласен с тобой. Ваше решение очень красиво скрывает всю сложность проблемы. Еще раз спасибо! - person user1472709; 04.02.2016

arrow_upward
0
arrow_downward

Я получал Невозможно прочитать свойство 'layerPointToLatLng' неопределенной ошибки, поэтому я внес некоторые изменения в ответ iH8.

var grp=L.featureGroup().addTo(map);
var circle=L.circle([0,0],{radius:<circle radius>}).addTo(grp);
L.rectangle(circle.getBounds()).addTo(this.bufferMap);
map.removeLayer(grp);
person faisal    schedule 27.05.2021