googlemaps多边形与clipper.js的联合

Question

我正在尝试将Google地图上的2个多边形（绿色）（API v3 Javascript）与clipper.js合并。

之前：http://jsfiddle.net/kevdiho/tc53Y/

我的目标是只有1个多边形（红色）。问题是最终的多边形并不完全遵循路径，有时甚至是最差的。

之后：http://jsfiddle.net/kevdiho/uF6ec/

合并我使用的2个绿色多边形clipper.js和这个函数ClipperLib.ClipType.ctUnion

var clipType = ClipperLib.ClipType.ctUnion;
function mergePolygon()
  {
      for(j=0;j<array_polygon.length;j++){
          array_polygon_clipper = createarray_clipper_polygon(array_polygon[j]);
          subj_polygons.push(array_polygon_clipper);
      }
      cpr.AddPolygons(subj_polygons, ClipperLib.PolyType.ptSubject);
      var succeeded = cpr.Execute(clipType, solution_polygons);
      return solution_polygons;
  }

我该如何解决这个问题？  Clipper.js是一个很好的答案，还是有其他库可以与googlemaps多边形一起使用？

Answer 1

如果你在AddPolygons调用之前升级坐标并在union操作之后缩小它们，你的例子可以工作，例如。当使用浮点数时，需要使用缩放来保持精度，因为Clipper在内部使用整数。这有一个缺点，操作很慢，因为Clipper使用大整数库，如果坐标被大量放大。

为了克服缓慢（和精确）问题，有一个新的（虽然仍然是实验性的）“浮动”Clipper： http://jsclipper.sourceforge.net/6.1.3.1_fpoint/clipper.js http://jsclipper.sourceforge.net/6.1.3.1_fpoint/clipper_unminified.js

Clipper 6有一些变化，从Clipper 5迁移到6时你必须考虑到这一点： https://sourceforge.net/p/jsclipper/wiki/migration5to6/

我为你做了一个改变： http://jsfiddle.net/uF6ec/2/

function dummy(){}

Answer 2

这是一种在评论中向answer提出NAJ要求的非洞联合的方法。下图显示了两个多边形联合，因此缺少了孔：

FIDDLE：http://jsfiddle.net/uF6ec/121/

洞的原因是主题多边形的不同方向。我们必须检测该区域是否为负并反转方向：

if (ClipperLib.JS.AreaOfPolygon(array_polygon_clipper) < 0)
{
    array_polygon_clipper.reverse();
}

（通过反转面积为正的所有多边形，你也可以完全相反地实现相同的解决方案。）

然后在pftNonZero中使用Execute()填充规则：

var succeeded = cpr.Execute(ClipperLib.ClipType.ctUnion,
solution_polygons, ClipperLib.PolyFillType.pftNonZero, 
ClipperLib.PolyFillType.pftNonZero);

您可以详细了解fill rules和ReversePath。