CN117435175A - 一种三维gis可视化引擎封装方法及系统 - Google Patents

Abstract

本发明提供了一种基于Webassembly和webview的三维GIS可视化引擎封装方法，包括：S1，基于WebAssembly技术在JS中调用C++构建的三维GIS可视化引擎；S2，基于WebView嵌入三维GIS引擎构建的客户端，从而对web内容进行解析；还公开了对应的系统。

Description

一种三维GIS可视化引擎封装方法及系统

技术领域

本发明涉及计算机网络和图形图像处理技术领域，具体涉及一种基于Webassembly和webview的三维GIS可视化引擎封装方法及系统。

背景技术

通常情况下，一套GIS引擎，需要考虑用户使用场景来构建SDK(SoftwareDevelopment Kit，软件开发工具包，指软件工程师为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件时的开发工具的集合，广义上指辅助开发某一类软件的相关文档、范例和工具的集合)系统。考虑到轻量化、跨平台的使用，必然离不开浏览器web端；而要考虑渲染的高保真以及对海量数据的承载能力，又离不开客户端。

行业普遍的解决方案，是在两个端上分别构建引擎，然后基于两端的引擎分别构建SDK。如超图的SuperMap iExplorer3D，是桌面端基于UE5构建的SDK；SuperMapiClient3D for WebGL，是web端基于WebGL技术和Cesium开源框架实现的。这种解决方案，需要投入大量的研发去对两套引擎以及SDK系统进行维护，且开发人员需要分别掌握c++和JS来使用SDK，极大的增加了学习成本，不利于引擎的更新维护和推广使用。

因此，现有技术存在跨平台开发复杂性、平台特定的开发技能要求高以及维护和更新存在困难等缺陷和不足。

发明内容

为了克服现有技术中这部分的缺失及不足，提供一种基于Webassembly和webview的三维GIS可视化引擎封装方法及系统，其中该方法是基于三维GIS引擎提出的一种采用WebAssembly和webview相结合优化的技术方案，封装了底层引擎，解决了在web端调用c++接口和在客户端与web通信的问题，使得开发人员可以使用一套统一的Web代码来同时适配Web端和客户端，基于三维GIS引擎的SDK系统提供封装三维GIS引擎的方法，使得二次开发人员只需熟悉JavaScript和GIS，用同一套代码，就能实现对两个端的底层API调用，充分发挥两个端的优势应对不同场景，降低了开发人员的学习开发成本，同时方便底层开发人员对引擎的维护，更快速的定位发现问题。

本发明第一方面在于提供一种基于Webassembly和webview的三维GIS可视化引擎封装方法，包括：

S1，基于WebAssembly技术在JS中调用C++构建的三维GIS可视化引擎；

S2，基于WebView嵌入三维GIS引擎构建的客户端，从而对web内容进行解析。

优选的，所述S1的处理流程包括以下步骤：

S11，编译三维GIS引擎源码，生成SSmap.wasm，SSmap.worker.JS,SSmap.JS三个wasm模块文件；

S12，构建loader.JS，包含加载wasm文件、创建实例、提供导出函数和内存访问、处理异步和回调、提供错误处理的功能；

S13，在html/JS中引入loader.JS，通过loader.JS注册好的SSmap和GlobalViewer作为API入口，使用GlobalViewer和SSmap.xxx的方式调用三维GIS可视化引擎中的API。

优选的，所述S11通过Emscripten工具链编译所述三维GIS引擎源码。

优选的，所述S2的处理流程包括：

S21，在配置文件中引入webengine模块；

S22，在三维GIS引擎的主场景文件中创建WebEngineView组件，将url指向web内容，并配置相关属性和连接相关信号后，用于webUI的渲染和部分JS代码的解析执行；

S23，初始化WebChannel，实现c++和JS之间的双向通信，使得web页面和三维GIS引擎之间进行交互；

S24，构建WebCore类，实现交互事件注册、方法反射、模块导入、方法回调、JS解析的功能，用于三维GIS引擎处理WebEngine的交互请求和三维场景渲染；

S25，修改web端代码架构。

