javascript - googlemaps 多边形与 clipper.js 的结合

标签 javascript google-maps-api-3 polygons clipperlib

我正在尝试使用 clipper.js 合并 Google map (API v3 Javascript)上的 2 个多边形(绿色)。

之前: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 多边形?

最佳答案

如果您在调用 AddPolygons 之前放大坐标并在联合操作之后缩小坐标,您的示例可能会起作用,例如。 1000000000000。当使用 float 时,需要缩放以保持精度,因为 Clipper 在内部使用整数。这有一个缺点,就是操作很慢,因为如果坐标被大幅放大,Clipper 使用大整数库。

为了克服缓慢(和精确)问题,有一个新的(尽管仍处于实验阶段)“ float ”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/

函数虚拟(){}

关于javascript - googlemaps 多边形与 clipper.js 的结合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20147986/

相关文章:

google-maps-api-3 - 如何在 Google Maps API 中沿起点和终点之间的路线获取地点(例如加油站)

javascript - 403 在 Google map API v3 中被禁止

java - 如何从构造函数中获取 JPanel 的宽度和高度?

r - 如何在 R 中将 SpatialPointsDataFrame 更改为 SpatialPolygonsDataFrame 以在 ggplot2 中使用它?

Javascript - 识别正 0 和负 0 数

javascript - 单击链接时如何使链接自行更新?

javascript - typeof foo 和 typeof(foo)/delete bar 和 delete(bar) 之间有什么区别,为什么我们需要两者?

javascript - 获取类型错误 : FabricUserControllers is not a constructor which can not be catch

JavaScript/Angular - 尝试使用本地 JSON 文件设置 Google map 样式时出现问题

javascript - 谷歌地图多边形过多导致 iOS 崩溃