Flutter_Map中如何实现反向多边形 填充多边形外全部地图区域

核心实现逻辑是利用Polygon组件自带的挖洞（Hole）能力：先绘制一个覆盖全球范围的纯色多边形作为底遮罩，再将需要高亮保留的目标多边形设置为遮罩层的洞，渲染后洞的位置会保持透明，其余区域全部被遮罩填充，即可实现目标效果。

实现要点 #

• 构造覆盖全球经纬度范围的外层多边形作为遮罩层，经纬度范围取纬度-90~90、经度-180~180即可，无需动态计算当前地图视口范围，不会产生额外性能损耗
• 将需要高亮、不被遮罩覆盖的目标多边形，传入外层多边形的holePointsList参数作为镂空洞
• 单独为目标高亮多边形绘制边框，不要给外层遮罩多边形设置边框，避免出现沿全球边界的多余外框
• 如果出现洞未正常镂空的情况，将洞的顶点列表反转顺序即可（多边形环绕规则要求外层和洞的顶点环绕方向相反，不同flutter_map版本处理逻辑略有差异）

完整实现代码 #

PolygonLayerOptions(
  polygons: [
    // 全局遮罩+镂空高亮区域
    Polygon(
      points: [
        LatLng(90, -180),
        LatLng(90, 180),
        LatLng(-90, 180),
        LatLng(-90, -180),
        LatLng(90, -180),
      ],
      color: Colors.blue.withOpacity(0.4), // 外部区域遮罩颜色
      holePointsList: [
        // 传入需要镂空的目标区域顶点
        [
          LatLng(-25.290800, -52.716573),
          LatLng(-25.065827, -47.402915),
          LatLng(-27.847390, -47.402915),
          LatLng(-27.792425, -52.654425),
          LatLng(-25.290800, -52.716573),
        ]
      ],
      disableHolesBorder: true,
      isDotted: false,
    ),
    // 单独绘制高亮区域的边框
    Polygon(
      points: [
        LatLng(-25.290800, -52.716573),
        LatLng(-25.065827, -47.402915),
        LatLng(-27.847390, -47.402915),
        LatLng(-27.792425, -52.654425),
        LatLng(-25.290800, -52.716573),
      ],
      color: Colors.transparent,
      borderStrokeWidth: 5.0,
      borderColor: Colors.blue,
    ),
  ],
),

扩展说明 #

如果需要同时高亮多个镂空区域，只需要把所有目标区域的顶点列表依次添加到holePointsList数组中即可，不需要额外调整其他逻辑。

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