1
akira 2020-02-29 04:38:55 +08:00
看下百度地图 谷歌地图他们怎么处理的
|
2
Perry 2020-02-29 04:43:52 +08:00
Chrome 的 performance tab 看看时间都花在哪了
排查每个 component 是否有多余 render 的情况 |
3
murmur 2020-02-29 07:50:24 +08:00
肯定得动态渲染啊 你没有用地图的功能 自己在地图上叠加层了么
|
4
zrp1994 2020-02-29 08:32:59 +08:00
之前做的项目中遇到过类似的问题,需求是在地图上绘制成千上万的坐标点。使用百度、高德、以及天地图时都会出现页面卡顿,而使用谷歌地图则不会出现此问题。当时排查得到的原因是国内的这些地图在绘制时都是直接生成的 HTML 元素覆盖在地图上,大量的元素导致了页面的卡顿。而谷歌地图则是使用的 canvas 绘制,不会产生新的 HTML 元素。
除了 canvas 绘制这一点之外,我还建议你不要绘制 Offscreen canvas 的元素,也就是可视区域外的元素不选择渲染。当可视区域改变时再判断是否需要渲染。至于说判断可视区域改变时那些元素需要改变渲染这方面的优化,可以使用一些空间索引及算法,例如四叉树等等。不过应该不用复杂到这一步。 如果业务允许的话,还可以使用点聚类来减少需要绘制的点的数量。 https://doc.arcgis.com/zh-cn/maps-for-office/design-and-use/cluster-points.htm |
5
louieliu 2020-02-29 08:34:35 +08:00 via iPhone
动态渲染啊 一次性渲染这么多节点肯定消耗性能 再开启硬件加速来辅助
|
8
murmur 2020-02-29 09:28:12 +08:00
这种类似 POI 的东西一定要找专门的组件来做,openlayers 这种,什么缩放比例,什么区域显示多少东西都是专门的处理
以前看 D 版的成都地图,有十几个图层,你不做处理的话根本显示不过来 |
9
sakitamFDD 2020-02-29 09:39:53 +08:00 via Android
你们是不是对地图引擎有限制,如果没有的话建议上 mapbox,10w 级以上的数据普通 canvas 渲染压力也是很大的,最好是上 webgl 引擎
|
10
ericgui OP @sakitamFDD 我们就是用 mapbox ..... 现在数据库才两千多,就走肉眼可见的延迟和白屏
|
11
sakitamFDD 2020-02-29 09:59:09 +08:00 via Android
|