MapboxGL - Как отфильтровать видимость слоя в point_count кластеров - PullRequest
Новая
       18

MapboxGL - Как отфильтровать видимость слоя в point_count кластеров

0 голосов
/ 02 июля 2019

Здравствуйте, я новичок в коде и здесь.Я создал карту в 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 будет высоко ценится.

...