优选的，所述S25包括：采用运行在WebView中的主流的Web前端打包构建流程构建实现普通网页功能的部分；以及调用引擎SDK封装的JS模块并全部封装在Native目录下，经过JS引擎解析后获得返回的全局变量Native，然后实施解耦式的调用。

优选的，所述WebView采用了双线程模式，包括：基于WebView的渲染引擎和JavaScript引擎同时来处理和渲染Web内容；调用三维GIS引擎的JS代码则运行在另一个JS引擎中，将三维场景交由三维GIS引擎渲染。

优选的，所述解耦式的调用包括：UI层线程和3D渲染线程通过开启的WebChannel与三维GIS可视化引擎进行通信和交互。

本发明的第二方面在于提供一种基于WebAssembly和Webview的三维GIS可视化引擎封装系统，包括：

调用模块，用于基于WebAssembly技术在JS中调用C++构建的三维GIS可视化引擎；

内容解析模块，用于基于WebView嵌入三维GIS引擎构建的客户端，从而对Web内容进行解析。

本发明的有益效果：

1、代码复用性：开发人员只需编写一套Web代码即可在Web端和客户端上运行，减少了代码的冗余和开发工作的重复；

2、开发人员技能要求的简化：开发人员只需掌握Web开发技能，无需特定的平台开发技能，降低了培训成本，并简化了开发团队的组成；

3、维护和更新的便捷性：底层引擎的更新和修复只需在一处进行修改，即可同时适用于Web端和客户端，提高了维护效率并减少了潜在的错误；

4、避免底层引擎重复造车轮的问题：能够保持引擎c++和OpenGL的标准，无需在JS上以WebGL标准进行引擎重构；

5、减少二次开发人员的学习成本：只需有GIS前端的开发背景即可上手使用引擎，无需了解C++即可通过web完成客户端的开发，使用客户端的高性能渲染；

6、保持底层引擎的跨平台、高性能、物理材质渲染等特性。

根据下文结合附图对本发明具体实施例的详细描述，本领域技术人员将会更加明了本发明的上述以及其他目的、优点和特征。

附图说明

后文将参照附图以示例性而非限制性的方式详细描述本发明的一些具体实施例。附图中相同的附图标记标示了相同或类似的部件或部分。本领域技术人员应该理解，这些附图未必是按比例绘制的。本发明的目标及特征考虑到如下结合附图的描述将更加明显，附图中：

图1为根据本发明实施例的采用WebAssembly技术在JS中调用C++构建的三维GIS可视化引擎方法流程图；

图2为根据本发明实施例的构建loader.JS，包含加载wasm文件、创建实例、提供导出函数和内存访问、处理异步和回调、提供错误处理功能的程序代码；

图3为根据本发明实施例的在html/JS中引入loader.JS，通过loader.JS注册好的SSmap和GlobalViewer作为API入口，使用GlobalViewer和SSmap.xxx的方式调用三维GIS引擎中的API的程序代码；

图4为根据本发明实施例的WebView嵌入三维GIS引擎的方法流程图；

图5为根据本发明实施例的将WebView嵌入三维GIS引擎构建的客户端实现对web内容解析方法流程图；

图6为根据本发明实施例的在三维GIS引擎的主场景文件中创建WebEngineView组件，将url指向web内容，并配置相关属性和连接相关信号后，用于webUI的渲染和部分JS代码的解析执行的程序代码；

图7为根据本发明实施例的初始化WebChannel，实现c++和JS之间的双向通信，保证web页面和三维GIS引擎之间的交互程序代码；

图8为根据本发明实施例的构建WebCore类，实现交互事件注册、方法反射、模块导入、方法回调、JS解析功能程序代码；

图9为根据本发明实施例的修改web端代码架构的目录界面以及程序代码示意图；

图10为根据本发明实施例的WebView技术下原生客户端交互逻辑示意图.

图11为根据本发明实施例的电子设备示意图。

具体实施方式

为了更好的理解上述技术方案，下面将结合说明书附图以及具体的实施方式对上述技术方案做详细的说明。

