Quelle hinzufügen, um vorhandene Ebene in mapbox GL

Den Titel ziemlich viel sagt, was ich zu tun beabsichtigen.

Ich bin über FB als backend für Markierungen auf einer Karte und verwenden Sie die on('child_added') Methode zum überwachen diese. Für jeden Knoten auf einer bestimmten Position in der Datenbank, die on('child_added') wird ausgelöst, sobald.

Dies gilt auch für die neuen Knoten erstellt wird, ist also perfekt für asynchron hinzufügen neuer Marker auf der Karte, wie Sie in der Datenbank Hinzugefügt werden.

Damit zeigen diese auf einer Karte, mapbox GL verlangt von mir, die Daten transformieren zu geojson erstellen Sie eine Quelle und dann das hinzufügen dieser Quelle auf eine Ebene. Der code unten zeigt, und es zeigt tatsächlich die Marker auf der Karte.

markersRef.on('child_added', function(childSnapshot) { //fires once for every child node
    var currentKey = childSnapshot.key; //the key of current child
    var entry = childSnapshot.val(); //the value of current child

    //creates a geojson object from child
    var geojson = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [entry.position.long, entry.position.lat]
            }
        }],
        "properties": {
            title: entry.title,
            text: entry.text
        }
    };

    //creates a source with the geojson object from above
    map.addSource(currentKey, { //currentKey is the name of this source
        "type": "geojson",
        "data": geojson,
        cluster: true //clusters the points in this source
    });

    //adds the source defined above to a layer that will be displayed on a map
    map.addLayer({
        "id": currentKey, //Sets id as current child's key 
        "source": currentKey, //The source layer defined above
    });
});

Das problem ist, dass die Marker werden in den einzelnen Quellen, wodurch Sie erscheinen auf verschiedenen Ebenen. Daher kann ich Clustern oder z.B. eine Suche in Ihnen.

Was ich Suche ist eine Möglichkeit zum hinzufügen einer Quelle zu einer vorhandenen Ebene. Das würde mir ermöglichen, eine Schicht zu erstellen, die außerhalb der on('child_added') – Methode, und fügen Sie dann die Quellen zu dieser Ebene.

Ich habe mir die mapbox GL docs, aber ich kann dort nichts finden, was, die mir ermöglichen, dies zu tun. Es scheint nur sehr begrenzt in dieser Hinsicht im Vergleich zu mapbox js.

Ich sehe dies als eine sehr wichtige Funktion und verstehe nicht, warum dies nicht möglich ist. Ich hoffe, dass einige von Euch einen workaround oder eine Möglichkeit das zu erreichen asynchron hinzufügen von Markern auf einer Karte bei mapbox GL.



2 Replies
  1. 1

    Als die Dokumentation auf https://www.mapbox.com/mapbox-gl-js/api/#geojsonsource Staaten: Eine GeoJSON-Daten-Objekt oder eine URL zu einem. Letzteres ist vorzuziehen, bei größeren GeoJSON-Dateien.

    Was hier passiert, ist, dass geojson Quellen geladen, die über eine url geladen werden über einen hintergrund-thread Arbeiter, so dass Sie nicht auf den Haupt-thread, im Grunde immer laden Sie Ihre Daten per url oder eine mapbox-Stil zu entlasten alle JSON-parsing-und layer laden zu einem anderen thread. Damit Sie jederzeit, wenn Sie haben ein change-Ereignis ausgelöst, von Ihrem FB-monitoring können Sie laden Sie einfach die url, die Sie verwenden, um zunächst laden Sie die Quelle.

    Darüber hinaus der Gründer des Flugblattes und erstaunliche Mapbox-Entwickler Vladimir Agafonkin, beschreibt dieser hier: https://github.com/mapbox/mapbox-gl-js/issues/2289, und es ist im wesentlichen, was Sie tun, in Ihrer real-time Beispiel: https://www.mapbox.com/mapbox-gl-js/example/live-geojson/.

    Außerdem, hier ist ein Beispiel mit sockel.io ich nutze client-Seite:

    const url = {server url that retrieves geojson},
          socket = {setup all your socket initiation, etc};
    
          socket.on('msg', function(data) {
    
                if (data) {
                    //Here is where you can manipulate the JSON object returned from the socket server
                    console.log("Message received is: %s", JSON.stringify(data));
                    if(data.fetch){
                        map.getSource('stuff').setData(url)
                    }
    
                } else {
                    console.log("Message received is empty: so it is %s", JSON.stringify(data));
                }
    
            });
    
    
            map.on('load', function(feature) {
    
                map.addSource('events', {
                    type: 'stuff',
                    data: url
                });
                map.addLayer({
                    "id": "events",
                    "type": "symbol",
                    "source": "events",
                    "layout": {
                        "icon-image": "{icon}"
                    }
                });
            });
    
  2. 3

    Ich habe das gleiche problem. Ich habe einige suchen und ich fand die setData-Attribut für GeoJSONSource:
    https://www.mapbox.com/mapbox-gl-js/api/#geojsonsource#setdata

    map.addSource("points", markers);
    map.addLayer({
      "id": "points",
      "type": "symbol",
      "source": "points",
      "layout": {
      "icon-image": "{icon}-15",
      "icon-allow-overlap": true,
      "icon-ignore-placement": true,
      "icon-size": 2,
      "icon-offset": [0, -10],
      }
    });
    

    Später dann update ich die Quelle, ohne erstellen einer neuen Ebene etwa so:

    map.getSource('points').setData(newMarkers)
    

    Also diese updates die Quelle ohne erstellen einer neuen Ebene. Dann kannst du suchen über diese Schicht. Das einzige problem begegnete ich war, dass setData löscht alle vorherigen Daten (es gibt keine „addData“ – Funktionalität), so müssen Sie speichern die vorherigen Markierungen und fügen Sie Sie erneut. Lassen Sie mich wissen, wenn Sie eine Abhilfe für dieses.

    • Naja, ich glaube, das ist die beste Lösung für jetzt. Landete ich Kontakt mit Mapbox und das war eigentlich der Vorschlag als gut. Ich denke, es funktioniert, aber ich glaube, es muss ziemlich ineffizient, vor allem mit einer größeren Datenmenge. Trotzdem, vielen Dank für Ihre Antwort! Ich werde Euch auf dem Laufenden halten, wenn ich eine andere Lösung finden – bitte das gleiche tun 🙂
    • Ich glaube mich zu erinnern irgendwo gelesen zu haben, dass mapboxGL automatisch Unterschiede der neuen von der bisherigen Daten und aktualisiert nur, was notwendig ist…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.