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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29724725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 10:58:37  来源:igfitidea点击:

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

javascriptleaflet

提问by Marty.H

I am trying to get the area measurements of polygons so I can list them in a table to the side of the map, next to the name of the polygon. This is what I have tried with no success:

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

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

Any help on this would be appreciated!

对此的任何帮助将不胜感激!

回答by The Brofessor

You can access the geometry utility library provided with Leaflet.

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

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

In your example, you are trying to access a control itself, which is what the variable createPolygon is assigned to. Instead, you want to take the area of the layer that got drawn.

在您的示例中,您试图访问控件本身,这是变量 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);
  }
}

Once you verify you are getting the area, you can just assign it to the variables that populate the table next to the map.

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

Note: area will be in squareMeters by default

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

回答by Facundo Ferrari

Hello add corrections:

你好补充更正:

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

var seeArea = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]); 控制台日志(见区域);

回答by lauren.marietta

I found that none of the above answers worked for calculating the area of non-contiguouspolygons. Here's an example polygon where the above functions returned an area of 0:

我发现上述答案都不适用于计算非连续多边形的面积。这是一个示例多边形,其中上述函数返回的面积为 0:

Non-contiguous Polygon

非连续多边形

For anyone who needs to do that, here is the code that worked for me (using the L.GeometryUtilfunction from Leaflet.draw):

对于需要这样做的任何人,以下是对我L.GeometryUtil有用的代码(使用Leaflet.draw 中的函数):

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

回答by KuN

L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]should get you the area.

L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]应该让你的区域。

But I ended up using leaflet-geoman-freeto do the drawing and use turf.jsto get the area.

但是我最终使用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()))
    });