Javascript 传单方形,指定中心和方形宽度

Javascript 传单方形,指定中心和方形宽度,javascript,leaflet,latitude-longitude,angular-leaflet-directive,Javascript,Leaflet,Latitude Longitude,Angular Leaflet Directive,在传单上,我可以根据中心和半径轻松创建一个新圆: // 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,

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

// 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);
//矩形
var halfside=半径;//如上所述,距离为500米

//将latlng转换为点(只需使用
getBounds
方法,该方法是
L.Circle
L.Path
继承的:

返回路径的LatLngBounds


Plunker上的工作示例:

只需使用
getBounds
方法,该方法是
L.Circle
L.Path
继承的:

返回路径的LatLngBounds

Plunker上的工作示例:

我遇到“无法读取未定义的属性'layerpointtolatng'的错误”,所以我对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);
var grp=L.featureGroup().addTo(map);
var circle=L.circle([0,0],{radius:}).addTo(grp);
L.rectangle(circle.getBounds()).addTo(this.bufferMap);
地图移除层(grp);
我遇到“无法读取未定义的属性'layerpointtolatng'的错误”,因此我对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);
var grp=L.featureGroup().addTo(map);
var circle=L.circle([0,0],{radius:}).addTo(grp);
L.rectangle(circle.getBounds()).addTo(this.bufferMap);
地图移除层(grp);

此解决方案需要中间形状(圆形)但是,我会接受这个答案,因为它简洁优雅。谢谢!没问题,不谢谢。是的,它需要
L.Circle
,但是如果你不想这样做,它会很快变成一个非常复杂的解决方案。你可以看看
L.Circle
getBounds
方法,并从中推断出不需要正确计算边界。我想你会同意这样做不那么复杂,而且更干净。你不必将圆声明为var并将其添加到映射中,你只需执行:
L.rectangle(L.circle([0,0],500)。getBounds()).addTo(map);
:)我完全同意你的看法。您的解决方案以一种非常好的方式隐藏了问题的所有复杂性。再次感谢你!这个解决方案需要一个中间形状(一个圆)来找到正方形。不过,我会接受这个答案,因为它既简洁又优雅。非常感谢。没问题,谢谢。是的,它需要
L.Circle
,但是如果你不想这样做,它很快就会变成一个非常复杂的解决方案。您可以查看
L.Circle
getBounds
方法,并从中推导出正确计算边界所需的内容。我想你会同意这样做不那么复杂,更干净。您不必将圆声明为var并将其添加到映射中,只需执行以下操作:
L.rectangle(L.circle([0,0],500).getBounds()).addTo(map):)我完全同意你的看法。您的解决方案以一种非常好的方式隐藏了问题的所有复杂性。再次感谢你!