2017-10-05 224 views
0

我正在关注此example以使用mapbox可视化地图上的数据。我使用下面的代码:使用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获取此行为? 谢谢。

回答

0

如果数据足够小,您可以简单地将它全部加载到浏览器中作为GeoJSON对象,然后使用geojson来源显示它。请参阅this example

如果数据发生变化,您可以用.setData(newdata)example简单更新源对象。