Mapbox 重叠圆圈

Question

有谁知道让 mapbox 中重叠的圆圈显示相同颜色并且只显示外边缘周围的边框的方法吗？

我有这个：

然后我在 photoshop 中按照我的要求制作了这个：

Answer 1

虽然我认为没有办法为所有圆圈设置样式以显示其组轮廓，但您可以通过创建所有圆圈几何图形的并集并将您的样式应用于它来实现您想要的效果。不幸的是，Leaflet 的 L.circle class offers no way to access a circle's geometry beyond the center point, and to perform a union, you need the path of the circle itself. Fortunately, there is Leaflet Geodesy and its LGeo.circle class, which produces circular polygons with a given radius and number of segments. Once you have these polygon representations of your circles, you can use turf.union 无法生成您想要的轮廓。

假设您从一个名为 pointLayer 的点层开始（这可以是 L.geoJson、L.mapbox.featureLayer 或继承 [= 的任何其他 class 24=]).然后您可以遍历这些要素，为每个要素创建一个圆形多边形并将其添加到临时图层组，如下所示：

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 是您要应用到新组合的圈子的任何样式。这是一个示例 fiddle，显示了所有这些以及一些随机数据：

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

Mapbox 重叠圆圈

Mapbox Overlapping Circles

leaflet

mapbox

turfjs