三维GIS引擎是使用C++纯自主研发的引擎，因为C++程序语言在所有平台上都有编译器，包括网页浏览器也具有编译器，这使得构建一个客户端和web端统一的SDK系统成为可能。考虑到行业内开发人员主要集中在web前端，且web前端的UI开发生态相较C++更加成熟完善，所以SDK必须是面向web前端的，从而使得前端开发人员能在享受webUI开发成熟生态的同时，只需对一套项目代码进行维护，就能实现对两个端的底层使用，避免对同样的业务功能进行重复实现。

第一，解决C++构建的三维GIS引擎在JS中调用，必须使用WebAssembly技术。WebAssembly(简称Wasm)是一种可移植、高性能的二进制指令格式，旨在在现代Web浏览器中提供一种通用的运行时环境。它是一种底层虚拟机，可以在多个平台和语言之间提供高效的执行环境。它具有如下特点：

·体积小，加载快；

·“Assembly”并不是一种汇编语言，然而它很接近机器码，因此可直接被映射为当前硬件的机器码，兼具可移植性与运行速度；

·灵活性：可由C/C++、Rust等语言编译得到。

·可被JS调用，进入JS上下文。

·保密性：作为二进制文件，Wasm被反编译的难度很大。

第二、要解决在三维GIS引擎构建的客户端中，读取解析html、css和javascript的问题，则必须使用WebView。WebView可以简单看做一个可以嵌套在应用程序里的一个浏览器控件，它可以将HTML、CSS和JavaScript内容无缝整合到应用程序的UI中，支持完整的Web浏览体验。WebView提供了一组API，开发人员可以使用这些API与Web内容进行交互。例如，可以在WebView中执行JavaScript代码、监听网页加载事件、处理链接点击、向Web页面注入JavaScript代码等。

实施例一

一种基于Webassembly和webview的三维GIS可视化引擎封装方法，包括：

S1，基于WebAssembly技术在JS中调用C++构建的三维GIS可视化引擎；

参见图1，S1的处理流程包括以下步骤：

S11：通过Emscripten工具链编译三维GIS引擎源码，生成SSmap.wasm，SSmap.worker.JS,SSmap.JS三个wasm模块文件。

S12：构建loader.JS，包含加载wasm文件、创建实例、提供导出函数和内存访问、处理异步和回调、提供错误处理等功能，用于简化JS与wasm的交互；其中步骤S12的程序代码如图2所示。

S13，在html/JS中引入loader.JS，通过loader.JS注册好的SSmap和GlobalViewer作为API入口，使用GlobalViewer和SSmap.xxx的方式调用三维GIS引擎中的API。其中步骤S13的程序代码如图3所示。

如图4所示，WebAssembly(Wasm)技术原理示意图。本发明技术方案使用WebAssembly(Wasm)技术解决三维GIS引擎在JS中调用的问题。Wasm技术通过Emscripten工具链，将c++编写的三维GIS引擎编译生成.wasm文件，同时还会将c++的API绑定到JavaScript上，允许wasm模块与JavaScript代码进行交互，这样前端就能通过调用模组API来实现在JS调用三维GIS引擎API。

S2，基于WebView嵌入三维GIS引擎构建的客户端，从而对web内容进行解析。

参见图5，S2的处理流程包括以下步骤：

S21，在配置文件中引入webengine模块；

S22，在三维GIS引擎的主场景文件中创建WebEngineView组件，将url指向web内容，并配置相关属性和连接相关信号后，用于webUI的渲染和部分JS代码的解析执行；程序代码如图6所示。

S23，初始化WebChannel，实现c++和JS之间的双向通信，保证web页面和三维GIS引擎之间的交互；程序代码如图7所示。

S24，构建WebCore类，实现交互事件注册、方法反射、模块导入、方法回调、JS解析等功能，用于三维GIS引擎处理WebEngine的交互请求和三维场景渲染；程序代码如图8所示。

S25，修改web端代码架构，包括：采用运行在WebView中的主流的Web前端打包构建流程构建实现普通网页功能的部分；以及调用引擎SDK封装的JS模块(SSmap和GlobalViewer)并全部封装在Native目录下，经过JS引擎解析后获得返回的全局变量Native，然后实施解耦式的调用，目录界面以及程序代码如图9所示。

