マップボックス内の既存のレイヤーにソースを追加するGL

Question

タイトルはかなり私がやろうとしていることを述べています。

マップ上のマーカーのバックエンドとしてFirebaseを使用しており、on('child_added')メソッドを使用してこれらを監視しています。データベース内の特定の場所にあるノードごとに、on('child_added')が1回発射されます。

これは、作成される新しいノードにも当てはまります。したがって、データベースに追加されるときにマップに新しいマーカーを非同期的に追加するのに最適です。

マップ上にこれらを表示するには、マップボックスGLでデータをgeojsonに変換し、ソースを作成してこのソースをレイヤーに追加する必要があります。下のコードはこれを示しており、地図上に実際にマーカーを表示しています。

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 
    }); 
}); 

問題は、マーカーが個別のソースにあり、マーカーが異なるレイヤーに表示されることです。したがって、私はそれらをクラスター化することはできません。それらを検索します。

私が探しているのはです。既存のレイヤーにソースを追加する方法です。これにより、on('child_added')メソッド以外のレイヤーを作成し、このレイヤーにソースを追加することができます。

私はマップボックスGLドキュメントを見ましたが、そこでは私がこれを行うことができる何かを見つけることができません。この点でmapbox jsに比べて非常に限られているようです。

これはかなり重要な機能だとわかりましたが、なぜこれができないのか分かりません。あなたの中には回避策があるか、マップボックスGLの地図にマーカーを非同期的に追加する方法があることを願っています。

Answer 1

https://www.mapbox.com/mapbox-gl-js/api/#GeoJSONSourceのドキュメントには、GeoJSONデータオブジェクトまたはそのURLが記載されています。後者は、大きなGeoJSONファイルの場合に適しています。

URLを介してロードされたgeojsonソースは、バックグラウンドスレッドワーカーを使用してロードされるため、メインスレッドには影響しませんので、基本的には常にURLまたはマップボックススタイルでデータをロードして、別のスレッドに。したがって、firebaseの監視から変更イベントが発生したときはいつでも、最初にソースをロードするために使用しているURLをリロードすることができます。

さらに、リーフレットと驚くべきマップボックスデベロッパーのウラジミールアガフォンキンの創始者であるhttps://github.com/mapbox/mapbox-gl-js/issues/2289については、リアルタイムでの例ではhttps://www.mapbox.com/mapbox-gl-js/example/live-geojson/のとおりです。

さらに、ソケットを使用した例を示します。私はクライアント側を使用します：

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}" 
       } 
      }); 
     }); 

Answer 2

私は同じ問題があります。私はこの上でいくつかの検索を行なったし、私はGeoJSONSourceのためにsetData属性が見つかりました： 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], 
    } 
}); 

その後、私はそうのような新しいレイヤーを作成せずに、ソースを更新：

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

だから、これが更新されます新しいレイヤを作成せずに次に、このレイヤーを検索することができます。私が遭遇した唯一の問題は、setDataが以前のすべてのデータを消去することです（ "addData"機能はありません）ので、以前のマーカーを保存してもう一度追加する必要があります。あなたがこれの回避策を見つけたら教えてください。