使用 JSTS 库在 Leaflet 多边形中查找自相交

Question

我正在使用带有 Leaflet Draw 的 Mapbox，我想避免自相交的多边形。

我已经可以在创建绘图控件时指定不允许相交，但它仅在我使用该控件创建新多边形时有效。但是，如果我尝试编辑一个已经存在的多边形，它允许在那里有交集。

我四处搜索并找到 JSTS Library which does exactly what I want, and I also found this JSFiddle 作为示例，它基于 Google 地图 API.

工作

所以我根据以上两个链接用Mapbox创建了自己的JSFiddle。此处，如果是多边形编辑，'findSelfIntersects' 函数将启动，如果是新多边形，则不会使用。我的想法是，如果有交叉路口，我会向用户显示警告并取消编辑。但是，当我尝试这样做时，出现 uncaught exception: [object Object] 错误。

错误似乎是在 findSelfIntersects 函数的这一行形成的：

var shell = geometryFactory.createLinearRing(coordinates);

我检查了 Google 地图示例返回的坐标，它看起来确实与我得到的坐标相似。但我不确定为什么会收到此错误。

Answer 1

我刚刚注意到，在 Google 地图示例中，坐标数组中的起点和终点相同，而我的则不同。我最初错过了它。现在我在 'for' 循环之后添加了下面的代码，它工作正常。

coordinates.push(new jsts.geom.Coordinate(
    corners[0].lat, corners[0].lng));

这是一个更新的 JSFiddle，以防有人想将 JSTS 库与 Mapbox/Leaflet 一起使用。

使用 JSTS 库在 Leaflet 多边形中查找自相交

Finding Self-Intersections in Leaflet polygons using JSTS Library

javascript

mapbox

self-intersection

leaflet.draw