マップボックスを使用して動的データを視覚化する

Question

私はこのexampleに従っており、マップボックスを使用して地図上にデータを視覚化しています。

<script> mapboxgl.accessToken = 'ACCESS_TOKEN; var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/light-v9', 
    zoom: 12, 
    center: [-122.447303, 37.753574] }); 

map.on('load', function() { 

    map.addLayer({ 
     'id': 'population', 
     'type': 'circle', 
     'source': { 
      type: 'vector', 
      url: 'mapbox://examples.8fgz4egr' 
     }, 
     'source-layer': 'sf2010', 
     'paint': { 
      // make circles larger as the user zooms from z12 to z22 
      'circle-radius': { 
       'base': 1.75, 
       'stops': [[12, 2], [22, 180]] 
      }, 
      // color circles by ethnicity, using data-driven styles 
      'circle-color': { 
       property: 'ethnicity', 
       type: 'categorical', 
       stops: [ 
        ['White', '#fbb03b'], 
        ['Black', '#223b53'], 
        ['Hispanic', '#e55e5e'], 
        ['Asian', '#3bb2d0'], 
        ['Other', '#ccc']] 
      } 
     } 
    }); }); </script> 

私の質問は、私はユーザークエリの結果であるサイズ可変データセットを、持っているということです、と私は私のデータセットを視覚化したいと思います：私は、次のコードを使用します。 mapboxを使用してこの動作を取得するにはどうすればよいですか？ ありがとうございます。

Answer 1

データが十分小さい場合は、GeoJSONオブジェクトとしてブラウザーにすべてロードしてから、geojsonソースで表示します。 this exampleを参照してください。

データが変更された場合は、ソースオブジェクトを.setData(newdata)：exampleで単純に更新します。