ein- und ausblenden Merkmale einer Schicht, in MapBox GL JS

ich den folgenden Code in MapBox GL ein- und ausblenden Schichten gefunden haben:ein- und ausblenden Merkmale einer Schicht, in MapBox GL JS

https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/

Dies ist hilfreich, aber ich habe nur eine .geojson Layer (Polylinien) mit allen notwendigen Daten und müssen keine separaten Layer erstellen.

Ich möchte genau die gleiche Funktion machen, um Features einer Ebene im Kartenmenü ein- und ausblenden zu können. Es gibt insgesamt 12 verschiedene Feature-Typen, die in der Spalte "Typ" enthalten sind. Ich möchte Typen wie im Beispiel ein- und ausschalten.

Gibt es eine einfache Möglichkeit, dies in JS mit der set.Filter zu tun? https://github.com/mapbox/mapbox-gl-js/blob/e9386d2880cc2c33e9a5a16b9bcb58834026a078/js/ui/map.js#L559-L562

Ich war nicht in der Lage, eine Lösung zu finden.

Meine .geojson Schicht ist hier: https://iskandarblue.github.io/mapbox/data/simplify_prototype.geojson

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8' /> 
    <title></title> 
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script> 
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet' /> 
    <style> 
     body { margin:0; padding:0; } 
     #map { position:absolute; top:0; bottom:0; width:100%; } 
    </style> 
</head> 
<body> 

<style> 
    #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; 
    } 
</style> 

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

<script> 
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpazE3MTJldjAzYzZ1Nm0wdXZnMGU2MGMifQ.i3E1_b9QXJS8xXuPy3OTcg'; 
var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v8', 
    zoom: 15, 
    center: [-71.97722138410576, -13.517379300798098] 
}); 

map.on('style.load', function() { 
    map.addSource('museums', { 
     type: 'vector', 
     url: 'mapbox://mapbox.2opop9hr' 
    }); 
    map.addLayer({ 
     'id': 'museums', 
     'type': 'circle', 
     'source': 'museums', 
     'paint': { 
      'circle-radius': 8, 
      'circle-color': 'rgba(55,148,179,1)' 
     }, 
     'source-layer': 'museum-cusco' 
    }); 

    map.addSource('contours', { 
     type: 'vector', 
     url: 'mapbox://mapbox.mapbox-terrain-v2' 
    }); 
    map.addLayer({ 
     'id': 'contours', 
     'type': 'line', 
     'source': 'contours', 
     'source-layer': 'contour', 
     'layout': { 
      'line-join': 'round', 
      'line-cap': 'round' 
     }, 
     'paint': { 
      'line-color': '#877b59', 
      'line-width': 1 
     } 
    }); 
}); 

addLayer('Contours', 'contours'); 
addLayer('Museums', 'museums'); 

function addLayer(name, id) { 
    var link = document.createElement('a'); 
    link.href = '#'; 
    link.className = 'active'; 
    link.textContent = name; 

    link.onclick = function (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 

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

     if (visibility === 'visible') { 
      map.setLayoutProperty(id, 'visibility', 'none'); 
      this.className = ''; 
     } else { 
      this.className = 'active'; 
      map.setLayoutProperty(id, 'visibility', 'visible'); 
     } 
    }; 

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

</script> 

</body> 
</html>

Quelle

2016-03-18 the_darkside

haben würden Sie https://www.mapbox.com/mapbox-gl-js/example/filter-markers/ gesehen? Dieses Beispiel zeigt dieses Verhalten (Ausblenden von Features über einen Filter). – tristen

Ich habe versucht, das Gleiche zu tun und am Ende Combo Filter verwenden. Ähnlich wie bei Ihnen, ich eine Karte mit einer GeoJSON Quelle haben:

map.addSource('routes', { 
    'type': 'geojson', 
    'data': geoJSON 
});

Auf dieser Karte habe ich eine Schicht mit allen meinen Touren

map.addLayer({ 
    'id': 'route-no-hover', 
    'type': 'line', 
    'source': 'routes', 
    'layout': { 
     'line-join': 'round', 
     'line-cap': 'round' 
    }, 
    'paint': { 
     'line-color': '#333', 
     'line-opacity': 0.25, 
     'line-width': 4 
    } 
});

Ich bin dem alle meine Routen und die Bereitstellung der Benutzer mit der Verfügbarkeit, um sie ein- und auszuschalten. Es klingt, als ob mein Konzept von "Routen" Ihren "Typen" entspricht. Wenn ein Benutzer einen Routennamen klickt, um sie auszuschalten, schiebe ich IDs dieser Strecke in ein Array namens ‚versteckte‘ dann eine Reihe von Filtern erstellen basierend auf diesen IDs:

let hiddenFilters = ['all']; 
_.forEach(mapMeta.hidden, (route) => { 
    hiddenFilters.push([ 
     '!=', 
     'id', 
     route.toString() 
    ]); 
}); 
map.setFilter('route-no-hover', hiddenFilters);

Bitte beachte, dass ich lodash bin mit aber verwenden Sie könnten nur Array.forEach()

ich effektiv bin ein Filter zu schaffen, wie this combining filter described in the filtering docs aussieht:

[ 
    "all", 
    ["!=", "id", "routeIDHere"], 
    ["!=", "id", "routeIDHere"], 
    ... 
]

Dies schließt alle Routen mit den IDs I angeben. In Ihrem Fall, ich glaube, Sie so etwas wie

[ 
    "all", 
    ["!=", "type" "YourTypeNameHere"] 
    ... 
]

Quelle

2016-08-15 06:33:13 imjared

ein- und ausblenden Merkmale einer Schicht, in MapBox GL JS

Antwort

Verwandte Themen