您好，我是新手，在这里。
我已经在MapboxGL上创建了一个地图，其中包含用于聚类点和过滤图层的基本代码，但是当我关闭图层的可见性时，point_count不会改变。
mapboxjs（https://docs.mapbox.com/mapbox.js/example/v1.0.0/filtering-marker-clusters/）就是一个例子，但是经过几天的搜索，我在mapboxGL上找不到类似的东西。
这是我的基本代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js' ></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<style>
#body {
margin: 0;
padding: 0;
background: #404040;
-webkit-font-smoothing: antialiased;
}
#map {
position: absolute;
left: 0;
width: 100%;
top: 0;
bottom: 0;
}
#menu {
position: absolute;
background: #fff;
height: 100%;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
#menu a {
background-color: #ffffff;
color: #c6c6c6;
display: block;
margin: 5px;
padding: 5px;
height: 30px;
font:14px 'Roboto 500', Arial, Helvetica, sans-serif;
border: 2px solid rgba(100, 100, 100, 0.2);
text-align: left;
}
#menu a.hover {
background-color: #c6c6c6;
color: #404040;
}
#menu a.active {
background-color: #ffffff;
color: #b39124;
dispaly: block;
border: none;
border-radius: 5px;
height: 30px;
font:14px 'Roboto 500', Arial, Helvetica, sans-serif;
border: 2px solid rgba(179, 145, 36, 1);
}
#menu a.active: hover {background: #b39124;}
#menu a: last-child {border: 2px solid rgba(100,100,100, 0.2);}
</style>
<head>
<body>
<div id='map'></div>
<div id="menu"></div></div>
<input id='slider' class='range' type='range' min='1' max='100' step='0'>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYW1nMjIwNzUiLCJhIjoiY2p4Mmx3MjB3MG0wNzN6cGRpajhmc2N1cCJ9.EKysqx7EeD8VyPC8LijE-g';
if (!mapboxgl.supported()) {alert('Your browser does not support MapboxGL');}
else {
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/amg22075/cjx2lxt6z1z801cs5gx4jtsji',
center: [135.5023, 34.6937],
hash: true,
zoom: 0.5,
maxZoom: 15,
minZoom: 0});}
map.addControl(new mapboxgl.NavigationControl({showCompass: false}));
map.on('load', function() {
map.addSource("assets", {
type: "geojson",
data: "https://api.maptiler.com/data/d31b5a2c-a0b4-4d8e-bff1-d17ed6c4a577/features.json?key=RcNNUvSRwRrAdM6laEzT",
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 120});
map.addLayer({
id: "cluster-count",
type: "symbol",
source: "assets",
filter: [">=", "point_count", 1],
layout: {
"text-field": "{point_count_abbreviated}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-size": 14}});
map.addLayer({
id: "Residential",
type: "circle",
source: "assets",
filter: ["==", "Class", "Residential"],
paint: {
"circle-color": "#b39124",
'circle-radius': 10,
"circle-opacity": 1,
"circle-stroke-width": 0,
"circle-stroke-opacity": 0,
"circle-stroke-color": "#000"}});
map.addLayer({
id: "HOotels",
type: "circle",
source: "assets",
filter: ["==", "Class", "Hotel"],
paint: {
"circle-color": "#b39124",
'circle-radius': 10,
"circle-opacity": 1,
"circle-stroke-width": 0,
"circle-stroke-opacity": 0,
"circle-stroke-color": "#000"}});
map.addLayer({
id: "Office",
type: "circle",
source: "assets",
filter: ["==", "Class", "Office"],
paint: {
"circle-color": "#b39124",
'circle-radius': 10,
"circle-opacity": 1,
"circle-stroke-width": 0,
"circle-stroke-opacity": 0,
"circle-stroke-color": "#000"}});
map.addLayer({
id: "Land",
type: "circle",
source: "assets",
filter: ["==", "Class", "Land"],
paint: {
"circle-color": "#b39124",
'circle-radius': 10,
"circle-opacity": 1,
"circle-stroke-width": 0,
"circle-stroke-opacity": 0,
"circle-stroke-color": "#000"}});
map.addLayer({
id: "Estate",
type: "circle",
source: "assets",
filter: ["==", "Class", "Estate"],
paint: {
"circle-color": "#b39124",
'circle-radius': 10,
"circle-opacity": 1,
"circle-stroke-width": 0,
"circle-stroke-opacity": 0,
"circle-stroke-color": "#000"}});
map.addLayer({
id: "Retail",
type: "circle",
source: "assets",
filter: ["==", "Class", "Retail"],
paint: {
"circle-color": "#b39124",
'circle-radius': 10,
"circle-opacity": 1,
"circle-stroke-width": 0,
"circle-stroke-opacity": 0,
"circle-stroke-color": "#000"}});
map.addLayer({
id: "Security",
type: "circle",
source: "assets",
filter: ["==", "Class", "Security"],
paint: {
"circle-color": "#b39124",
'circle-radius': 10,
"circle-opacity": 1,
"circle-stroke-width": 0,
"circle-stroke-opacity": 0,
"circle-stroke-color": "#000"}});
map.addLayer({
id: "Partnership",
type: "circle",
source: "assets",
filter: ["==", "Class", "Partnership"],
paint: {
"circle-color": "#b39124",
'circle-radius': 10,
"circle-opacity": 1,
"circle-stroke-width": 0,
"circle-stroke-opacity": 0,
"circle-stroke-color": "#000"}});
map.addLayer({
id: "clusters",
type: "circle",
source: "assets",
filter: ["has", "point_count"],
paint: {
"circle-color": "#b32914",
'circle-radius': 20,
"circle-opacity": 0.3,
"circle-stroke-width": 0,
"circle-stroke-opacity": 0.5,
"circle-stroke-color": "#2445b3"}})});
map.on('click', 'clusters', function (e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['clusters']});
var clusterId = features[0].properties.cluster_id;
map.getSource('assets').getClusterExpansionZoom(clusterId, function (err, zoom) {if (err)return;
map.flyTo({center: features[0].geometry.coordinates, zoom: zoom});});});
map.on('mouseenter', 'clusters', function () {map.getCanvas().style.cursor = 'pointer'});
map.on('mouseleave', 'clusters', function () {map.getCanvas().style.cursor = ''});
slider.addEventListener('input', function(e) {
map.setPaintProperty('clusters', 'circle-stroke-opacity', parseInt(e.target.value, 10) / 100);
sliderValue.textContent = e.target.value+ '%';
});
//FILTER
toggleLayer(['Residential'], 'Residential');
toggleLayer(['Hotesl'], 'Hotels');
toggleLayer(['Office'], 'Offices');
toggleLayer(['Land'], 'Land');
toggleLayer(['Estate'], 'Estate');
toggleLayer(['Retail'], 'Retail');
toggleLayer(['Security'], 'Security');
toggleLayer(['Partnership'], 'Partnership');
function toggleLayer(ids, name) {
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.textContent = name;
link.onclick = function (e) {
for (layers in ids){
var visibility = map.getLayoutProperty(ids[layers], 'visibility');
if (visibility === 'visible') {
map.setLayoutProperty(ids[layers], 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(ids[layers], 'visibility', 'visible');
}
}
};
var layers = document.getElementById('menu');
layers.appendChild(link);
}
</script>
</body>
</html>
因此，基本上，当关闭图层的可见性按钮时，群集的point_count应该更新，并且仅基于可见图层。在上面的Mapboxjs的示例中，几行似乎很容易。对于MapboxGL的类似简单方法的任何帮助将不胜感激。