問題描述

我正在嘗試獲取多邊形的面積測(cè)量值，以便可以將它們列在地圖一側(cè)的表格中，靠近多邊形的名稱.這是我嘗試過但沒有成功的方法:

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
}

對(duì)此的任何幫助將不勝感激！

Any help on this would be appreciated!

推薦答案

您可以訪問 Leaflet 提供的幾何實(shí)用程序庫(kù).

You can access the geometry utility library provided with Leaflet.

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

在您的示例中，您嘗試訪問控件本身，這是變量 createPolygon 分配給的內(nèi)容.相反，您想要獲取已繪制圖層的區(qū)域.

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.

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

確認(rèn)您獲得了該區(qū)域后，您只需將其分配給填充地圖旁邊表格的變量即可.

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

注意:面積默認(rèn)為平方米

Note: area will be in squareMeters by default

這篇關(guān)于如何使用 Leaflet.draw 從多邊形中獲取區(qū)域字符串的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！