给出中心和方形宽度的小叶方形 [英] leaflet square given centre and square width

问题描述

在传单上我可以根据中心和半径轻松创建一个新圆圈：

On Leaflet I can create a new circle easily given the centre and the radius:

// 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);

创建并绘制上面的圆圈没有任何问题，所以这就是全部。

The circle above is created and drawn without problems, so it is all.

但是，如果我现在想要创建并绘制一个界定圆圈的矩形，它就不起作用了。这是我做的：

However, if I wanted now to create and draw a rectangle that which bounds the circle, it does not work. Here is what I did:

// 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米无关。此外，看起来矩形的大小取决于地图的缩放级别。圆圈没有出现这些问题。

The size of the rectangle that I obtain has nothing to do with 500 metres. Also, it looks like the size of the rectangle depends on the zoom level the map is. None of these problems arose for the circle.

我怀疑我将纬度/经度转换为点的方式，反之亦然。

I suspect the way I transform the latitude/longitude to point and viceversa is wrong.

推荐答案

只需使用 L.Circle getBounds 方法>继承自 L.Path ：

Just use the getBounds method that L.Circle inherits from L.Path:

返回路径的LatLngBounds。 / p>

Returns the LatLngBounds of the path.

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

Working example on Plunker: http://plnkr.co/edit/n55xLOIohNMY6sVA3GLT?p=preview

这篇关于给出中心和方形宽度的小叶方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！