如何在 mapbox-gl 中自定义集群图标?
how to customise cluster icon in mapbox-gl?
我想在我的地图中实现聚类。
我从 Mapbox Cluster Example 中找到了简单聚类的示例,但是
My code is here,其中标记 ==> {marker-symbol} 来自工作室。
但它不起作用。是否可以实现集群输出?
我认为解决方案是:
1. 你计算了children的marker,
的所有center的边界,并将它们存储为簇的marker
2.你必须控制缩放动作,
如果它 大于 15 那么你只显示 children 的标记
否则,如果它 小于 15 那么你只显示 簇的标记
通过以下代码解决
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 Cluster Example 中找到了简单聚类的示例,但是
My code is here,其中标记 ==> {marker-symbol} 来自工作室。
但它不起作用。是否可以实现集群输出?
我认为解决方案是:
1. 你计算了children的marker,
的所有center的边界,并将它们存储为簇的marker
2.你必须控制缩放动作,
如果它 大于 15 那么你只显示 children 的标记
否则,如果它 小于 15 那么你只显示 簇的标记
通过以下代码解决
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"
});