基于MapVGL的地理信息三维度数据增长可视化

写在前面

工作中接触，简单整理
博文内容为基于MapVGL的地理信息维度数据增长可视化 Demo
理解不足小伙伴帮忙指正

对每个人而言，真正的职责只有一个：找到自我。然后在心中坚守其一生，全心全意，永不停息。所有其它的路都是不完整的，是人的逃避方式，是对大众理想的懦弱回归，是随波逐流，是对内心的恐惧 ——赫尔曼·黑塞《德米安》

基于MapVGL的地理信息维度数据增长可视化

MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。

MapVGL通过地理信息数据生成可视化图层，然后将这些图层添加在地图上层进行管理。在这个过程中，它使用了WebGL技术在canvas中绘制图形，从而有效地提高了页面性能。此外，MapVGL还提供了大量的模型，包括点图层、线图层、聚合类图层等，每种模型都提供了示例，可以直接运行查看效果。

需要注意的是，地理信息数据格式是规定好的，必须具有geometry字段来定义坐标信息，同时可通过properties字段添加附件信息。而geometry字段数据格式使用的是GeoJSON的规范。

官方Demo: https://mapv.baidu.com/gl/examples/

官网文档：https://mapv.baidu.com/gl/docs/index.html

下面我们看一个通过 MapVGL 来实现的数据可视化的Demo，某公司全国网点建设历年增长可视化

Demo 地址：https://github.com/LIRUILONGS/MapVGL_Demo

效果图

在这里插入图片描述

实现相对简单，渲染地图，然后添加图层，通过 setInterval 方法对图层进行重复渲染，填充数据为当前数据和增量数据

渲染地图

使用百度地图的WebGL版本（BMapGL）来初始化一个地图实例

 var map = new BMapGL.Map('map_container', {restrictCenter: false,style: { styleJson: options.style || darkStyle }});

使用mapvgl来创建一个视图（View）对象，该对象与先前创建的地图（map）相关联。

 var view = new mapvgl.View({map: map});

准备图层数据

  // ，绘制带波纹扩散的圆图层数据 var data = cities.map((city, index) => {var cityCenter = mapv.utilCityCenter.getCenterByCityName(city);return {geometry: {type: 'Point',coordinates: [cityCenter.lng, cityCenter.lat]},color: colors[2],// 圆的半径size: 5};});// 波纹动画图层数据 let datas = cities.map((city, index) => {let cityCenter = mapv.utilCityCenter.getCenterByCityName(city);return {geometry: {type: 'Point',coordinates: [cityCenter.lng, cityCenter.lat]},};});............................// 柱状体图层数据// 飞线绘制

周期绘制

        let i = 1setInterval(() => {var waveLayer = new mapvgl.CircleLayer({type: 'wave',radius: r => 3 * r,duration: 1 / 3,trail: 3});view.addLayer(waveLayer);waveLayer.setData(data.slice(0, i));var rippleLayer = new mapvgl.RippleLayer({size: 500000,unit: 'm',color: '#0ff',enablePicked: true,onClick: (e) => { // 点击事件console.log(e);},});view.addLayer(rippleLayer);rippleLayer.setData(datas.slice(0, i));.................i = i + 1;if (i == cities.length + 2) {i = 1view.removeAllLayers()}},3000)