百度地图打点性能优化(海量点、mapv)

百度地图打点性能优化(海量点、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绘制,这里就要做一个判断,通过下面代码判断是否能绘制即可

javascript 复制代码
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

官网:mapv.baidu.com/

GitHub:github.com/huiyan-fe/m...

在这里可以自定义标点图标,下面是举例设置图标的地方

示例:

css 复制代码
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的规范,大家自行查阅资料配置即可。

这里只是一个简单示例,具体实现参考官方文档

参考资料

百度地图jsapi v3

jsapi v3类参考文档

mapv官网

mapv官方文档

相关推荐
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz2 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端
程序猿阿伟3 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒3 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪3 小时前
AJAX的基本使用
前端·javascript·ajax