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

3

NAJが回答へのコメントで尋ねた穴のないユニオンを作成する方法は次のとおりです。下の画像は、2 つのポリゴンが結合されているため、穴がありません。

ここに画像の説明を入力

フィドル: 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 に答える