javascript - Mapbox 在圆圈上添加背景图片

Question

我正在使用 mapbox 并且我已经对我的数据进行了聚类。现在我想展示一个当用户缩放到某个点时显示背景图像(而不是黑色背景!)。

我是这样添加的:

this.map.addLayer({
    id: "unclustered-point",
    type: "circle",
    source: "earthquakes",
    filter: ["!has", "point_count"],
    paint: {
        "circle-color": "black",
        "circle-radius": 8,
        "circle-stroke-width": 4,
        "circle-stroke-color": "#fff",
    }
});

我正在像这样加载我的 geojson:

this.map.addSource("earthquakes", {
    type: "geojson",
    data: this.locations,
    cluster: true,
    clusterMaxZoom: 14, // Max zoom to cluster points on
    clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});

this.map.addLayer({
    id: "clusters",
    type: "circle",
    source: "earthquakes",
    filter: ["has", "point_count"],
    paint: {
        "circle-color": [
            "step",
            ["get", "point_count"],
            "#002e5b",
            100,
            "#002e5b",
            750,
            "#002e5b"
        ],
        "circle-radius": [
            "step",
            ["get", "point_count"],
            20,
            100,
            30,
            750,
            40
        ],
    }
});

那么我怎样才能得到背景图片而不是黑色背景呢？

Answer 1

您可以使用在 z14 处可见的自定义图像添加另一层点。这样自定义图像将覆盖黑色圆圈。

我建议使黑色圆圈非常小或不存在，这样它就不会与自定义图像冲突。