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

Question

我正在尝试获取多边形的面积测量值，因此我可以将它们列在地图一侧的表格中，旁边是多边形的名称。这是我尝试过但没有成功的原因：

$("#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);
  }
}

一旦确认您正在获取该区域，您只需将其分配给填充地图旁边的表格的变量即可。

注意：默认情况下，区域将在squareMeters中

Answer 2

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()))
});

Answer 3

我发现上述答案均不能用于计算非连续多边形的面积。这是一个示例多边形，上面的函数返回的区域为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

您好，请添加更正内容：

var seeArea = L.GeometryUtil.geodesicArea（layer.getLatLngs（）[0]）;     console.log（seeArea）;