青岛网站建设培训,知名的产品设计网站,开发公司安全生产管理制度,wordpress美图写在前面 工作中接触#xff0c;简单整理博文内容为 基于MapVGL的地理信息维度数据增长可视化 Demo理解不足小伙伴帮忙指正 对每个人而言#xff0c;真正的职责只有一个#xff1a;找到自我。然后在心中坚守其一生#xff0c;全心全意#xff0c;永不停息。所有其它的路都…写在前面 工作中接触简单整理博文内容为 基于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)
博文部分内容参考
© 文中涉及参考链接内容版权归原作者所有如有侵权请告知这是一个开源项目如果你认可它不要吝啬星星哦 github 地址https://github.com/huiyan-fe/mapv
官方Demo: https://mapv.baidu.com/gl/examples/
官网文档https://mapv.baidu.com/gl/docs/index.html © 2018-2023 liruilongergmail.com, All rights reserved. 保持署名-非商用-相同方式共享(CC BY-NC-SA 4.0)