如图10所示为WebView技术下原生客户端交互逻辑示意图。本发明使用该技术解决原生客户端(c++)解析html/JS网页的问题。如图10所示，整体逻辑可理解为将web端的UI、交互等代码交由webengine进行解析，其中网络通信和部分的JS页面代码直接进行渲染和执行，而调用三维GIS引擎的部分则通过WebChannel转换为客户端内对原生引擎API的调用，从而实现在客户端中解析web端代码。

但在实际实践中发现，虽然WebView使客户端显示Web内容成为可能，但是WebView的性能和体验也存在一定缺陷，特别在要求高性能的3D地图应用。因为WebView的JS逻辑、DOM树创建、CSS解析、样式计算、Layout、Paint(Composite)都发生在同一线程，在WebView上执行过多的JS逻辑可能阻塞渲染，导致界面卡顿。

因此本实施例中，SDK系统在WebView层面采用了双线程模式，使得WebView渲染引擎和JavaScript引擎同时来处理和渲染Web内容；而调用三维GIS引擎的JS代码则运行在另一个JS引擎中，将三维场景交由三维GIS引擎渲染。从而使整个应用开发过程既保持了Web端的优势，又具备原生强大的体验。

双线程的WebView方案，也决定了JS端项目代码需要有两部分核心代码，一部分负责普通网页功能，可以采用主流的Web前端打包构建流程，运行在WebView中；另一部分调用引擎SDK封装的JS模块，需要运行在应用开启的JS引擎中。最后UI层线程和3D渲染线程通过开启的WebChannel与三维GIS引擎进行通信和交互。

实施例二

一种基于WebAssembly和Webview的三维GIS可视化引擎封装系统，包括：

调用模块，用于基于WebAssembly技术在JS中调用C++构建的三维GIS可视化引擎；

内容解析模块，用于基于WebView嵌入三维GIS引擎构建的客户端，从而对Web内容进行解析。

如图11所示，本发明还提供了一种电子设备，包括处理器301和与所述处理器301连接的存储器302，所述存储器302存储有多条指令，所述指令可被所述处理器加载并执行，以使所述处理器能够执行如实施例二所述的方法。

与上述实施例对应的，本发明实施例提供一种计算机存储介质，包括：至少一个存储器和至少一个处理器；

存储器用于存储一个或多个程序指令；

处理器，用于运行一个或多个程序指令，用以执行一种互动阅读平台渲染引擎的工作方法。

与上述实施例对应的，本发明实施例提供一种计算机可读存储介质，计算机存储介质中包含一个或多个程序指令，一个或多个程序指令用于被处理器执行一种业务平台渲染引擎的工作方法。

本发明所公开的实施例提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序指令，当所述计算机程序指令在计算机上运行时，使得计算机执行上述的一种业务平台渲染引擎的工作方法。

