如何使用 leaflet.draw 从多边形获取区域字符串

Question

我正在尝试获取多边形的面积测量值，以便我可以将它们列在地图一侧的 table 中，紧挨着多边形的名称。这是我尝试过但没有成功的方法：

$("#polygon").on("click", function (){
    createPolygon = new L.Draw.Polygon(map, drawControl.options.polygon);
    createPolygon.enable();
}

var polygon = new L.featureGroup();

map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;
    if (type === 'polygon') {
      polygons.addLayer(layer);
    }
    var seeArea = createPolygon._getMeasurementString();
   console.log(seeArea);  //Returns null
}

如有任何帮助，我们将不胜感激！

Answer 1

您可以访问随 Leaflet 提供的几何实用程序库。

var area = L.GeometryUtil.geodesicArea(layer.getLatLngs());

在您的示例中，您试图访问控件本身，这是变量 createPolygon 分配给的内容。相反，您想获取绘制的图层区域。

map.on('draw:created', function (e) {
  var type = e.layerType,
      layer = e.layer;
  if (type === 'polygon') {
    polygons.addLayer(layer);
    var seeArea = L.GeometryUtil.geodesicArea(layer.getLatLngs());
    console.log(seeArea);
  }
}

一旦您确认获得了该区域，您就可以将其分配给填充地图旁边 table 的变量。

注意：默认情况下面积以平方米为单位

Answer 2

添加更正：

var seeArea = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
console.log(seeArea);

Answer 3

我发现上述答案中的 none 对计算 非连续 多边形的面积有效。这是一个多边形示例，其中上述函数返回的面积为 0:

对于任何需要这样做的人，这里是对我有用的代码（使用 Leaflet.draw 中的 L.GeometryUtil 函数）：

var poly = // Your polygon layer here; may or may not be contiguous
var area = 0;
for (island of poly.getLatLngs()) {
    // If the polygon is non-contiguous, access the island
    if (island.length < 2) {
        island = island[0]
    }
    // Sum the area within each "island"
    area += L.GeometryUtil.geodesicArea(island);
}

Answer 4

L.GeometryUtil.geodesicArea(layer.getLatLngs())[0] 应该可以找到该区域。

但我最终使用 leaflet-geoman-free 绘制并使用 turf.js 获取面积。

map.pm.enableDraw('Polygon', {
   snappable: true,
   snapDistance: 20,
});

map.on('pm:create', e => {
   const layer = e.layer
   alert(turf.area(layer.toGeoJSON()))
});

如何使用 leaflet.draw 从多边形获取区域字符串

How to get the area string from a polygon using leaflet.draw

javascript

leaflet