Mapbox重叠圆圈

Question

有没有人知道在地图框中制作重叠圆圈的方法显示相同的颜色，并且只有外边缘显示的边框？

我有这个：

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

Answer 1

虽然我认为没有办法对所有圆圈进行样式化以显示其组轮廓，但您可以通过创建所有圆几何图形的并集并将其样式应用于此来实现所需的效果。不幸的是，Leaflet的L.circle class无法访问中心点以外的圆形几何体，并且为了执行联合，您需要圆形路径本身。幸运的是，有Leaflet Geodesy及其LGeo.circle类，它产生具有给定半径和段数的圆形多边形。获得圆圈的这些多边形表示后，可以使用turf.union生成所需的轮廓。

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

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/