React Leaflet绘制多边形后如何计算其覆盖区域面积

多边形面积计算 #

适配你现有绘制回调的两种计算方式，无额外冗余逻辑：

• 直接使用Leaflet原生API计算
  你回调中拿到的多边形图层layer对象，内置真实地表面积计算能力，返回结果单位为平方米，无需额外解析GeoJSON：

  if (type === 'Polygon') {
    // 计算多边形面积，单位：平方米
    const area = layer.getArea()
    // 如需换算为平方公里可直接除以1000000
    const areaInSquareKm = area / 1000000
    // 原有GeoJSON转换逻辑保留
    var geojson = layer.toGeoJSON();
    console.log(geojson);
  }
  

  该方法会自动修正地球曲率带来的面积误差，计算结果匹配实际地理区域的真实大小。
• 基于已存储的GeoJSON数据二次计算
  如果你将GeoJSON存入状态或数据库，后续需要重新计算面积时，可通过坐标解析还原多边形实例完成计算：

  // 提取GeoJSON中的多边形坐标，注意GeoJSON坐标顺序为[经度, 纬度]
  const polygonLatLngs = geojson.geometry.coordinates[0].map(coord => L.latLng(coord[1], coord[0]))
  // 还原多边形实例后计算面积
  const area = L.polygon(polygonLatLngs).getArea()
  

筛选多边形区域内的黑点ID #

利用Leaflet内置的几何判断能力完成点面匹配，无需引入第三方计算库：

1. 以用户绘制的多边形图层为判断基准
2. 遍历项目中存储的黑点列表，逐个校验坐标是否在多边形边界内
3. 收集所有匹配点的ID即可

示例代码：

// 绘制完成的多边形图层实例
const drawnPolygon = layer
// 项目维护的黑点列表，结构参考：[{ id: 'point_1', lat: 纬度值, lng: 经度值 }, ...]
const blackPointList = []
// 筛选落在多边形内部的点
const matchedPointIds = blackPointList.filter(point => {
  const pointLatLng = L.latLng(point.lat, point.lng)
  // 核心判断逻辑，为Leaflet内置的几何工具方法
  return L.GeometryUtil.inside(drawnPolygon, pointLatLng)
}).map(point => point.id)

注意：所有经纬度转换环节必须统一坐标顺序，Leaflet的latLng参数顺序为(纬度, 经度)，GeoJSON的坐标顺序为(经度, 纬度)，顺序混淆会导致计算、判断结果完全失效。

内容的提问来源于stack exchange，提问作者Rayssa Rocha