6

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

また、Mapbox 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 初心者なので、まったく単純なものであれば申し訳ありません。

Firefox のコンソールでは、長さゼロの配列を取得します。ここからどこへ行くべきかわからない。

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

4

1 に答える 1

6

編集:ソースを追加した後、タイルが読み込まれるまで待ってから呼び出す必要があります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は正しいですか?

于 2016-05-16T18:28:34.153 に答える