Leaflet.js联合/合并圈子 [英] Leaflet.js union/merge circles

问题描述

我使用Leaflet.js在地图上画了很多圆圈。有时这些圈子中有许多重叠。即使圆圈是透明的（CSS不透明度设置为0.3），地图也无法正常显示。
我正在寻找一种方法来创建n个圈子中的一个数字。我发现格里纳霍尔曼，但是，这似乎只适用于多边形。

I draw a lot of circles onto a map using Leaflet.js. Sometimes many of these circles overlap. Even though the circles are transparent (CSS opacity set to 0.3), the map then cannot be seen properly anymore. I am looking for a way to create one figure out of n circles. I found Greiner Hormann, however, this seems to work for polygons only.

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

My question is: How is it possible to union circles that are to be added to a leaflet.js map.

预先感谢您。

推荐答案

我不认为在 L.circle 对象。但是，您可以执行的操作是使用传单大地测量学创建〜圆形多边形并在那些。我的建议是将您的圈子创建为 LGeo.circle 对象，并将它们全部放置在同一个layerGroup中，例如：

I don't think there is an easy way to perform union operations on L.circle objects. What you can do, however, is use Leaflet Geodesy to create ~circular polygons and perform union operations on those. My suggestion would be to create your circles as LGeo.circle objects and place them all in the same layerGroup, e.g.:

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 ：

This is handy because once they are grouped together, you can use .getLayers() to get an array of all the layers, then iterate over them to get their union. This function, for example, will take an array of your layers and return a L.geoJson object of their union, calculated with 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);

下面是一个工作中的示例小提示：

Here is an example fiddle of this at work:

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

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

[ While using Turf is probably the better solution, if you want to try using Greiner Hormann instead, here is an example fiddle using that. You may notice that this produces an error if you try it with circles that are not all overlapping. This is because the Greiner Hormann routine returns nothing when the input polygons do not overlap. Using Turf will avoid this problem, because its union routine handles non-contiguous polygons by returning a multipolygon object instead. ]

这篇关于Leaflet.js联合/合并圈子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！