Mapbox 重叠圆

Question

有没有人知道如何让 mapbox 中的重叠圆圈显示相同的颜色，并且只显示外边缘周围的边框？

我有这个：

我在 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/