javascript - Leaflet 画出一个多边形是否包含另一个多边形

标签 javascript maps leaflet

我有一个与 Leaflet Draw 插件有关的问题。 当我绘制多边形或标记时,我能够确定多边形内部是否包含标记,或者标记是否放置在多边形内部:

polygon.getBounds().contains([latitude, longitude])

我正在寻找任何执行类似操作的示例,我想知道当我绘制多边形时它是否接触,或内部有另一个多边形,或与另一个多边形相交。

有什么方法可以简单地做到这一点吗?

感谢大家抽出宝贵的时间。 最好的!

最佳答案

虽然 iH8 是正确的,并且 Leaflet 不支持检查多边形是否包含在另一个多边形内,但我可以通过下面的示例提供可能更好的答案。

是的,GeoScript 提供了我们可以用来检查一个多边形是否包含在另一个多边形内的方法,但我发现它很复杂,而且它们的文档不完整且不那么直观。

这就是为什么对于这类事情我总是使用 JTS (或者它是 JavaScript 端口 JSTS )。要使用传单或谷歌地图坐标的方法,您首先需要将它们转换为 JSTS 坐标,这很简单:

function _leafletLatLng2JTS (polygon) {
        var coordinates = [];
        var length = 0;
        if (polygon && polygon.length) {
            length = polygon.length;
        }
        for (var i = 0; i < length; i++) {
            if (polygon.length) {
                coordinates.push(new jsts.geom.Coordinate(polygon[i].lat, polygon[i].lng));
            }
        }
        return coordinates;
}

现在您只需要生成两个 JSTS 多边形并检查一个多边形是否包含在另一个多边形内:

function _isWithin (firstLayer, secondLayer) {

        var firstInput = _leafletLatLng2JTS(firstLayer.getLatLngs()[0]),
                secondInput = _leafletLatLng2JTS(secondLayer.getLatLngs()[0]),
                geometryFactory = new jsts.geom.GeometryFactory();
        //add last point to the end to create a closed polygon
        firstInput.push(firstInput[0]);
        secondInput.push(secondInput[0]);

        var firstPolygon = geometryFactory.createPolygon(firstInput),
                secondPolygon = geometryFactory.createPolygon(secondInput);

        var isWithin = firstPolygon.contains(secondPolygon);

        return isWithin;
}

这如何与 Leaflet.Draw 插件配合使用,您可以在 jsFiddle 中看到我创造了。此示例允许您在 map 上仅绘制两个图层(这适用于矩形和多边形),然后检查第二个图层是否包含在第一个图层内。如果删除一个,所有内容都将被删除,以便您可以从头开始绘制。

更新 2017 年 10 月 30 日。:

现在您可以使用turf.js对于这些事情(方法 booleanContains )

关于javascript - Leaflet 画出一个多边形是否包含另一个多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27037404/

相关文章:

javascript - 谷歌地图 zoomControl 隐藏和显示

css - LESS 生成的样式表不起作用

javascript - 设置 leaflet.js map 显示当前位置

javascript - 使用本地存储来记住 css 显示值

javascript - 任何返回 DOM 片段的 JavaScript 模板库/系统/引擎/技术?

javascript - 谷歌地图 API 函数 map.getCenter()

javascript - meteor 上的传单空白屏幕,但单个非 meteor test.html 上没有

leaflet - 我应该如何在 LeafletJs map 上覆盖网格?

php - FckEditor 转换 nbsp;一些奇怪的人物?

javascript - 添加新内容时设置间隔