可视化例子(1)——Mapbox-bar3D(3D地图柱状图)

一、效果图

二、底图说明

底图使用的是 Mapbox 地图，当调用时首先需要使用accessToken（可以在 Mapbox 官网免费申请）

mapboxgl.accessToken = '你的accessToken'

mapbox地图模板样式：

mapbox://styles/mapbox/streets-v10

mapbox://styles/mapbox/outdoors-v10

mapbox://styles/mapbox/light-v9

mapbox://styles/mapbox/dark-v9

mapbox://styles/mapbox/satellite-v9

mapbox://styles/mapbox/satellite-streets-v10

mapbox://styles/mapbox/navigation-preview-day-v2

mapbox://styles/mapbox/navigation-preview-night-v2

mapbox://styles/mapbox/navigation-guidance-day-v2

mapbox://styles/mapbox/navigation-guidance-night-v2

三、数据格式 

数据以“[[精度，维度，柱子高度],[精度，维度，柱子高度],[精度，维度，柱子高度]...]”这样的形式存储在Json文件中，通过Filter函数存储到 data 里面：

$.getJSON('./data/population.json', function (data) {
                data = data.filter(function (dataItem) {
                    return dataItem[2] > 0;
                }).map(function (dataItem) {
                    return [dataItem[0], dataItem[1], dataItem[2]];
                });
});

四、完整代码