googlemaps多边形与clipper.js的结合

Question

我试图合并谷歌地图上的2个多边形(绿色) (API v3 Javascript)和clipper.js。

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

我的目标是只有一个多边形(红色)。问题是，最终的多边形不是完全按照路径，有时甚至是最坏的。

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

要合并两个绿色多边形，我使用了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调用之前提升坐标，并在联合操作之后缩小坐标，您的示例就可以工作。加1000000000000。当使用浮点数时，需要进行缩放以保持精度，因为Clipper内部使用整数。这有一个缺点，即操作缓慢，因为如果坐标被大幅提升，Clipper将使用大整数库。

为了克服速度慢(和精度)的问题，有一个新的(尽管仍然是实验性的)“浮子”剪贴器：fpoint/clipper.js unminified.js。

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

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

function dummy(){}

Answer 2

这是一种建立一个无洞联盟的方法，这是NAJ在给回答的评论中要求的。下面的图片显示了两个合并在一起的多边形，因此这个洞不见了：

​

​

小提琴：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);

您可以阅读更多关于填充规则和ReversePath的内容。