지도 상자를 사용하여 동적 데이터 시각화

Question

다음은이 example을 따르며 mapbox를 사용하여지도에 데이터를 시각화합니다.

<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으로 간단히 업데이트하면됩니다.