高德地图优化问题，辛苦指点！

Question

老师我这边有一个关于性能优化的问题：

1. 地图渲染类的需求，需要在地图上绘制2万个左右的点；
2. 地图服务使用的是高德的API，主要是Canvas实现的；
3. 请求频率每15秒刷新一次，主要更新车辆的位置信息；
4. 高德地图API：https://lbs.amap.com/api/javascript-api/guide/overlays/massmarker

现在主要的问题是每次刷新浏览器都会卡顿3-5秒左右，如果要优化的话我应该从什么地方下手辛苦老师能指点一下吗？给个思路也可以

Answer 1

Mr_Max 2020-08-16 09:05:16

同学你好！

虽然高德文档说『十万以内的点......较好的性能表现』，但较好没有具体的量化说明，还要以你实际测试为准。

1）可以先看一下API调用，返回的数据量多大？耗时多久？

2）2万个点是一个非常大的量了，一次全部渲染出来肯定消耗很高，3-5秒感觉是可以接受的。但你的刷新频率很高，效果就不是很好了。同时渲染2万个点这个需求是否合理呢？就是为了看一个密密麻麻的全局地图吗？给用户传递怎样的有效信息呢？文档里下面的markerCluster是不是能更好的传递信息，同时性能好很多呢？毕竟渲染的数量减少很多。

3）可以参考一下这个文章中提到的关闭动画：https://blog.csdn.net/sflf36995800/article/details/106393077。但是感觉其实这是高德这边本身的性能问题，你从使用者的角度能做的非常有限。

• 提问者 十丈红尘 #1

  谢谢老师的指点，根据您的指点我详细查阅了一下资料，还是有一些疑惑；
  我详细描述一下需求背景以及目前的情况：
  一、技术方面：
  1. 前端并不是我的强项仅仅能写代码完成需求(我是大数据开发偏算法方向，对Java技术栈非常熟悉做过3年的Java开发)；
  二、需求方面：
  1. 2万个点是车辆的实时位置信息(一个点就是一台车)，数据是通过位置传感器上传至大数据平台，经过实时计算处理然后来进行渲染的；
  2. 目前海量点如果只是渲染一次性能确实挺好的，但是定时渲染体验就非常不好了卡顿非常明显；
  3. 点聚合之前有考虑过不过没有采用(具体原因不是很清楚，之前的同事已经联系不到了)；
  4. 这个需求是大数据可视化大屏的一个需求，目前也是我在维护用户需要监控这些车辆要求实时获取车辆的位置信息，后台可以在3s秒内计算所有的车辆信息，瓶颈卡在了前端这里；
  三、我正在做的：
  1. 重新和产品确认此需求是否合理，正在重新评审；
  2. 积极的寻找前端的解决方案，根据我的理解我认为需求本身没有什么问题，前端这块一定还有优化的点，但是由于我的前端水平有限暂时get不到，所以想要请教一下有没有其他的实现方式可以做到；

• Mr_Max #2

  可以考虑一下是否可以分批逐步加载数据，这样总耗时可能会延长，但卡顿会得到缓解。

• 提问者 十丈红尘 回复 Mr_Max #3

  好的谢谢老师，我准备从canvas的角度去看看能不能优化