leaflet - Mapbox 重叠圆

Question

有谁知道一种方法可以使 mapbox 中的重叠圆圈显示相同的颜色，并且只显示外边缘周围的边框？

我有这个：

我在 Photoshop 中为我想要的东西做了这个：

Answer 1

虽然我不认为有一种方法可以设置所有圆圈的样式以显示它们的组轮廓，但您可以通过创建所有圆圈几何图形的并集并将您的样式应用于其中来实现您想要的效果。不幸的是，Leaflet 的L.circle类无法访问超出中心点的圆的几何图形，并且要执行联合，您需要圆本身的路径。幸运的是，有Leaflet Geodesy及其LGeo.circle类，它可以生成具有给定半径和段数的圆形多边形。一旦你有了这些圆的多边形表示，你就可以用它turf.union来产生你想要的轮廓。

假设您从一层称为点的点开始pointLayer（这可以是L.geoJson,L.mapbox.featureLayer或任何其他继承.eachLayer方法的类）。然后，您可以迭代要素，为每个要素创建一个圆形多边形并将其添加到临时图层组，如下所示：

var circleLayer = L.layerGroup();
var radius = 5000
var opts = {
  parts: 144
};
pointLayer.eachLayer(function(layer) {
  LGeo.circle(layer.getLatLng(), radius, opts).addTo(circleLayer);
});

其中radius以米为单位，parts选项是您希望多边形拥有的段数。接下来，使用该.getLayers方法获取临时组中所有层的数组，然后对其进行迭代以创建所有特征的联合：

var circleUnion = unify(circleLayer.getLayers()).addTo(map);

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, {style: unionStyle});
}

unionStyle你想应用到新组合的圈子的任何风格在哪里。这是一个使用一些随机数据显示所有这些的示例小提琴：

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