PolyLabel结合GeoJSON与Google Maps如何传参获取多边形标签位置

核心问题是PolyLabel仅接受符合GeoJSON规范的多边形坐标数组入参，和Google Maps API暴露的Geometry对象数据结构不匹配，且原生PolyLabel不直接支持MultiPolygon类型，直接传feature、原生geometry对象、未做格式转换的坐标都会返回错误结果。

实现逻辑 #

• 先把Google Maps的Geometry对象转换成PolyLabel可识别的[经度, 纬度]格式坐标数组，同时兼容Polygon、MultiPolygon两种类型
• MultiPolygon类型需要拆分出所有子多边形，选择面积最大的子多边形计算标签位置，避免标签飘到多边形缝隙或外部
• PolyLabel返回的坐标是[lng, lat]格式，需要转换成Google Maps要求的LatLng对象（纬度在前、经度在后）才能传给标签组件

完整代码 #

工具函数 #

// 谷歌地图几何对象转PolyLabel兼容的GeoJSON坐标格式
function convertGoogleGeomToPolylabelInput(geom) {
  const geomType = geom.getType();
  const polygonList = [];

  if (geomType === 'Polygon') {
    const rings = [];
    // 提取外环坐标
    rings.push(
      geom.getAt(0).getArray().map(point => [point.lng(), point.lat()])
    );
    // 提取所有内环（镂空区域）坐标
    for (let i = 1; i < geom.getLength(); i++) {
      rings.push(
        geom.getAt(i).getArray().map(point => [point.lng(), point.lat()])
      );
    }
    polygonList.push(rings);
  } else if (geomType === 'MultiPolygon') {
    // 遍历所有子多边形
    for (let i = 0; i < geom.getLength(); i++) {
      const singlePoly = geom.getAt(i);
      const rings = [];
      rings.push(
        singlePoly.getAt(0).getArray().map(point => [point.lng(), point.lat()])
      );
      for (let j = 1; j < singlePoly.getLength(); j++) {
        rings.push(
          singlePoly.getAt(j).getArray().map(point => [point.lng(), point.lat()])
        );
      }
      polygonList.push(rings);
    }
  }
  return polygonList;
}

// 计算多边形外环面积，用于MultiPolygon选最优标签承载块
function getPolygonArea(polygonRings) {
  let area = 0;
  const outerRing = polygonRings[0];
  for (let i = 0; i < outerRing.length - 1; i++) {
    const [x1, y1] = outerRing[i];
    const [x2, y2] = outerRing[i + 1];
    area += x1 * y2 - x2 * y1;
  }
  return Math.abs(area / 2);
}

修正后的业务逻辑 #

polygons.forEach(function (feature) {
  const geom = feature.getGeometry();
  const allPolygons = convertGoogleGeomToPolylabelInput(geom);
  let targetPosition;

  if (allPolygons.length === 1) {
    // 单多边形直接计算极点
    const polylabelResult = polylabel(allPolygons[0], 1.0);
    // 转换为谷歌地图LatLng格式，注意经纬度顺序
    targetPosition = new google.maps.LatLng(polylabelResult[1], polylabelResult[0]);
  } else {
    // 多多边形选面积最大的子块计算标签位置
    let maxArea = -1;
    let bestPolygon = null;
    allPolygons.forEach(poly => {
      const area = getPolygonArea(poly);
      if (area > maxArea) {
        maxArea = area;
        bestPolygon = poly;
      }
    });
    const polylabelResult = polylabel(bestPolygon, 1.0);
    targetPosition = new google.maps.LatLng(polylabelResult[1], polylabelResult[0]);
  }

  const mapLabel = new MapLabel({
    position: targetPosition,
    text: feature.getProperty("LABEL"),
    fontSize: 25,
    fontColor: "red",
    map: map
  });

  currentLabels.push(mapLabel);
});

注意事项 #

• 不要直接传入Google Maps的LatLng对象给PolyLabel，它仅支持普通JS数组格式的坐标
• 严格注意坐标顺序：PolyLabel、GeoJSON使用「经度、纬度」顺序，Google Maps的LatLng使用「纬度、经度」顺序，顺序写反会导致位置偏移极大
• 精度参数1.0对应约111km的计算精度，如果需要更精准的标签位置，可以根据地图常用缩放层级调小参数，比如传0.0001对应约10m的精度
• 不要直接把整个MultiPolygon的坐标数组传入PolyLabel，该库原生不支持MultiPolygon结构，必须拆分后选择合适的子多边形计算

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