百度地图 - 使用数据可视化MapVGL

简介

在地图项目的开发中，往往会伴随大量的数据展示。这时候使用地图api提供的覆盖物函数绘制元素，在页面上会生成大量的DOM元素导致页面变卡。
为了解决大量数据展示，百度地图开发了一套处理数据可视化的框架MapVGL。使用webGL的技术在canvas中绘制图形，能有效的提高页面性能。

MapVGL

MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。
而且支持three.js，就是说三维模型也可以通过图层的方式加入地图中。
其核心就是，通过地理信息数据，生成可视化图层。然后把可视化图层添加在地图上层进行管理。
需注意的是，地理信息数据格式是规定好的。必须具有geometry字段来定义坐标信息，同时可通过properties字段添加附件信息。geometry字段数据格式使用的是GeoJSON的规范。

{"geometry": {"type": "Point",// 数据类型"coordinates": [125.6, 10.1] },"properties": {"name": "哈哈"}
}

开始使用

通过<script>标签引入地图api地址和mapvgl地址，这里的ak是你在地图服务中心注册的。不了解的可以点这里

    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&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>

初始化地图

      // 百度地图API功能var map = new BMapGL.Map('bmap') // 创建Map实例// 初始化地图,设置中心点坐标和地图级别map.centerAndZoom(new BMapGL.Point(121.480509, 31.23592), 10)// 启用 鼠标滚轮事件map.enableScrollWheelZoom()

开始使用mapvgl加载点图层

通过View()构造函数绑定地图实例，生层图层管理器。
创建可视化图层，并添加到图层管理器中。这里使用的点图层PointLayer。mapvgl内置了很多图层，以方便开发者直接使用，不用关心webGL绘制的具体实现。
根据地理信息数据格式，创建要使用的点数据。格式错误无法加载数据。
把数据传入可视化图层中。

      // 2. 创建MapVGL图层管理器var view = new mapvgl.View({map: map})// 3. 创建可视化图层，并添加到图层管理器中var layer = new mapvgl.PointLayer({color: 'rgba(153,50,204, 1)',blend: 'lighter',size: 11})view.addLayer(layer)// 4. 准备好规范化坐标数据var data = []for (var i = 0; i < 1000; i++) {data.push({geometry: {type: 'Point',coordinates: [Math.random() * 25 + 100, Math.random() * 25 + 20]}})}// 5. 关联图层与数据layer.setData(data)

炫光或发光特效

炫光特效 BloomEffect 和发光特效 BrightEffect。简单理解就是在可视化图层中，修改图形的颜色和添加阴影，让视觉效果更加明显。

      // 2. 创建MapVGL图层管理器var view = new mapvgl.View({effects: [new mapvgl.BrightEffect({threshold: 0.2,blurSize: 2,clarity: 0.5}),new mapvgl.BloomEffect({threshold: 0.2,blurSize: 2.0})],map: map})

添加事件

为了方便在开发时操作图形，mapvGL添加鼠标事件。
在创建可视化图层时，设置参数enablePicked: true开启鼠标拾取，然后添加onClick等函数，就能获取到点击回调。

      var layer = new mapvgl.PointLayer({color: 'rgba(153,50,204, 1)',blend: 'lighter',size: 11,enablePicked: true, // 是否可以拾取selectedIndex: -1, // 选中数据项索引selectedColor: '#ff0000', // 选中项颜色autoSelect: true, // 根据鼠标位置来自动设置选中项onClick: (e) => {// 点击事件console.log(e)}})

mapVGL官网文档
地图可视化 | 百度前端工程师教你如何在地图上实现炫光可视化效果

百度地图 - 使用数据可视化MapVGL相关推荐

基于大数据的房价分析--3.echart+百度地图实现数据可视化
要实现的是在百度地图中画出房屋散点图,能进行区域选择,动态刷新显示该区域的房价数据雷达图,具体效果如下 1.在echarts中集成百度地图要使用百度地图,必须要有开发者AK和百度地图js包 < ...
Vue使用v-charts引入百度地图实现数据可视化
上一篇文章给大家介绍了vue-echarts引入百度地图的过程, 今天给大家介绍通过v-charts来写一个简单的地图,相比之下过程更为简单,下面一起来看看具体步骤介绍 v-charts 是饿了么团 ...
html5页面热力图几十万数据,基于百度地图的数据可视化，包括大量数据的标绘以及热力图的插入...
(function(global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? ...
百度地图大数据可视化(柱状图)
这是效果图这个是代码部分 var geoCoordMap = {广州市: [113.507649675, 23.3200491021],东莞市: [113.863433991, 22.9430238 ...
python matplotlib 地图_Python数据可视化，看这篇就够了
说到python的常见应用,很多人会想到python的数据分析,作为数据分析中的表现层面,数据可视化都是其中必不可少的部分.但本文并非只推荐无任何数据分析需求仅需要做漂亮可视化图表的人学习python ...
百度地图大数据MapV的相关介绍
百度地图是一个市场占有率达到70%的产品,今天在查资料过程中,无意看到百度地图大数据的一个开源产品.(https://github.com/huiyan-fe/mapv) Mapv 是一款基于百度地图 ...
在百度地图大数据下，看后疫情时代的消费变化
文|曾响铃来源|科技向令说(xiangling0815) 五一假期成为了后疫情时代的一个焦点. 原因无他,作为疫情以来的第一个小长假,不管是从社会的角度,还是从市场的方向,人们都希望能在这个节点上看 ...
百度地图迁徙大数据_百度地图大数据看十一：各地商圈出现“红色拥堵”，游乐场迎来“高光时刻”...
作为疫情防控常态化后的第一个黄金周,今年的国庆中秋长假令广大民众出游情绪高涨,旅游.探亲出行等客流持续走高,交通.旅游.餐饮等行业迎来全线复苏.百度地图迁徙大数据平台.节假日出行仪表盘等平台紧密跟踪假 ...
百度地图查询数据结果
百度地图查询数据结果一.分类查询 new BMap.LocalSearch.search(keyword) [{"keyword": "招商银行"," ...

百度地图 - 使用数据可视化MapVGL

简介

MapVGL

开始使用

炫光或发光特效

添加事件

相关文章

百度地图 - 使用数据可视化MapVGL相关推荐

最新文章

热门文章