javascript - 一组多边形的外包络

Question

我有一个包含多个多边形的 GeoJson 文件。像这样的东西。

我使用 Leaflet 在网站中呈现此 GeoJson。
我想在包围所有多边形的多边形周围画一个轮廓。像这样的东西。

我正在使用的 GeoJSOn 格式：

{
"features": [
  {
    "geometry": {
      "coordinates": [
        [
          [
            1074.426,
            -1136.986
          ],
          [
            1088.241,
            -1123.171
          ]
        ]
      ],
      "type": "Polygon"
    },
    "properties": {
      "number": "2009",
      "type": "",
      "spaceid": null,
      "alias": null,
      "roomkey": "5/2009"
    },
    "type": "Feature"
  }
],
"bbox": [
  2445.578,
  2445.578
],
"crs": {
  "properties": {
    "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
  },
  "type": "name"
},
"type": "FeatureCollection"

}

任何指针都会有所帮助:)谢谢

score 7 · Accepted Answer

您正在寻找“凸壳”：

在数学中，欧几里得平面或欧几里得空间（或更一般地，在实数上的仿射空间）中的一组点 X 的凸包或凸包络是包含 X 的最小凸集。

参考：https ://en.wikipedia.org/wiki/Convex_hull

你可以用 Turf.jsconvex方法做到这一点：

采用 Feature 或 FeatureCollection 并返回凸包 Polygon。

参考：http ://turfjs.org/docs/#convex

例子：

var map = new L.Map('leaflet', {center: [0, 0], zoom: 0});

var collection = turf.featureCollection([
    turf.polygon([[[-80,-80],[-40,-80],[-40,-40],[-80,-40],[-80,-80]]]),
    turf.polygon([[[80,80],[40,80],[40,40],[80,40],[80,80]]])
]);

new L.GeoJSON(collection, {color: 'red'}).addTo(map);

var polygon = turf.convex(collection);

new L.GeoJSON(polygon, {color: 'black', 'fill': false }).addTo(map);

body {
    margin: 0;
}

html, body, #leaflet {
    height: 100%;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet 1.2.0</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="text/css" rel="stylesheet" href="//unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
  </head>
  <body>
    <div id="leaflet"></div>
    <script type="application/javascript" src="//unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script type="application/javascript" src="//npmcdn.com/@turf/turf/turf.min.js"></script>
</script>
  </body>
</html>

score 0 · Accepted Answer

我设法做到了，但使用了 TopoJSON。我在这里发布一个视频。

首先，我尝试在 tuffjs 中使用“union”函数。但它非常慢（我有一个非常详细的geojson）。

所以我切换到topojson。首先，您需要将 geojson 转换为 topojson。然后使用 topojson-client 库中的“合并”功能。合并返回多面体，但它比原始几何图形简单得多。

然后您需要在代码中进行额外的处理，以删除一些属于其他多边形的多边形。

score 0 · Accepted Answer

@Shaswat，关于凸包缺少内点是正确的。所以我尝试了 turf.union：

const turf = require('@turf/turf')

const originGeojson = require('./SECCIONES_13_geo.json')

const totalUnion = originGeojson.features.reduce((union, feature, index) => {
  if (!union) {
    return turf.polygon(feature.geometry.coordinates)
  }

  try {
    return turf.union(union, turf.polygon(feature.geometry.coordinates))
  } catch (err) {
    return union
  }
})

console.log(JSON.stringify(totalUnion))

但它会产生这样的东西，里面有很多洞。

代码本身是不正确的，对于 catch 块，这只是一种通过整个列表的方式。catch 中的错误是：

错误：多边形的每个线性环必须有 4 个或更多位置。

如果有人可以分享解决此问题的正确方法，我将不胜感激。

javascript - 一组多边形的外包络

3 回答 3

Related

Reference