最快和最小的 JavaScript 多边形三角测量库

1,080 阅读3分钟

earcut - npm (npmjs.com)

最快和最小的 JavaScript 多边形三角测量库。3KB 压缩。

构建状态 覆盖范围状态 解决问题的平均时间 仍未解决的问题所占百分比 

算法

该库实现了修改后的耳朵切片算法,该算法通过z阶曲线散列进行了优化,并进行了扩展以处理孔,扭曲的多边形,退化和自交集,其方式不能保证三角测量的正确性,但尝试始终为实际数据产生可接受的结果。

它基于FIST的想法:Martin Held的Polygons的快速工业强度三角测量和David Eberly的Ear Clipping的三角测量

为什么选择另一个三角测量库?

该项目的目的是创建一个JS三角测量库,该库足够快,可以在浏览器中进行实时三角测量,牺牲三角测量质量以获得原始速度和简单性,同时足够强大以处理大多数实用的数据集而不会崩溃或产生垃圾。使用 Node 0.12 的一些基准测试:

(操作/秒)耳切libtesspoly2tripnltri波利克
OSM 建筑15795,93550,64061,501122,966175,570
伙计形状9435,65810,3398,78411,17213,557
空洞的家伙形状10428,3198,8837,4942,130不适用
复杂的OSM水252354377.54失败失败不适用
巨大的OSM水56679529.30失败失败不适用

创建它的原始用例是Mapbox GL,基于WebGL的交互式地图。

如果你想得到正确的三角测量,即使是在非常糟糕的数据上,有很多自交,耳朵切割不够精确,看看libtess.js

用法

var triangles = earcut([10,0, 0,50, 60,60, 70,10]); // returns [1,0,3, 3,2,1]

签名:。earcut(vertices[, holes, dimensions = 2])

  • vertices是顶点坐标的平面数组,如 。[x0,y0, x1,y1, x2,y2, ...]
  • holes是孔索引数组(如果有)(例如 对于 12 个顶点输入,将意味着一个顶点为 5–7 的孔和另一个顶点为 8–11 的孔)。[5, 8]
  • dimensions是输入数组中每个顶点的坐标数(默认情况下)。2

结果数组中每组三个顶点索引形成一个三角形。

// triangulating a polygon with a hole
earcut([0,0, 100,0, 100,100, 0,100,  20,20, 80,20, 80,80, 20,80], [4]);
// [3,0,4, 5,4,0, 3,4,7, 5,0,1, 2,3,7, 6,5,1, 2,7,6, 6,1,2]

// triangulating a polygon with 3d coords
earcut([10,0,1, 0,50,2, 60,60,3, 70,10,4], null, 3);
// [1,0,3, 3,2,1]

如果将单个顶点作为孔传递,Earcut 会将其视为施泰纳点。

如果您的输入是多维数组(例如 GeoJSON 多边形),则可以使用以下命令将其转换为 Earcut 预期的格式:earcut.flatten

var data = earcut.flatten(geojson.geometry.coordinates);
var triangles = earcut(data.vertices, data.holes, data.dimensions);

进行三角测量后,您可以使用以下命令验证其正确性:earcut.deviation

var deviation = earcut.deviation(vertices, holes, dimensions, triangles);

返回三角形总面积与输入多边形面积之间的相对差值。 表示三角测量是完全正确的。0

安装

NPM 和 Browserify:

npm install earcut

浏览器构建在 CDN 上:

运行测试:

npm test

image.png

移植到其他语言