高德地图位置刷新卡顿问题,辛苦老师有时间指点一下

来源:8-7 词云图的基本用法

十丈红尘

2020-08-16

地图渲染类的需求,需要在地图上绘制2万个左右的点;
地图服务使用的是高德的API,主要是Canvas实现的;
请求频率每15秒刷新一次,主要更新车辆的位置信息;
高德地图API:https://lbs.amap.com/api/javascript-api/guide/overlays/massmarker
现在主要的问题是每次刷新浏览器都会卡顿3-5秒左右,如果要优化的话我应该从什么地方下手辛苦老师能指点一下吗?给个思路也可以

描述一下需求背景以及目前的情况:

一、技术方面:

  1. 前端并不是我的强项仅仅能写代码完成需求(我是大数据开发偏算法方向,对Java技术栈非常熟悉做过3年的Java开发);

二、需求方面:

  1. 2万个点是车辆的实时位置信息(一个点就是一台车),数据是通过位置传感器上传至大数据平台,经过实时计算处理然后来进行渲染的;

  2. 目前海量点如果只是渲染一次性能确实挺好的,但是定时渲染体验就非常不好了卡顿非常明显;

  3. 点聚合之前有考虑过不过没有采用(具体原因不是很清楚,之前的同事已经联系不到了);

  4. 这个需求是大数据可视化大屏的一个需求,目前也是我在维护用户需要监控这些车辆要求实时获取车辆的位置信息,后台可以在3s秒内计算所有的车辆信息,瓶颈卡在了前端这里;

三、我正在做的:

  1. 重新和产品确认此需求是否合理,正在重新评审;

  2. 积极的寻找前端的解决方案,根据我的理解我认为需求本身没有什么问题,前端这块一定还有优化的点,但是由于我的前端水平有限暂时get不到,所以想要请教一下有没有其他的实现方式可以做到;

补充(以下是目前我找到的一些参考资料不知道对老师您这里来说是否有用供参考):
关闭动画:https://blog.csdn.net/sflf36995800/article/details/106393077
高德API:https://developer.amap.com/api/javascript-api/example/selflayer/cus-svg(使用svg每一次缩放都会进行重绘)

写回答

1回答

扬_灵

2020-08-17

同学你好,优化的方向从这三个方向考虑,

1. 使用webgl优化渲染性能

2. 服务端精简返回结构,尽可能不要返回无关的数据(大批量json解析也会造成卡顿,因为本质是字符串处理)

3. 前端整体处理完options后再进行渲染,避免不必要的渲染行为,切勿进行多次渲染


0
0

数据可视化入门到精通-打造前端差异化竞争力

同级别前端,掌握数据可视化薪资更高

1520 学习 · 1043 问题

查看课程