Leaflet.js union/merge 个圈子

Question

我使用 Leaflet.js 在地图上画了很多圈。有时这些圆圈中有许多重叠。即使圆圈是透明的（CSS 不透明度设置为 0.3），也无法再正确看到地图。我正在寻找一种从 n 个圆圈中创建一个图形的方法。我发现 Greiner Hormann，但是，这似乎只适用于多边形。

我的问题是：如何合并要添加到 leaflet.js 地图的圆。

提前致谢。

Answer 1

我认为没有一种简单的方法可以对 L.circle 对象执行联合操作。但是，您可以做的是使用 Leaflet Geodesy 创建〜圆形多边形并对其执行联合操作。我的建议是将您的圈子创建为 LGeo.circle 对象并将它们全部放在同一个图层组中，例如：

var cities = new L.LayerGroup();
var chicago = LGeo.circle([41.84, -87.68], 1000000).addTo(cities);
var newOrleans = LGeo.circle([29.95, -90.07], 1000000).addTo(cities);
var denver = LGeo.circle([39.74, -104.99], 1000000).addTo(cities);

这很方便，因为一旦将它们组合在一起，您就可以使用 .getLayers() 获取所有层的数组，然后遍历它们以获得它们的并集。例如，此函数将采用您的图层数组和 return 它们联合的 L.geoJson 对象，用 Turf.js:

计算

function unify(polyList) {
  for (var i = 0; i < polyList.length; ++i) {
    if (i == 0) {
      var unionTemp = polyList[i].toGeoJSON();
    } else {
      unionTemp = turf.union(unionTemp, polyList[i].toGeoJSON());
    }
  }
  return L.geoJson(unionTemp);
}

var cityUnion = unify(cities.getLayers()).addTo(map);

这里有一个例子fiddle：

http://fiddle.jshell.net/nathansnider/ehpL8fho/

[ 虽然使用 Turf 可能是更好的解决方案，但如果您想尝试使用 Greiner Hormann，这里是 example fiddle 使用它的方法。您可能会注意到，如果您尝试使用并非全部重叠的圆圈，这会产生错误。这是因为当输入多边形不重叠时，Greiner Hormann 例程 return 什么都没有。使用 Turf 可以避免这个问题，因为它的联合例程通过 returning 一个多边形对象来处理不连续的多边形。 ]

Leaflet.js union/merge 个圈子

Leaflet.js union/merge circles

javascript

union

merge

geometry

leaflet