原创不易~看完若对你有所帮助，记得点一个赞哈，这就是对我最大的支持了！

常规的包括散点图、飞线动画、3D建筑等等，这里只会介绍常用的部分，其他的可以去官方文档继续了解学习。也要学会如何快速复用官方的案例。

官方文档：https://lbsyun.baidu.com/solutions/mapvdata

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

下面会学习一系列案例，可抽象出一个统一的开发模式

1. 引入common库

官方有一个common库可以引入，简化我们部分map的操作：

<!DOCTYPE html><html><head><script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=LOaAEpspHorOR4Aq8ifOQpIGbzUuVO4D"></script><!-- 引用mapv相关的js库 --><script src="https://mapv.baidu.com/gl/examples/static/common.js"></script><style>html,body,#map_container {width: 100%;height: 100%;padding: 0;margin: 0;}/* 隐藏百度的下面log和版权声明 */.anchrolBL, BMap_cpyCtrl {display: none;}</style></head><body><div id="map_container"></div><script>// 引入的common库所作的处理const map = initMap({center: [121.477091,31.753594],zoom: 10,style: snowStyle,tilt: 0})</script></body></html>

记得id要改一下，或者拷贝一份改他的源代码

2. 绘制一个点

主要步骤分为准备数据源与绘制数据

<!DOCTYPE html><html><head><script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=LOaAEpspHorOR4Aq8ifOQpIGbzUuVO4D"></script><!-- 引用mapv相关的js库 --><script src="https://mapv.baidu.com/gl/examples/static/common.js"></script><script src="https://mapv.baidu.com/build/mapv.js"></script><script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.124/dist/mapvgl.min.js"></script><style>html,body,#map_container {width: 100%;height: 100%;padding: 0;margin: 0;}/* 隐藏百度的下面log和版权声明 */.anchrolBL, BMap_cpyCtrl {display: none;}</style></head><body><div id="map_container"></div><script>// 引入的common库所作的处理// mapv提供了api，根据名称获取坐标const cities = ['上海'];const cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[0]);const map = initMap({center: [cityCenter.lng,cityCenter.lat],zoom: 10,style: snowStyle,tilt: 0})// 准备数据源const data = [];data.push({// 拿到地理信息，包括一个坐标geometry: {type: 'Point',coordinates: [cityCenter.lng, cityCenter.lat]}});// 绘制数据源// 1. 生成mapvgl的视图View - mapvgl的画布图层const view = new mapvgl.View({map});// 2. 初始化 mapvgl 的PointLayer图层对象const pointLayer = new mapvgl.PointLayer({});// 3. 将 PointLayer 对象加入View中view.addLayer(pointLayer)// 4. 将 data与point进行绑定pointLayer.setData(data);</script></body></html>

3. 增加数据源

这里我们借助官方文档示例，多选取一些城市点并选取一些随机偏差生成700个点：

<!DOCTYPE html><html><head><script type="text/javascript"src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=LOaAEpspHorOR4Aq8ifOQpIGbzUuVO4D"></script><!-- 引用mapv相关的js库 --><script src="https://mapv.baidu.com/gl/examples/static/common.js"></script><script src="https://mapv.baidu.com/build/mapv.js"></script><script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.124/dist/mapvgl.min.js"></script><style>html,body,#map_container {width: 100%;height: 100%;padding: 0;margin: 0;}/* 隐藏百度的下面log和版权声明 */.anchrolBL,BMap_cpyCtrl {display: none;}</style></head><body><div id="map_container"></div><script>const map = initBMap();const data = initData();setData(data, map);// 初始化百度地图function initBMap() {// 引入的common库所作的处理// mapv提供了api，根据名称获取坐标const cityCenter = mapv.utilCityCenter.getCenterByCityName('南京');const map = initMap({center: [cityCenter.lng, cityCenter.lat],zoom: 10,style: snowStyle,tilt: 0})return map;}// 准备数据源function initData() {const data = [];// 随机拿700个地图点，后续会构造随机点let random = 700;const cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨','长春', '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州','武汉', '长沙', '广州', '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐','成都', '贵阳', '昆明', '拉萨', '海口'];while (random--) {const cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);data.push({// 拿到地理信息，包括一个坐标// 添加一个偏移量，以获得更多点geometry: {type: 'Point',coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]}});}console.log(data);return data;}// 绘制数据源 function setData(data, map) {// 1. 生成mapvgl的视图View - mapvgl的画布图层const view = new mapvgl.View({ map });// 2. 初始化 mapvgl 的PointLayer图层对象const pointLayer = new mapvgl.PointLayer({});// 3. 将 PointLayer 对象加入View中view.addLayer(pointLayer)// 4. 将 data与point进行绑定pointLayer.setData(data);}</script></body></html>

4. 通过点大小与颜色深浅表示数据

但是如果结合实际业务场景，例如想要直观展示每个城市的电商销售数据，就需要点可以根据数据的大小以及颜色深浅而呈现数据状态。

首先我们需要添加一个销售数据，这里我们再生成data时新增一个属性就好：

// 准备数据源function initData() {const data = [];// 随机拿700个地图点，后续会构造随机点let random = 700;const cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨','长春', '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州','武汉', '长沙', '广州', '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐','成都', '贵阳', '昆明', '拉萨', '海口'];while (random--) {const cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);data.push({// 拿到地理信息，包括一个坐标// 添加一个偏移量，以获得更多点geometry: {type: 'Point',coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]},// 代表销量properties: {sales: Math.random() * 100}});}console.log(data);return data;}

接着我们需要在setData里面初始化图层的时候来控制Size，这里我们可以借助Intensity对象来更好的限制和控制点的大小：

