3

我正在尝试将 Google 地图(API v3 Javascript)上的 2 个多边形(绿色)与 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 多边形?

4

2 回答 2

4

如果您在 AddPolygons 调用之前放大坐标并在联合操作之后缩小坐标,您的示例可能会起作用,例如。1000000000000。当使用浮点数时,需要进行缩放以保持精度,因为 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(){}

于 2014-01-19T19:14:13.827 回答
3

这是 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的更多信息。

于 2015-05-20T14:27:52.903 回答