Mapbox: видимость нет для всех слоев, когда один виден - PullRequest
Новая
       61

Mapbox: видимость нет для всех слоев, когда один виден

0 голосов
/ 30 апреля 2020

Следуя этому примеру Mapbox (Показать и скрыть слои: https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/), я смог переключаться между несколькими слоями на карте. Но чего бы я хотел добиться, так это когда уровень 1 равен visible, видимость уровня 2 и уровня 3 равна none, когда уровень 2 равен visible, видимость уровня 1 и уровня 3 равна none, et c.

Вот пример скрипки с кодом, который я написал до сих пор: https://jsfiddle.net/reL53uo1/

Вот логика c для части переключения : 

// enumerate ids of the layers
    var toggleableLayerIds = ['contours', 'museums', 'contours2'];

    // set up the corresponding toggle button for each layer
    for (var i = 0; i < toggleableLayerIds.length; i++) {
        var id = toggleableLayerIds[i];

        var link = document.createElement('a');
        link.href = '#';
        link.className = 'active';
        link.textContent = id;

        link.onclick = function(e) {
            var clickedLayer = this.textContent;
            e.preventDefault();
            e.stopPropagation();

            var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

            // toggle layer visibility by changing the layout object's visibility property
            if (visibility === 'visible') {
                map.setLayoutProperty(clickedLayer, 'visibility', 'none');
                this.className = '';
            } else {
                this.className = 'active';
                map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
            }
        };

        var layers = document.getElementById('menu');
        layers.appendChild(link);

Каким будет самый эффективный подход для достижения этой цели? Благодаря.

1 Ответ

1 голос
/ 05 мая 2020

Вы можете изменить функцию onClick, чтобы вместо переключения отдельных слоев она активировала тот, который вам нужен, и скрыла остальные. Вы можете сделать это с помощью for для l oop: 

link.onclick = function(e) {
  var clickedLayer = this.textContent;
  e.preventDefault();
  e.stopPropagation(); 
  for (var j = 0; j < toggleableLayerIds.length; j++) {
    if (clickedLayer === toggleableLayerIds[j]) {
      layers.children[j].className = 'active';
      map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'visible');
    }
    else {
      layers.children[j].className = '';
      map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'none');
    }
  }
};

Кроме того, вы должны установить для свойства 'видимость' каждого слоя значение 'none' в вашей функции addLayer () чтобы они были скрыты, пока они не выбраны. 

'layout': {
  // make layer invisible by default
  'visibility': 'none',
  'line-join': 'round',
  'line-cap': 'round'
},

Я внес эти изменения в ваш код JSFiddle и вставил ниже: 

	mapboxgl.accessToken = 'pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        zoom: 15,
        center: [-71.97722138410576, -13.517379300798098]
    });

    map.on('load', function() {
        // add source and layer for museums
        map.addSource('museums', {
            type: 'vector',
            url: 'mapbox://mapbox.2opop9hr'
        });
        map.addLayer({
            'id': 'Layer 1',
            'type': 'circle',
            'source': 'museums',
            'layout': {
                // make layer invisible by default
                'visibility': 'none'
            },
            'paint': {
                'circle-radius': 8,
                'circle-color': 'rgba(55,148,179,1)'
            },
            'source-layer': 'museum-cusco'
        });

        // add source and layer for contours
        map.addSource('contours', {
            type: 'vector',
            url: 'mapbox://mapbox.mapbox-terrain-v2'
        });
        map.addLayer({
            'id': 'Layer 2',
            'type': 'line',
            'source': 'contours',
            'source-layer': 'contour',
            'layout': {
                // make layer invisible by default
                'visibility': 'none',
                'line-join': 'round',
                'line-cap': 'round'
            },
            'paint': {
                'line-color': '#877b59',
                'line-width': 5
            }
        });
        map.addLayer({
            'id': 'Layer 3',
            'type': 'line',
            'source': 'contours',
            'source-layer': 'contour',
            'layout': {
                // make layer invisible by default
                'visibility': 'none',
                'line-join': 'round',
                'line-cap': 'round'
            },
            'paint': {
                'line-color': 'yellow',
                'line-width': 2
            }
        });
        
        
    });
    
    

    // enumerate ids of the layers
    var toggleableLayerIds = ['Layer 1', 'Layer 2', 'Layer 3'];

    // set up the corresponding toggle button for each layer
    for (var i = 0; i < toggleableLayerIds.length; i++) {
        var id = toggleableLayerIds[i];

        var link = document.createElement('a');
        link.href = '#';
        link.className = '';
        link.textContent = id;

        link.onclick = function(e) {
            var clickedLayer = this.textContent;
            e.preventDefault();
            e.stopPropagation(); 
            for (var j = 0; j < toggleableLayerIds.length; j++) {
                if (clickedLayer === toggleableLayerIds[j]) {
                	layers.children[j].className = 'active';
                	map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'visible');
                }
                else {
                	layers.children[j].className = '';
                	map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'none');
                }
            }
        };

        var layers = document.getElementById('menu');
        layers.appendChild(link);
        
        
    }
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    #menu {
        background: #fff;
        position: absolute;
        z-index: 1;
        top: 10px;
        right: 10px;
        border-radius: 3px;
        width: 120px;
        border: 1px solid rgba(0, 0, 0, 0.4);
        font-family: 'Open Sans', sans-serif;
    }

    #menu a {
        font-size: 13px;
        color: #404040;
        display: block;
        margin: 0;
        padding: 0;
        padding: 10px;
        text-decoration: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
        text-align: center;
    }

    #menu a:last-child {
        border: none;
    }

    #menu a:hover {
        background-color: #f8f8f8;
        color: #404040;
    }

    #menu a.active {
        background-color: #3887be;
        color: #ffffff;
    }

    #menu a.active:hover {
        background: #3074a4;
    }
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>



<nav id="menu"></nav>
<div id="map"></div>
...