Leaflet JS多边形带洞填充颜色异常：洞越界时被填充主色

嘿，我之前也踩过Leaflet带洞多边形的渲染坑，咱们来一步步搞定这个问题！

问题根源 #

Leaflet渲染带洞的多边形时，是靠顶点缠绕方向和地理空间范围匹配来识别挖除区域的。当你的第二个洞部分超出主多边形外边界，同时顶点顺序和主多边形一致，渲染引擎就会误把洞的超出部分当成主多边形的“内部”，用主色填充了。

具体解决方案 #

1. 确保洞和主多边形的顶点方向相反

主多边形和洞的顶点顺序必须一顺一逆（比如主多边形顺时针，洞就逆时针），这样Leaflet才能正确区分“外部”和“挖除区”。你可以用这个小工具函数来自动调整：

// 检测并反转顺时针的坐标数组
function reverseIfClockwise(coords) {
  let area = 0;
  for (let i = 0; i < coords.length; i++) {
    const j = (i + 1) % coords.length;
    area += coords[i][0] * coords[j][1] - coords[j][0] * coords[i][1];
  }
  // 面积为正说明是顺时针，反转成逆时针
  return area > 0 ? coords.slice().reverse() : coords;
}

// 使用示例：
const mainPolygonCoords = [/* 你的主多边形坐标 */];
const hole1Coords = reverseIfClockwise([/* 第一个洞的坐标 */]);
const hole2Coords = reverseIfClockwise([/* 第二个洞的坐标 */]);

// 创建带洞的多边形
L.polygon([mainPolygonCoords, hole1Coords, hole2Coords], {
  fillColor: 'red',
  color: 'red',
  fillOpacity: 0.7
}).addTo(map);

2. 裁剪洞到主多边形的边界内

如果洞本身就有部分在主多边形外面，我们可以用地理空间库把洞“剪”到主多边形内部，只保留重叠的部分。推荐用Turf.js来做这个操作：

// 先把主多边形和洞转换成Turf的Feature
const mainTurfPoly = turf.polygon([mainPolygonCoords]);
const holeTurfPoly = turf.polygon([hole2Coords]);

// 获取洞和主多边形的交集，也就是有效洞区域
const validHole = turf.intersect(mainTurfPoly, holeTurfPoly);

// 如果交集存在，就用这个有效洞的坐标来替换原来的洞坐标
const finalHoleCoords = validHole ? validHole.geometry.coordinates[0] : hole2Coords;

// 再创建多边形
L.polygon([mainPolygonCoords, hole1Coords, finalHoleCoords], {
  fillColor: 'red',
  color: 'red',
  fillOpacity: 0.7
}).addTo(map);

这样处理后，洞就只会存在于主多边形内部，超出的部分被完全移除，自然不会被主色填充了。

3. 切换渲染的缠绕规则

Leaflet默认用的是非零缠绕规则，如果上面两步还没解决问题，可以尝试切换到奇偶缠绕规则，某些场景下这个规则对复杂边界的识别更准确：

L.polygon([mainPolygonCoords, hole1Coords, finalHoleCoords], {
  fillColor: 'red',
  color: 'red',
  fillOpacity: 0.7,
  rendererOptions: {
    windingRule: 'evenodd' // 切换到奇偶规则
  }
}).addTo(map);

总结 #

先调整顶点方向确保一顺一逆，再裁剪洞到主多边形内部，最后按需切换渲染规则，这三步基本上能解决你遇到的洞超出部分被填充主色的问题。

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