Leaflet技术问题：如何绘制适配指定边界框的圆形？

在Leaflet里，L.Circle的半径是以米为单位的，但如果要基于坐标绘制一个能完全包住指定边界框的圆形，关键是算出从中心到边界框最远顶点的球面距离，把这个距离作为半径即可。

具体实现步骤 #

• 把中心坐标和边界框的四个顶点转换成Leaflet的L.LatLng对象（方便调用自带的距离计算方法）
• 计算每个顶点到中心的球面距离（单位是米）
• 取这些距离里的最大值作为圆形的半径

完整代码示例 #

const myCenter = [37, -122];
const myBoundingBox = {
  northEast: [myCenter[0]+2, myCenter[1]+2],
  southWest: [myCenter[0]-2, myCenter[1]-2]
};

// 把中心坐标转成Leaflet的LatLng对象
const centerLatLng = L.latLng(myCenter);

// 提取边界框的四个顶点并转成LatLng对象
const neLatLng = L.latLng(myBoundingBox.northEast);
const nwLatLng = L.latLng(myBoundingBox.northEast[0], myBoundingBox.southWest[1]);
const seLatLng = L.latLng(myBoundingBox.southWest[0], myBoundingBox.northEast[1]);
const swLatLng = L.latLng(myBoundingBox.southWest);

// 计算每个顶点到中心的距离（Leaflet会自动算球面距离，单位米）
const distances = [
  centerLatLng.distanceTo(neLatLng),
  centerLatLng.distanceTo(nwLatLng),
  centerLatLng.distanceTo(seLatLng),
  centerLatLng.distanceTo(swLatLng)
];

// 取最大的距离作为圆形半径
const maxRadius = Math.max(...distances);

// 创建并添加圆形到地图
const circle = L.circle(myCenter, {radius: maxRadius}).addTo(map);

说明 #

因为地球是球体，经纬度不能用平面几何算距离，Leaflet的distanceTo方法已经封装了球面距离的计算逻辑，直接用它就能得到精准的米数，确保画出来的圆形能完全包住目标边界框。

内容的提问来源于stack exchange，提问作者Mojimi