这个问题困扰我许久了，今日终于解决了，记录一下。
先描述一下业务场景：
数据量：百万级、千万级
场景范围和每个对象的坐标都不固定，会随时修改
包含中文，图标
数据无法按缩放层级分层
所以，很多方案都用不了
被排除的方案：
因为标注包含中文，所以，使用提前准备的文本材质和webGL渲染的方案基本上是不可行的
因为数据不稳定的，随时会变的，所以像地图的切片做法加位置查询也不可行
因为数据量巨大，所以直接用HTML DOM来渲染也不可行
解决办法：
1. 使用canvas2d绘制
2. 解决UI卡顿的问题
标注渲染不能导致UI操作卡顿。所以在缩放和平移需要重新渲染的情况下，将同步事件变成异步的，甚至可以加节流阀（效果并不理想）
其次，设置绘制标志，在每次重新绘制前检查，避免多次执行
3. 过滤掉不需要绘制的数据
通过范围检查，筛选掉不在可视区域范围内的数据，这样在放大的时候，可以大大减少需要绘制的数量
但是如果场景缩放所有数据都在可视区域内，范围检查不仅没有加速，反而增加了计算量
这个时候就还需要加上最大数量限制，在过滤之后的数据里按照计算出的步长获取最终需要绘制的数据
网友评论