// 绘制数据源 function setData(data, map) {// 1. 生成mapvgl的视图View - mapvgl的画布图层const view = new mapvgl.View({ map });// 2. 初始化Intensity对象 - 控制图上点的大小const intensity = new mapvgl.Intensity({min: 0, // 范围max: 100,minSize:5,  // 最小最大点像素大小maxSize:30});// 3. 初始化 mapvgl 的PointLayer图层对象const pointLayer = new mapvgl.PointLayer({size: function(data){// 直接返回点太大了// return parseInt(data.properties.sales)return intensity.getSize(data.properties.sales);},// color: function(data){// }});// 4. 将 PointLayer 对象加入View中view.addLayer(pointLayer)// 5. 将 data与point进行绑定pointLayer.setData(data);}

好了，接着我们再借助颜色角度来表达数据内容，同样借助intensity对象，并回调控制color：

// 绘制数据源 function setData(data, map) {// 1. 生成mapvgl的视图View - mapvgl的画布图层const view = new mapvgl.View({ map });// 2. 初始化Intensity对象 - 控制图上点的大小const intensity = new mapvgl.Intensity({min: 0, // 范围max: 100,minSize:5,  // 最小最大点像素大小maxSize:30,// 渐变 - 允许输入0-1之间的颜色变化gradient: {0:'rgba(25, 66, 102,0.8)',0.3: 'rgba(145,102,129,0.8)',0.7: 'rgba(210,131,137,0.8)',1: 'rgba(248,177,149,0.8)'}});// 3. 初始化 mapvgl 的PointLayer图层对象const pointLayer = new mapvgl.PointLayer({size: function(data){// 直接返回点太大了// return parseInt(data.properties.sales)return intensity.getSize(data.properties.sales);},color: function(data){return intensity.getColor(data.properties.sales);}});// 4. 将 PointLayer 对象加入View中view.addLayer(pointLayer)// 5. 将 data与point进行绑定pointLayer.setData(data);}

5. 数据筛选

同时有时候我们只会关注一些头部数据，可以对data进行筛选：

 // 准备数据源function initData() {let data = [];// 随机拿700个地图点，后续会构造随机点let random = 700;const cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨','长春', '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州','武汉', '长沙', '广州', '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐','成都', '贵阳', '昆明', '拉萨', '海口'];while (random--) {const cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);data.push({// 拿到地理信息，包括一个坐标// 添加一个偏移量，以获得更多点geometry: {type: 'Point',coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]},// 代表销量properties: {sales: Math.random() * 100}});}console.log(data);data = data.filter(value => value.properties.sales > 50);return data;}

6. 流程总结

初始化百度地图对象

数据源初始化：提供数据，包括业务数据

绘制数据：通过webgl生成视图并初始化intensity对象帮助控制点，然后生成layer并计算size和color，最后将layer加入视图中并进行数据绑定

百度地图开发入门（4）：散点图示例相关推荐

Android百度地图开发入门教程
Android百度地图开发入门教程 1.平台注册登录 2.创建应用 3.Android studio配置 4.代码编写 5.最终效果(建议真机) 1.平台注册登录登录百度地图开放平台网站注册并登录 ...
百度地图开发入门（5）：飞线动画示例
原创不易~看完若对你有所帮助,记得点一个赞哈,这就是对我最大的支持了! 讲解另一种常见应用-飞线动画,主要用于展示数据流向 https://lbsyun.baidu.com/solutions/map ...
百度地图开发入门（3）：动画
原创不易~看完若对你有所帮助,记得点一个赞哈,这就是对我最大的支持了! 百度地图提供了一些API来提供动画的开发 1. ViewAnimation帧动画开发 <body><div i ...
百度地图开发入门（1）：案例
将我之前的百度地图入门的一些博文分享一下,这里主要系统讲解地图可视化的开发方式 1. 百度开发者账户申请具体可以参考这里:https://lbsyun.baidu.com/index.php?tit ...
IOS开发百度地图API入门到精通－用点生成路线，导航，气泡响应
(转)IOS开发百度地图API入门到精通-用点生成路线,导航,气泡响应 IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽 IOS百度地图开发POISearch搜索附近停车场,附近加油 ...
新手入门百度地图开发的（0,0）坐标问题
对于大部分人来讲,由于百度地图资料众多,过度依赖搜索引擎等等原因.新接触百度地图开发工作其实并不容易.今天说说关于坐标(0,0)的问题. 首先仍然介绍坐标系,我们先不管采用的和wgs84还是gcj02 ...
使用QT嵌入百度地图开发高B格岸基监控软件
文章目录 1.简述 2.百度地图 2.1百度地图准备 2.2 百度地图开发 2.2.1实时绘制轨迹 2.2.2设定航点 3 QT软件开发 3.1使用QWebEngineView显示Html 3.2 M ...
百度地图开发技术方案及解决办法
技术方案及解决办法文章目录技术方案及解决办法总体方案基础框架前端网页后端程序结合搭建方法跨域解决 python处理excel 问题描述解决办法网页结构 vue实例内容引入 ele ...
Android学习 - 百度地图开发基础
什么是百度地图API? 百度地图移动版API(Android)是一套基于Android 1.5及以上设备的应用程序接口,通过该接口,您可以轻松访问百度服务和数据,构建功能丰富.交互性强的地图应用程序. ...
用android studio测量距离,Android studio 百度地图开发（6）Marker绑定事件、计算两点距离...
Android studio 百度地图开发(6)Marker绑定事件.计算两点距离 email:chentravelling@163.com 开发环境:win7 64位,Android Studio, ...

百度地图开发入门（4）：散点图示例