マップボックスWeb GL JSタイルソースを使用したquerySourceFeatures（）関数

Question

オーストラリアのビクトリアにある特定の郊外を表すポリゴンからなるgeojsonファイルをアップロードして作成したマップボックスにベクトルタイルセットがあります。私のベクトルタイルセットには、geojsonのフィーチャプロパティに対応する3つのプロパティ（郊外、州、郵便番号）があります。

マップボックスのWeb gl jsライブラリを使用してこれらのプロパティを正常にクエリして、正確なマップを取得することもできます。たとえば、ハイライトされたポリゴンをクリックするとポップアップが表示され、ポップアップでその郊外のプロパティ（郊外、州、郵便番号）が正しく表示されているマップが作成されています。

今、私のタイルセットのすべての機能について、自分のWebページにアクセスしたいと思います。私は基本的に地図の外にあるdiv内にリストとしてそれらのプロパティを出力したい。各郊外とそのプロパティをリストするだけです。この目的のために、MapBox Web GL JSライブラリのquerySourceFeatures関数を使用しようとしています。私は少し苦労している。

ここに私のコードです。私のマップは期待通りに表示されます。しかし、JSコンソールでは空の配列を取得しています。

はここに私のコード

var map = new mapboxgl.Map({ 
    container: 'map', // container id 
    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location 
    center: [144.96, -37.81], // starting position 
    zoom: 8, // starting zoom, 
    hash:true 
}); 

// Add zoom and rotation controls to the map. 
map.addControl(new mapboxgl.Navigation()); 

map.on('load', function() { 
    map.addSource('charlieSource', { 
     type: 'vector', 
     url: 'mapbox://charlie.962dstid' 
    }); 


    map.addLayer({ 
    "id": "charlielayer", 
    "type": "fill", 
    "source": "charlieSource", 
    "source-layer": "my-source-layer-name", 
    "layout": {}, 
    "paint": { 
     "fill-color": "#00525a", 
     "fill-opacity": 0.5 
    } 

    }); 

    var myFeatures = map.querySourceFeatures('charlieSource', 
     { 
      sourceLayer: 'my-source-layer-name', 
      // i'm confident there is data matching this filter 
      filter: ["==", "postcode", "3000"] 
     } 
     ); 

    console.log(myFeatures); 


}); 

だDOCOは私が正しくquerySourceFeatures機能を使用している場合ので、私は知らないビットの光です。私は完全なJSのnoobので、謝罪それは完全に単純な場合。

Firefoxの私のコンソールでは、ちょうど長さゼロの配列が得られます。ここからどこに行くのかわからない。

私はmapbox web gl jsライブラリのv0.18.0を使用しています。

Answer 1

EDIT：ソースを追加した後、queryRenderedFeaturesを呼び出す前にタイルが読み込まれるまで待つ必要があります。このコードは、あなたの問題を解決する必要があります：あなたが投稿した

var wasLoaded = false; 
map.on('render', function() { 
    if (!map.loaded() || wasLoaded) return; 
    var myFeatures = map.querySourceFeatures('charlieSource', { 
     sourceLayer: 'my-source-layer-name', 
     filter: ["==", "postcode", "3000"] 
    }); 
    console.log(myFeatures); 
    wasLoaded = true; 
}); 

---

すべては、チャーリーが正しく見えます。私はあなたのデータを使用して機能しているデモなしで問題を特定することはできません。

フィルタを["==", "postcode", "3000"]から["==", "postcode", 3000]に変更してみましたか？ （文字列ではなく数字に3000を変換する）

検索するデータがビューポート内にあることを確認してください。 querySourceFeaturesは、ビューポート内のデータに対してのみ機能します。

sourceとsourceLayerの値は正しいですか？