将正方形添加到按其面积调整大小的地图

Question

我在尝试向我的地图添加正方形时遇到了一堵砖墙。我正在使用很棒的 Leaflet.draw 插件，但它只支持矩形。每个正方形的面积必须相同：25miles^2。我尝试使用图标，但它们不会在缩放时调整大小，而且我不一定要求助于禁用缩放。此外，我注意到在我的地图上平移时，比例在不断调整。这让我相信，即使在相同的缩放级别，20 英里的正方形也会有不同的形状。

似乎向地图添加形状的唯一方法是使用 Lat 和 Lng，所以我知道我必须想出一种方法将 LatLng 转换为 Area，反之亦然。

正在寻找任何反馈！谢谢

Answer 1

您可以使用 Turfjs 目标方法计算目标点：

Takes a Point and calculates the location of a destination point given a distance in degrees, radians, miles, or kilometers; and bearing in degrees. This uses the Haversine formula to account for global curvature.

http://turfjs.org/static/docs/module-turf_destination.html

使用给定的一个点，您可以导出创建新多边形所需的其余三个点：

var nw = {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Point",
    "coordinates": [lng, lat]
  }
};

// Go from northwest to northeast etc.
var ne = turf.destination(nw, 25, 90, 'miles'),
    se = turf.destination(ne, 25, 180, 'miles'),
    sw = turf.destination(se, 25, 270, 'miles');

// Nested array of coordinates. Note reversing of coordinates
// because GeoJSON uses [lng, lat]. Leaflet uses [lat, lng]
var coordinates = [
  nw.geometry.coordinates.reverse(),
  ne.geometry.coordinates.reverse(),
  se.geometry.coordinates.reverse(),
  sw.geometry.coordinates.reverse()
];

// Create a new polygon with coordinates
var polygon = new L.Polygon(coordinates).addTo(map);

Plunker 示例：http://plnkr.co/edit/C2iLJF?p=preview

将正方形添加到按其面积调整大小的地图

Adding squares to a map sized by their area

leaflet

mapbox