使用leaflet.js在一个点周围添加一个指定大小的正方形多边形

Question

有一个有点奇怪的问题，希望有人能帮忙解决。

在leaflet中，一旦用户输入了纬度/经度并将一个点添加到地图上，我想能够在该点周围也添加一个10公里的正方形。

我尝试寻找计算距离x公里时正方形顶点的方法，但没有找到任何东西。但肯定有更简单的方法！

有人有什么想法吗？很高兴只需说L.polygon然后传入中心点和正方形大小。

谢谢，

Tayler

- TKems

---

你可能需要一个外部库，比如Turf.js。 - ghybs

Answer 1

使用经纬度初始化一个半径为5000米的L.Circle，获取其边界并用其来初始化一个L.Rectangle：

new L.Rectangle(new L.Circle([0, 0], 5000).getBounds())

- iH8

---

一如既往的好技巧！;-) 垂直维度上有一点不准确，但对于10公里来说应该是可以接受的，如果不是微不足道的话。这是一个很好的页面，可以快速与Leaflet测地线进行比较：https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-geodesy/ - ghybs

Answer 2

这是一个使用leaflet 1.9的示例。

    const perimeter = 100_000 // we want a rectangle with a 100km perimeter
    const rectangleCenter = [13, -13] // center of the rectangle
    const circle = L.circle(rectangleCenter, { radius: perimeter / 8 }).addTo(map)
    const { _northEast, _southWest } = circle.getBounds()
    map.removeLayer(circle)
    L.rectangle([[_northEast.lat, _northEast.lng], [_southWest.lat, _southWest.lng]], { color: "#ff7800", weight: 1 }).addTo(map)

- tbo47