在本发明实施例中，处理器可以是一种集成电路芯片，具有信号的处理能力。处理器可以是通用处理器、数字信号处理器(Digital Signal Processor，简称DSP)、专用集成电路(Application Specific Integrated Circuit，简称ASIC)、现场可编程门阵列(FieldProgrammable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本发明实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。处理器读取存储介质中的信息，结合其硬件完成上述方法的步骤。

存储介质可以是存储器，例如可以是易失性存储器或非易失性存储器，或可包括易失性和非易失性存储器两者。

其中，非易失性存储器可以是只读存储器(Read-Only Memory，简称ROM)、可编程只读存储器(Programmable ROM，简称PROM)、可擦除可编程只读存储器(Erasable PROM，简称EPROM)、电可擦除可编程只读存储器(Electrically EPROM，简称EEPROM)或闪存。

易失性存储器可以是随机存取存储器(Random Access Memory，简称RAM)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的RAM可用，例如静态随机存取存储器(Static RAM，简称SRAM)、动态随机存取存储器(Dynamic RAM，简称DRAM)、同步动态随机存取存储器(Synchronous DRAM，简称SDRAM)、双倍数据速率同步动态随机存取存储器(Double Data RateSDRAM，简称DDRSDRAM)、增强型同步动态随机存取存储器(EnhancedSDRAM，简称ESDRAM)、同步连接动态随机存取存储器(Synchlink DRAM，简称SLDRAM)和直接内存总线随机存取存储器(DirectRambus RAM，简称DRRAM)。

本发明实施例描述的存储介质旨在包括但不限于这些和任意其它适合类型的存储器。

本领域技术人员应该可以意识到，在上述一个或多个示例中，本发明所描述的功能可以用硬件与软件组合来实现。当应用软件时，可以将相应功能存储在计算机可读介质中或者作为计算机可读介质上的一个或多个指令或代码进行传输。计算机可读介质包括计算机存储介质和通信介质，其中通信介质包括便于从一个地方向另一个地方传送计算机程序的任何介质。存储介质可以是通用或专用计算机能够存取的任何可用介质。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (8)

1.一种基于Webassembly和webview的三维GIS可视化引擎封装方法，其特征在于，包括：

S1，基于WebAssembly技术在JS中调用C++构建的三维GIS可视化引擎；

S2，基于WebView嵌入三维GIS引擎构建的客户端，从而对web内容进行解析。

2.根据权利要求1所述的一种基于Webassembly和webview的三维GIS可视化引擎封装方法，其特征在于，所述S1的处理流程包括以下步骤：

S11，编译三维GIS引擎源码，生成SSmap.wasm，SSmap.worker.JS,SSmap.JS三个wasm模块文件；

S12，构建loader.JS，包含加载wasm文件、创建实例、提供导出函数和内存访问、处理异步和回调、提供错误处理的功能；

S13，在html/JS中引入loader.JS，通过loader.JS注册好的SSmap和GlobalViewer作为API入口，使用GlobalViewer和SSmap.xxx的方式调用三维GIS可视化引擎中的API。

3.根据权利要求2所述的一种基于Webassembly和webview的三维GIS可视化引擎封装方法，其特征在于，所述S11通过Emscripten工具链编译所述三维GIS引擎源码。

4.根据权利要求3所述的一种基于Webassembly和webview的三维GIS可视化引擎封装方法，其特征在于，所述S2的处理流程包括：

S21，在配置文件中引入webengine模块；

S22，在三维GIS引擎的主场景文件中创建WebEngineView组件，将url指向web内容，并配置相关属性和连接相关信号后，用于webUI的渲染和部分JS代码的解析执行；

S23，初始化WebChannel，实现c++和JS之间的双向通信，使得web页面和三维GIS引擎之间进行交互；

S24，构建WebCore类，实现交互事件注册、方法反射、模块导入、方法回调、JS解析的功能，用于三维GIS引擎处理WebEngine的交互请求和三维场景渲染；

S25，修改web端代码架构。

5.根据权利要求4所述的一种基于Webassembly和webview的三维GIS可视化引擎封装方法，其特征在于，所述S25包括：采用运行在WebView中的主流的Web前端打包构建流程构建实现普通网页功能的部分；以及调用引擎SDK封装的JS模块并全部封装在Native目录下，经过JS引擎解析后获得返回的全局变量Native，然后实施解耦式的调用。

6.根据权利要求5所述的一种基于Webassembly和webview的三维GIS可视化引擎封装方法，其特征在于，所述WebView采用了双线程模式，包括：基于Webview渲染引擎和JavaScript引擎同时来处理和渲染Web内容；调用三维GIS引擎的JS代码则运行在另一个JS引擎中，将三维场景交由三维GIS引擎渲染。

7.根据权利要求5所述的一种基于Webassembly和webview的三维GIS可视化引擎封装方法，其特征在于，所述解耦式的调用包括：UI层线程和3D渲染线程通过开启的WebChannel与三维GIS可视化引擎进行通信和交互。

8.一种基于WebAssembly和Webview的三维GIS可视化引擎封装系统，用于实施权利要求1-7任一所述的方法，其特征在于，包括：

调用模块，用于基于WebAssembly技术在JS中调用C++构建的三维GIS可视化引擎；

内容解析模块，用于基于WebView嵌入三维GIS引擎构建的客户端，从而对Web内容进行解析。