基于WebGL的地理大数据可视化：Uber的deck.gl框架的简介与使用

简介

deck.gl是Uber开发并开源的基于WebGL的地理大数据可视化框架，根据其官网的介绍其有以下三点优势：第一点由于是基于WebGL开发的可视化框架，前端大数据渲染的性能自然没的说，明显优于那些基于canvas 2D或者SVG的可视化库。第二点是其GPU渲染的高精度。第三点是该框架能与前端主流的React很好的集成。
Uber的这个框架最吸引我的还是基于图层的可视化设计理念，相信这个理念可以让所有的GISer眼前一亮，这将使客户端的数据可视化更加灵活易用，下面给出其官网地址与源码地址
deck.gl官网地址
源码托管地址

在本地部署运行deck.gl框架的Demo

首先介绍一下如何把官网的demo在本地run起来，下面的步骤仅仅处于个人习惯
注意要进行如下步骤你需要先安装node与npm
当前版本node已集成npm,node安装可以参加该教程node与npm安装

第一步：为了方便学习，把其源码down下来

git clone https://github.com/uber/deck.gl.git

第二步：定位到你想要跑起来的demo下

npm install

安装运行该demo所需的依赖，由于npm服务器在国外，由于网关的限制会丢给你莫名其妙的错误这里我们可以设置自己使用的国内镜像来进行依赖的安装可参考该教程设置npm淘宝镜像
下面我们就以NewYork出租车轨迹可视化来说明
第三步：上一步已经将该demo所需的依赖down下来了，该目录下也多了一个node_modules文件夹。我们只需要把项目run起来就ok了,执行

npm start

浏览器打开，数据也加载进来了，但是mapbox的底图不见了，如下图所示

提示我们使用mapbox的底图需要一个访问秘钥,点击下面链接申请mapbox access token申请
得到秘钥后在git中执行如下命令就成功将官网demo跑起来了

export MapboxAccessToken=你的access token不用加双引号 && npm start

本章小结
工具是给我们可视化地理数据提供便利的，组里一个师弟毕业设计是做拿出租车数据做地图匹配，这里我就顺便帮他把数据展示出来看一看他的匹配精度，下一章我们将具体介绍。

利用deck.gl框架可视化自己的建筑物与轨迹数据

这里最快捷的可视化展示方法就是将你已有的轨迹数据和建筑物数据转化为其demo中所使用的数据格式，可以看到他们所使用的格式为JSON格式
这里首先推荐一个强大的空间数据格式转换工具，我们可以利用它将mid（mapinfo）格式的建筑物数据转为json,然后将其组织成demo提供的JSON格式 https://mygeodata.cloud/converter/
利用下面的代码可以将原始建筑物JSON格式转换为demo中所使用的JSON格式（仅供参考，根据自己数据灵活转换）

 var builddata;
    var building = new Array();
    var buildobj ;
    $.getJSON("building-wgs84.json", function (data) {
        
        builddata = data;
        builddata.features.forEach(function (singlebuild) {
            buildobj = {};
            buildobj.height = parseFloat(singlebuild.properties.HEIGHT);
            buildobj.polygon = singlebuild.geometry.coordinates[0];
            building.push(buildobj);
        });
        var s = JSON.stringify(building);
        console.log(s, null, '');
        }
    );

下面我们进行轨迹数据处理。这里我拿到的轨迹数据是txt格式的，按照demo使用的json格式将其转换，这里我用c#写了个小工具用于转换txt到所需的json格式
将所需cs文件放到了github上
https://github.com/upcwxq666/trajTxt2JSON

此时我们数据准备完毕

找到app.js文件中图片中引入json数据的部分改为自己数据的路径

再一次

export MapboxAccessToken=你的access token不用加双引号 && npm start

这里我用的是青岛市市南区香港中路附近的一些建筑物数据与轨迹数据结果如下

蓝色轨迹为匹配前，红色为匹配后，我们可以直观的看出，地图匹配取得了不错的效果。

小结
说点题外话，mapbox真的很牛，中国需要一家类似的公司！！！