课程 | 地图可视化教学之『海量地理数据可视化如此简单？』

百度地图可视化服务可满足开发者对于海量位置数据可视化展示的需求，开发者可关联自己的业务数据，并基于地图开放服务能力使用丰富的可视化功能，获得高性能、炫酷的位置数据展示效果。为了提升开发者的接入体验，解答开发者的技术疑问，百度地图开放平台打造了全新的专题课程“地图可视化教学”，手把手教会开发者使用地图可视化服务。本节教学主要介绍如何使用MapV GL实现海量地理数据展示。

首先，我们先来了解一下百度地图的地理可视化库。六年前百度地图开放平台就在GitHub上开源了地理可视化库MapV，基于Canvas技术，MapV可以帮助开发者们轻松实现打点、线面绘制、热力图、网格、聚合等展示数据形式。如今随着浏览器V8引擎能力的强大以及Web GL技术的普及，百度地图推出了基于2.5D地图引擎的GL版地图JS API，与此同时也升级了MapV，推出MapV GL（ https://lbsyun.baidu.com/solutions/mapvdata ），基于Web GL渲染，支持更多、更炫酷的三维立体可视化效果。

如此大气且震撼的效果可以应用到日常的工作汇报、演讲素材、市场报告等场景中，接下来就手把手教你如何快速实现这种效果。

首先，我们将实现地理可视化所需要的JS库引入进来，一个是提供地图服务的地图JS API库，另一个是提供数据可视化的MapV GL库。其中地图服务需要使用到密钥，大家可以登录百度地图开放平台官网的控制台（https://lbsyun.baidu.com/apiconsole/center#/home ）申请一个你的专属密钥，以方便后续管理你的应用。代码如下所示：

接着，我们就来使用引入的JS库开始创造一个地图，实现起来只需要3步：
1、在页面代码中添加一个div标签来作为地图容器，并为其增加属性id。（css样式可以自己定义）
2、调用JS API库的Map类创建地图实例，参数为第一步创建div的id，以此来与DOM容器进行关联。
3、设置地图显示的中心点Point和级别，通过这一步即可将地图在DOM容器中渲染出来。

代码如下：

现在已经创建出地图了，我们还可以进一步配置一下地图属性，以实现期望的效果。比如设置个性化地图样式，或设置地图倾斜角度，亦或设置地图可随鼠标滚轮缩放等等。

这里只举两个常用的例子，地图的更多属性可以查阅文档，后续也会出一期关于地图属性的详细介绍教程。

map.enableScrollWheelZoom(true);
map.setMapStyleV2({
styleId: ‘e5a46de8696fb48afa071eb011ed66c9’
});

通过上面几行代码即可实现地图随鼠标滚轮进行缩放，并且setMapStyleV2方法将地图设置成了样式独特的个性化地图，个性化地图的具体样式可以通过我们的地图个性化编辑器（https://lbsyun.baidu.com/index.php?title=open/custom ）来自定义。

开发者们可以通过个性化地图编辑器，设计出各种自己喜欢的风格地图，这里为了凸显出海量数据展示效果，我们选择了一张暗色系的地图。

大家也可以根据自己的喜好去选择喜欢的地图样式。

是不是很简单？跟上步伐，接下来就在地图上实现数据可视化，将会用到我们引入的MapV GL库。也分为三步：
1、创建MapvGL可视化图层管理器，其中的map属性值为地图实例，支持2d和2.5d的地图JSAPI，同时也支持空白地图。
2、创建数据可视化图层，并添加到地图管理器中。
3、准备好规范化的坐标数据，关联图层与数据，享受可视化效果。

// 1. 创建地图可视化图层管理器
view = new mapvgl.View({
map: map
}

// 2. 创建热力柱图层
const layer = new mapvgl.HeatGridLayer({
max: 80, // 最大阈值
min: 10, // 最小阈值
gridSize: 500,
gradient: { // 对应比例渐变色
0: ‘rgb(50, 50, 256)’,
0.3: ‘rgb(178, 202, 256)’,
1: ‘rgb(250, 250, 256)’
},
riseTime: 1800, // 楼块初始化升起时间
maxHeight: 10000, // 最大高度
minHeight: 200 // 最小高度
});
view.addLayer(layer);

// 3. 准备数据，关联图层与数据
let data = [];
data.push({
geometry: {
type: ‘Point’,
coordinates: [116.387456,39.925406]
},
properties: {
count: 20
}
}
})
layer.setData(data);

好啦，现在我们已经实现了在个性化地图上增加了一个根据自己参数配置样式的棱柱。如果是海量数据完全遵循上面的步骤，只需要将setData的参数更改为海量的数据即可。现在我们使用这样一份样例数据（https://mapv.baidu.com/gl/examples/static/beijing.07102610.json ）做个效果试验，得出效果如下图：

我们整体的步骤都完成了，是不是感觉实现海量地理数据可视化很简单！借助MapV GL你也可以轻松实现你的创意。此外，使用类似的方法还可以实现其他多种形式的地理可视化，小伙伴们可以多做尝试奥~