用户故事：几十万个交互点的交通监控挑战

2026-03-13 作者: Leafer

真实案例：某交通应用团队，需要在同一画布中管理几十万个可交互点。

领导的“简单需求”

记得性能插件刚发布不久，我就收到了一位交通应用公司技术主管 D 的消息。

他说，他们正在开发一个交通监控系统，需要在画布上实时展示交通流量。领导提出了一个看似简单的要求：画布中要同时显示 几十万个点，而且 每一个点都必须可以点击和交互，画面还需要支持 自由缩放和平移。

他说到这里停了一下，又补了一句：“这个需求把我难住了。”

如果只是渲染几十万个点，其实问题并不大，直接用 WebGL 绘制就可以解决。但真正困难的地方在于——每一个点都需要交互。这意味着鼠标移动时需要实时判断 hover 的元素，点击时要精确找到对应点，同时画布还要保持流畅的缩放和平移体验。

几十万个元素的交互检测，一旦处理不好，性能很容易瞬间崩溃。

D 说他们已经尝试了很多技术方案，但始终无法做到 既能流畅渲染，又能保持完整交互。最后，他问了我一句：

PxGrow 的 Viewport Lighter 插件能解决这个问题吗？

专业工具的信心

我几乎没有犹豫，直接回复他：这个场景 Viewport Lighter 插件肯定可以解决，因为这种问题正是它最擅长处理的极端场景。

我们花了 数年时间打磨这个插件，就是为了应对这种 海量元素的画布交互问题。当听到这句话时，D 松了一口气。没过多久，他就向公司申请采购了 Viewport Lighter 插件，准备马上测试。

插件安装完成后，他们很快开始了第一次测试。

事情开始好转

没过多久，我的微信再次响起。

D 发来一条消息：

“哇，真的顺畅多了！画布拖动、缩放都很流畅，几十万个点也能正常操作。”

看到这条消息，我很高兴，看起来问题已经基本解决了。

不过，故事还没有结束。

冲突升级

几天后，D 又联系了我。他说整体体验已经非常流畅，但在某些情况下 偶尔还是会出现一点小卡顿。虽然问题不算严重，但他们还是希望体验能做到 完全顺滑。

我问了他一个问题：“你们是不是把几十万个元素 全部摊平在同一个容器下面？”

他回答说：“是的，我们就是这样做的。”

问题一下就清楚了。

如果所有元素都放在同一个容器中，在进行 鼠标坐标拾取 时，每一帧都需要遍历 几十万个元素 来判断交互对象。这样的计算量，即使在优化后的系统中，也会产生不小的计算压力。

关键优化

我给他的建议其实很简单：把元素分组。

例如，每 一万个点放到一个 Group 里面。这样一来，交互检测时可以快速缩小范围，不再需要每一帧都遍历所有元素。同时，结构化的渲染树也更利于系统进行性能优化。

D 听完后立刻去调整了结构。

瞬间流畅

没过多久，我的微信再次响起。

D 发来一条兴奋的消息：

“太神奇了！现在完全流畅了！几十万个点同时存在，缩放、拖动、点击都非常顺畅。”

他还补了一句：“这个问题困扰我们很久了，现在终于解决了。”

最后总结

从最初的焦虑，到问题解决后的轻松，这是一段典型的技术挑战之旅。

对于用户来说，这不仅仅是一次性能优化：几十万个交互点的问题得到解决，项目顺利推进，团队压力也随之释放。而对 PxGrow 来说，这正是我们想做的事情。