如何在mapbox-gl中自定义群集图标? [英] how to customise cluster icon in mapbox-gl?

问题描述

我想在地图中实现聚类.

我从 Mapbox群集示例中找到了简单群集的示例但是

我的代码在这里，其中marker ==> {marker-symbol}来自工作室.

，但是它不起作用.有可能实现集群的输出吗?

解决方案

由以下代码解决

var layers = [
    [150],
    [20],
    [0]
];
layers.forEach(function(layer, i) {
    map.addLayer({
        "id": "cluster-" + i,
        "source": "markers",
        "type": "symbol",
        "layout": {
            "text-field": "{point_count}",
            "text-font": [
                "Arial Unicode MS Bold"
            ],
            "text-size": 13,
            "text-anchor": "bottom",
            "icon-image": "emptyMarker",
            "icon-size": 0.25
        },
        "paint": {
            "text-color": "white"
        },
        "filter": i === 0 ? [">=", "point_count", layer[0]] : ["all", [">=", "point_count", layer[0]],
            ["<", "point_count", layers[i - 1][0]]
        ]
    });
});
map.addLayer({
    "id": "cluster-count",
    "type": "symbol",
    "source": "markers"
});

I want to implement clustering in my map.

I found example of simple clustering from Mapbox Cluster Example but

My code is here, where marker ==> {marker-symbol} is from studio.

but it is not working. Is it possible to achieve output of cluster?

解决方案

Solved By following code

var layers = [
    [150],
    [20],
    [0]
];
layers.forEach(function(layer, i) {
    map.addLayer({
        "id": "cluster-" + i,
        "source": "markers",
        "type": "symbol",
        "layout": {
            "text-field": "{point_count}",
            "text-font": [
                "Arial Unicode MS Bold"
            ],
            "text-size": 13,
            "text-anchor": "bottom",
            "icon-image": "emptyMarker",
            "icon-size": 0.25
        },
        "paint": {
            "text-color": "white"
        },
        "filter": i === 0 ? [">=", "point_count", layer[0]] : ["all", [">=", "point_count", layer[0]],
            ["<", "point_count", layers[i - 1][0]]
        ]
    });
});
map.addLayer({
    "id": "cluster-count",
    "type": "symbol",
    "source": "markers"
});

这篇关于如何在mapbox-gl中自定义群集图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！