传单正方形给定中心和正方形宽度

2022-01-12 00:00:00 leaflet latitude-longitude javascript angular-leaflet-directive

在 Leaflet 上，给定中心和半径，我可以轻松创建一个新圆:

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继承自L.PathgetBounds方法即可代码>:

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

返回路径的 LatLngBounds.

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

相关文章