MapboxGL Satz Sichtbarkeit basierend auf Eigenschaft von Daten aus der Datei geladen

Question

Ich versuche, ein Beispiel an https://www.mapbox.com/mapbox-gl-js/example/filter-markers/, aber in meinem Fall geschrieben zu folgen, wird die GeoJSON Daten aus einer externen Datei geladen:

map.on('load', function() { 
    map.addSource("cacheData", { 
     type: "geojson", 
     data: "./data.geojson", 

Wenn ich m dem Beispiel folgend, scheint ich keinen Zugriff auf die Variable 'markers' zu haben, um durchzulaufen und jeden Marker zu einem Layer hinzuzufügen.

In der ursprünglichen Version von Mapbox.js, ich bin in der Lage zu aktivieren/deaktivieren ein einzelnes Feature .. Ich bin nicht in der Lage, dies in der gleichen Weise in MapboxGL zu tun.

Gibt es ein Ereignis oder etwas, das ich verwenden kann, um möglicherweise die Daten zu ändern, wie es geladen wird, um jeden Marker aus der Datei zu einem Layer hinzuzufügen?

Answer 1

In der example from Mapbox, die Sie veröffentlicht haben, gibt es var markers = {} Deklaration. Zum Beispiel

var markers = { 
    // properties snipped, see link for GeoJson data 
} 

Aber in Ihrem map.on() Anruf, verweist es ./data.geojson. Sie haben also kein markers Objekt, mit dem Sie arbeiten können.

Es kann einfacher sein, die map.addsource() vom Einziehen des GeoJson von der Festplatte zu trennen.

Hier ist ein Ansatz, den Sie Jquery bis getJSON Daten von einem lokalen Pfad oder URL zuerst verwenden können, dann können Sie das Ergebnis in map.on verwenden.

<!-- 1. Add these JavaScript inclusions in the head of your page --> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.0.0.min.js"> 
     </script> 

    <script type="text/javascript"> 
    $(document).ready(function() { 

     var geoJsonFile = "./data.geojson"; 


     $.getJSON(geoJsonFile, function(markers){ 

     console.log(markers.type); 

     }); // getJSON 
    }); // $(document)