Question

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

我的问题是：如何结合要添加到leaflet.js地图的圈子。

提前谢谢。

Answer 1

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

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()获取所有图层的数组，然后迭代它们以获得它们的联合。例如，此函数将获取图层的数组并返回其联合的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);

以下是工作中的一个例子：

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

[虽然使用Turf可能是更好的解决方案，如果你想尝试使用Greiner Hormann，这里使用的是example fiddle。您可能会注意到，如果您尝试使用并非全部重叠的圆圈，则会产生错误。这是因为当输入多边形不重叠时，Greiner Hormann例程不返回任何内容。使用Turf将避免此问题，因为它的联合例程通过返回多字形对象来处理非连续多边形。 ]

Leaflet.js联合/合并圈子

1 个答案: