01  背景

随着数字化时代的快速发展，数字孪生技术已广泛应用于城市管理、社会治理、城市规划、建筑设计等各行业领域，在这些领域中，对于地理空间矢量数据、遥感影像数据、实景三维数据、实体模型数据等各类二三维数据，都呈现出爆炸性增长的趋势。基于WebGL的客户端二三维图形绘制技术作为承载数字孪生可视化的核心技术之一，具备多终端、跨平台、跨浏览器、免插件的优势，可快速实现浏览器和移动设备上的二三维数据呈现，但同时存在着因网络延迟、带宽不足、网络中断以及在获取大量二三维数据时的网络阻塞而导致的数据加载缓慢或失败问题，这些问题不仅影响用户体验，还会对系统的稳定性和性能造成负面影响。

02  IndexedDB技术

IndexedDB是一种浏览器内置的NoSQL数据库，它提供了在客户端存储大量结构化数据的解决方案，也可以通俗地理解是为浏览器提供的本地数据库。

其主要特点如下：

·存储容量大：IndexedDB可以存储大量数据，并且随着需要可以增加更多的存储空间。

·支持事务：IndexedDB支持事务来确保数据的完整性和一致性，这有助于在并发操作或系统故障时保持数据的一致性。

·支持索引：通过创建索引，IndexedDB可以极大地提高数据查询的效率。

·支持离线访问：即使用户离线，也可以从IndexedDB中读取已经存储的数据，这使得Web应用程序具备了离线访问和数据持久化的能力。

基于以上特点，正好为各类大数据量二三维数据的存储提供了方法，同时可以解决因网络延迟、带宽不足、网络中断以及网络阻塞造成的数据获取缓慢或失败问题。但IndexedDB也有其不足之处，主要就是在大量数据写入数据库时会造成主线程UI阻塞，从而导致系统卡顿问题，为了解决该问题我们就需要再引入另一项关键技术，那就是WebWorker技术。

03  WebWorker技术

WebWorker技术是一种在Web应用中实现多线程处理的方法。它通过创建一个或多个后台线程来执行JavaScript代码，这些线程与主线程完全独立，并在不同的执行上下文中运行，从而释放主线程以处理其他任务。其主要特点如下:

·提高响应速度：通过将计算密集型任务移至后台线程，WebWorker可以避免UI卡顿，从而提高程序的响应速度。

·充分利用多核CPU：现代计算机通常具有多个CPU核心，WebWorker能够利用这些多核资源，实现并行处理，从而提高程序的执行效率。

·代码模块化与结构优化：使用WebWorker可以将代码分割成多个模块，每个模块在不同的线程中运行，使代码结构更加合理，提高可维护性和可读性。

·大数据处理与实时更新：WebWorker特别适用于处理大量数据，如图像处理、音视频编解码等，以及实现数据的实时更新。

根据其特点可以解决因大量数据写入IndexedDB数据库时而造成的主线程UI阻塞问题。

04  主要实现步骤

（1）在web应用启动运行时创建各类二三维数据存取处理的独立WebWorker子线程，并建立主线程与子线程之间的消息通信机制；

（2）主线程在需要加载渲染二三维数据时首先向子线程发送消息，请求相应的数据；

（3）子线程在收到主线程发送的数据请求消息后开始在IndexedDB数据库中检索是否存在相匹配的二三维数据；

（4）若存在则从IndexedDB数据库将相匹配的二三维数据提取出来，并通过子线程将数据发送给主线程进行渲染加载；

（5）若不存在则通知主线程通过网络直接请求数据，数据返回后直接进行渲染加载，并通知子线程将数据存储到IndexedDB数据库中用于下次直接获取。

05  加载效率测试

图1

图2

上图是两组在不同环境下加载渲染相同数据时，分别开启和不开启IndexedDB获取数据的耗时情况对比。通过对比可以发现使用IndexedDB获取数据时，无论在何种网络环境下加载效率都有着显著提升，并且互联网相对于局域网的网络环境受带宽、网速、网络质量等多方面因素影响，提升效果更为明显。

06  总结

采用IndexedDB与WebWorker相结合的技术提升二三维数据加载效率的方法，其主要优点在于，实现了对于大规模数据的客户端存储与客户端快速检索，以及利用多线程并行处理的机制提高程序的执行效率，有效地解决了因网络问题导致的数据加载缓慢与系统卡顿问题，极大地增强了系统的性能及稳定性，并且为用户提供了更流畅、更可靠的使用体验。

（作者为国研数字研发中心王玮）