文章目录
百度地图打点性能优化（海量点、mapv）
原因
在百度地图api中，默认的点是下图的红点
而这种点位比较多的时候，就会出现加载卡顿问题
优化方法
想要进行方法优化，首先需要分析其原因。
数据获取方面
数据量比较庞大时，我们采用了分批调用获取的方法，采用异步的方式，可以利用await进行调用接口数据，这里是为了减轻服务端压力，把庞大的数据分批进行返回。
页面加载方面
渲染时为什么会出现卡顿现象，检查可以看出其原因
这是一个个dom结构，当海量数据同事渲染时，这里就涉及到大量的dom操作，造成重绘或重排，从而造成卡顿问题，所以解决问题的方法就是减少dom操作。
其中一种解决方法就是转化为canvas,canvas操作相对于DOM操作资源消耗较少，因为canvas操作是基于像素的绘制操作，不涉及到浏览器的解析和渲染过程。
而且百度地图在JavaScript API v3.0中给出了相应的解决方案 PointCollection属性
官方解释如下
PointCollection
此类表示海量点类，利用该类可同时在地图上展示万级别的点，目前仅适用于html5浏览器。
| 构造函数 | 描述 |
|---|---|
| PointCollection(points: Array, opts: PointCollectionOptions) | 创建海量点类。points为点的坐标集合，opts为点的绘制样式 |
| 方法 | 返回值 | 描述 |
|---|---|---|
| setPoints(points: Array) | none | 设置要在地图上展示的点坐标集合 |
| setStyles(styles: PointCollectionOption) | none | 点的样式，包括:大小"size"（可选,默认正常尺寸10*10px，SizeType类型），形状"shape"（可选，默认圆形，ShapeType类型），颜色"color"（可选，字符串类型） |
| clear() | none | 清除海量点 |
| 事件 | 参数 | 描述 |
|---|---|---|
| click | event{type, target,point} | 鼠标点击点时会触发此事件 |
| mouseover | event{type, target,point} | 鼠标移入点时会触发该事件 |
| mouseout | event{type, target,point} | 鼠标移出点时会触发该事件 |
而该海量点就是将百度地图转化为canvas,使用该api可以解决卡顿效果，但是又有一些缺陷
兼容问题
某些浏览器不支持canvas绘制，这里就要做一个判断，通过下面代码判断是否能绘制即可
document.createElement("canvas").getContext("2d")
下面是对支持canvas的浏览器以及版本供参考
样式问题
海量点api中，它的样式是固定选择的几个，通过PointCollectionOptions中的ShapeType属性定义
官网给的几个形状如下
| 常量 | 描述 |
|---|---|
| BMAP_POINT_SHAPE_CIRCLE | 圆形，为默认形状 |
| BMAP_POINT_SHAPE_STAR | 星形 |
| BMAP_POINT_SHAPE_SQUARE | 方形 |
| BMAP_POINT_SHAPE_RHOMBUS | 菱形 |
| BMAP_POINT_SHAPE_WATERDROP | 水滴状，该类型无size和color属性属性定义 |
这几个形状说实话在地图上不是太好看。。。
如果UI对标点样式没有要求，皆大欢喜，不用再做处理了，但非要进行改正，这就需要换另一种处理方法了
这里百度地图也推荐了一种处理方法------Mapv
Mapv
Mapv 是一款地理信息可视化开源库，可以用来展示大量地理信息数据，点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据，其也是将地图绘制成canvas
GitHub：https://github.com/huiyan-fe/mapv
在这里可以自定义标点图标，下面是举例设置图标的地方
示例：
var data = [
// 点数据
{
geometry: {
type: 'Point',
coordinates: [123, 23]
},
fillStyle: 'red',
// 支持image对象和url两种方式
icon: [img, 'images/marker.png', 'images/star.png'][randomCount % 3],
size: 30
},
{
geometry: {
type: 'Point',
coordinates: [121, 33]
},
fillStyle: 'rgba(255, 255, 50, 0.5)',
size: 90
},
// 线数据
{
geometry: {
type: 'LineString',
coordinates: [
[123, 23],
[124, 24]
]
},
count: 30
},
// 面数据
{
geometry: {
type: 'Polygon',
coordinates: [
[
[123, 23],
[123, 23],
[123, 23]
]
]
},
count: 30 * Math.random()
}
];
var dataSet = new mapv.DataSet(data);
这里data中的属性配置项官方文档是这样描述的
mapv中主要都是展示地理信息数据用的，需要在数据中加个geometry字段，geometry字段的内容统一使用Geojson的规范，大家自行查阅资料配置即可。
这里只是一个简单示例，具体实现参考官方文档