MapVGL实现3D柱形条——数据可视化1

MapVGL数据可视化

• MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。
  本次记录MapVGL使用过程， 效果如下，废话不多说， 开整。
  

引入百度地图GL版本和mapvgl

<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密钥"></script>

<script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>

// 如果使用到Three.js相关的图层需要引用
<script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>

页面创建一个有宽高的元素, 用于初始化地图

<div id="mapContainer" class="baiduMap" style="width:100%; height:100%"></div>

以下例子在vue中开发, 初始化方法自己进行了封装并且修改了地图样式, 大家可以按照官网的方法进行初始化操作.

this.map = initMap({
    container: 'mapContainer', // 元素id
    tilt: 60, // 地图倾斜角度
    heading: 0, // 地图旋转角度
    center: [114.061677, 22.551393], // 中心点
    zoom: 1, // 层级
    style: purpleStyle // 这里修改了默认的地图样式
});

this.view = new mapvgl.View({ // 创建MapVGL图层管理器
    map: this.map
});

通过查看官网, 我们得知HeatGridLayer热力柱形条图层有以下API, 需要多多尝试才能达到我们想要的效果. 例子中的数据是在网上收集的, 不符合MapVGL的规范, 我们需要格式化数据.

this.barData = [];
let list = [];
// 格式化所需要的的数据
for (let index = 0; index < dataList.length; index++) {
    const element = dataList[index];
    this.barData.push({
        geometry: {
            coordinates: [element[0], element[1]],
            type: 'Point'
        },
        properties: {count: element[2]}
    });
    list.push(element[2]+0); // 
}
let res = {
    max: Math.max(...list)-0, // 最大阈值
    min: Math.min(...list)-0, // 最小阈值
    maxHeight: 3000000, // 最大高度
    minHeight: 2, // 最小高度
    gridSize: 30000, // 柱状图单个柱子的半径
    style: 'normal', // grid，默认值，按半径聚合展示 normal，按真实坐标展示
    riseTime: 1000, // 楼块初始化升起时间
    gradient: { // 各阶段渐变色(0-1)
        0.0: 'rgb(50, 50, 256)',
        0.1: 'rgb(50, 250, 56)',
        0.5: 'rgb(250, 250, 56)',
        1.0: 'rgb(250, 50, 56)'
    },  
};
this.grid = new mapvgl.HeatGridLayer(res); // 创建热力图图层
this.view.addLayer(this.grid); // 添加到图层上
this.grid.setData(this.barData); // 设置数据

到此我们根据各区域的数据值使用3D柱形条展示在地图上, 通过柱形条的高低及颜色我们可以清晰的看到全球数据的趋势.

我们还可以给地图添加视角动画, 方便多个角度去观察.

let keyFrames = [ // 定义关键帧
    {
        center: new BMapGL.Point(113.828642, 23.741507),
        zoom: 2,
        tilt: 80,
        heading: 0,
        percentage: 0
    },
    {
        center: new BMapGL.Point(113.828642, 23.741507),
        zoom: 2,
        tilt: 80,
        heading: 36,
        percentage: 0.1
    },
    {
        center: new BMapGL.Point(113.828642, 23.741507),
        zoom: 2,
        tilt: 80,
        heading: 72,
        percentage: 0.2
    },
    {
        center: new BMapGL.Point(113.828642, 23.741507),
        zoom: 2,
        tilt: 80,
        heading: 108,
        percentage: 0.3
    },
    {
        center: new BMapGL.Point(113.828642, 23.741507),
        zoom: 2,
        tilt: 80,
        heading: 144,
        percentage: 0.4
    },
    {
        center: new BMapGL.Point(113.828642, 23.741507),
        zoom: 2,
        tilt: 80,
        heading: 180,
        percentage: 0.5
    },
    {
        center: new BMapGL.Point(113.828642, 23.741507),
        zoom: 2,
        tilt: 80,
        heading: 216,
        percentage: 0.6
    },
    {
        center: new BMapGL.Point(113.828642, 23.741507),
        zoom: 2,
        tilt: 80,
        heading: 252,
        percentage: 0.7
    },
    {
        center: new BMapGL.Point(113.828642, 23.741507),
        zoom: 2,
        tilt: 80,
        heading: 288,
        percentage: 0.8
    },
    {
        center: new BMapGL.Point(113.828642, 23.741507),
        zoom: 2,
        tilt: 80,
        heading: 324,
        percentage: 0.9
    },
    {
        center: new BMapGL.Point(113.828642, 23.741507),
        zoom: 2,
        tilt: 80,
        heading: 360,
        percentage: 1
    },
];
let opts = {
    duration: 15000, // 花费时间
    delay: 20, // 延迟
    interation: 'INFINITE' // 循环, 可设置数字为次数
};
let animation = new BMapGL.ViewAnimation(keyFrames, opts); // 创建视角动画
this.map.startViewAnimation(animation); // 开始动画