カスタムMapboxスタイルの内部GeoJSONデータをソースとして使用

Question

現在、Mapboxのサーバーにアップロードすると、shapefiles（GeoJSONに変換）からのデータを使用してマップをレンダリングしようとしています。デモページで使用されるように、私は、私は効率的にマップをレンダリングしている場合は、お問い合わせしたいと思います https://ciatph.github.io/amia-lowres-hover.html

：

私のデモの出力がで見ることができます。これまでのところ、私が持っている：タイルセット

にデータセットのエクスポートにGeoJSON データセット

は初期をロードするためにスタイルを使用し

スタイルにタイルセットを追加しました

1. をアップロードベースマップ
2. アップロードされた画像データセットを別のデータソースとして使用Layer（最初の地図の上に）。この層は、リッスンして、マウスのホバーに応答し、イベントのステップ＃5で作成したレイヤごとに異なるホバー地域を着色するフィルタと別のレイヤのデータソースとしてアップロードデータセット使用し
3. をクリックします。

Screenshot of relevant Mapbox script

このアプローチのための私の質問は以下のとおりです。

• map.addSource（）の部分はスタイルの内部（にGeoJSON）データセットを使用する方法はあります、そのようなそれそれインタラクティブなレイヤーを作成するために再ロードまたは再定義する必要はありませんか？私はこの時点で再度ダウンロードされた場合、ネットワーク活動に懸念しています。また、これが可能かどうかを知ることにも興味があります。これは、GeoJSONデータのサイズがほぼ100MBであるためです。これは、Amazon S3の一時サーバーからマップボックスに移動すると自動的にTilesetに変換され、map.addSource（）partで再生するDatasetは作成されません。

• Mapboxのデフォルトスタイルをベースマップ：// styles/mapbox/streets-v9）、ステップ＃4を省略します。このアプローチの場合、データセットの読み込み（ステップ＃5）は、スタイルを使用して読み込まれているのとは対照的に、大規模なデータに対して効率的かつ高速ですか？

私はあなたの質問に私を助けて、より販売可能で効率的なアプローチを教えてくれることを願っています。ありがとうございました。あなたの現在の状況を明確にすることにより

Answer 1

レッツ・スタート：

• あなたstyleにid ciatph.cj64in9zo1ksx32mr7ke3g7vb-93srzとベクタタイルセットが含まれているが、compositeベクトルタイルソース内amia-lowres-tilesetとして、あなたのスタイルに言及しました。
• データセットとしてアップロードしたので、ID ciatph/cj64in9zo1ksx32mr7ke3g7vbによってデータセットとしてアクセスすることもできます。
• 実行時にスクリプトがデータセットをロードしています。

タイルセットの代わりにデータセットを参照する必要はありません。したがって、データセットを追加するコードを削除し、2つのスタイルを更新してタイルセット（source: "composite"）を参照してください。

// Only used for coloring hover effect. Data informatiion be retrieved from styles alone 
    /*  
    map.addSource("dataSource", { 
     "type": "geojson", 
     'data': 'https://api.mapbox.com/datasets/v1/ciatph/cj64in9zo1ksx32mr7ke3g7vb/features?access_token=pk.eyJ1IjoiY2lhdHBoIiwiYSI6ImNqNXcyeTNhcTA5MzEycHFpdG90enFxMG8ifQ.gwZ6uo6pvx4-RZ1lHODcBQ' 
    });  
    */ 

    // add layer to color the raw source data 
    map.addLayer({ 
     'id': 'municipalities', 
     "type": "fill", 
     "source": "composite", 
     "source-layer": "amia-lowres-tileset", 
     "layout": {}, 
     "paint": { 
      "fill-color": "#627BC1", 
      "fill-opacity": 0.5 
     } 
    }); 

    // add a conditional layer to play over the source data on hover event 
    map.addLayer({ 
     "id": "state-fills-hover", 
     "type": "fill", 
     "source": "composite", 
     "source-layer": "amia-lowres-tileset", 
     "layout": {}, 
     "paint": { 
      "fill-color": "#ff4", 
      "fill-opacity": 1 
     }, 
     "filter": ["==", "MUNI_CITY", ""] 
    });   

https://codepen.io/stevebennett/pen/OjvMWO