CN113779168A

CN113779168A - 一种基于WebAssembly的矢量空间数据解析方法

Info

Publication number: CN113779168A
Application number: CN202110986717.8A
Authority: CN
Inventors: 黄剑华; 刘辉; 赵瑞祥; 梁生红
Original assignee: Guangzhou He Chen Information Technology Co ltd
Current assignee: Guangzhou He Chen Information Technology Co ltd
Priority date: 2021-08-26
Filing date: 2021-08-26
Publication date: 2021-12-10

Abstract

本发明公开了一种基于WebAssembly的矢量空间数据解析方法，获取待解析的C/C++源代码，通过WebAssembly开源编译器工具把所述待解析的C/C++源代码编译成wasm程序文件；通过浏览器的WebAssembly模块加载wasm程序，并暴露wasm程序的接口给浏览器端，所述浏览器端通过JavaScript调用wasm接口；浏览器端JavaScript调取矢量空间数据文件到浏览器端以二进制方式存储，浏览器端JavaScript通过调用所述WebAssembly开源编译器工具的malloc函数分配内存，将二进制文件存放至WebAssembly共享内存；所述浏览器端调用wasm程序的接口解析矢量数据，所述wasm程序通过操作WebAssembly内存来读取解析二进制文件数据；对所述解析的二进制文件数据进行格式转换，再通过主流Web地图引擎进行可视化展示。

Description

一种基于WebAssembly的矢量空间数据解析方法

技术领域

本发明涉及矢量数据解析技术领域，用于解决在Web浏览器上解析矢量数据的问题，尤其涉及一种基于WebAssembly的矢量空间数据解析方法。

背景技术

矢量空间数据在Web浏览器上展示，通常做法是通过前端JavaScript或后端C/C++/Java等语言进行解析，转换成前端JavaScript可以识别的JSON格式或图片格式，以便矢量数据可以在Web端进行地图可视化展示。

现有技术例如中国专利CN201710174898.8主要是提供一种矢量数据读取方法及一种矢量数据快速可视化方法，其矢量数据读取方法以及矢量数据可视化方法通过对数据过滤以有效减少数据读取量，达到快速可视化的目的，实现方式在计算机本地或服务器端。

常见的矢量空间数据格式有dwg、dxf、shp、gdb、mdb等，其中dxf是文本数据，dwg、shp、gdb、mdb等是复杂的字节文件。文本数据可以在浏览器端通过JavaScript直接解析，如数据量过大，则解析效率会慢。而dwg、gdb、mdb等字节文件结构较为复杂，以浏览器JavaScript的方式几乎无法有效或高效从内部结构解析。现在常见技术主要两种：(1)采用前端JavaScript方式解析；(2)采用上传文件到后端(服务器端)利用C/C++的方式进行解析。第一种方式缺点在于前端JavaScript方式进行矢量解析具有局限性，一般可以解析纯文本数据，因为JavaScript是解析性语言，执行速度相比C/C++等语言要慢，且对于字节文件解析能力有限(受限于浏览器以及JavaScript读取文件的限制)，比如shp.js是一个开源js库，shp是一种公开的格式(《ESRI Shapefile Technical Description》ESRI白皮书1998年公开的格式)，shp.js通过JavaScript的方式实现shp的加载，但实现并不完整，从源码上分析，对于PolylineZ、PolygonZ、PolylineM、PolygonM、MultiPointM、MultiPatch等并不支持。第二种方式采用上传至后端的方式进行解析，这种解析完整解析矢量数据，但需要通过网络传输，如果文件过大，上传需要占用大量传输时间，解析出结果后返回浏览器前端还需要传输时间，适合相对较小的文件。

WebAssembly是由主流浏览器厂商组成的W3C社区团体制定的一个新的规范，是一种能浏览器端运行C/C++、比JavaScript运行效率更快的一种技术。WebAssembly起源于Mozilla发起的Asm.js项目，其本地解码速度比JavaScript解析快得多，让高性能的Web应用在浏览器上运行成为可能，目前各大主流浏览器都支持WebAssembly二进制格式wasm。

因此，本发明提出一种基于WebAssembly的矢量空间数据解析方法，旨在实现在浏览器端进行高效解析矢量空间数据。

发明内容

而本发明提供的一种在Web浏览器上直接读取矢量数据的方法。本发明旨在至少解决现有技术中存在的技术问题之一。为此，本发明公开了一种基于WebAssembly的矢量空间数据解析方法，包括如下步骤：

步骤101：获取待解析的C/C++源代码，通过WebAssembly开源编译器工具把所述待解析的C/C++源代码编译成wasm程序文件；

步骤102：通过浏览器的WebAssembly模块加载wasm程序，并暴露wasm程序的接口给浏览器端，所述浏览器端通过JavaScript调用wasm接口；

步骤103：浏览器端JavaScript调取矢量空间数据文件到浏览器端以二进制方式存储，浏览器端JavaScript通过调用所述WebAssembly开源编译器工具的malloc函数分配内存，将二进制文件存放至WebAssembly共享内存；

步骤104：所述浏览器端调用wasm程序的接口解析矢量数据，所述wasm程序通过操作WebAssembly内存来读取解析二进制文件数据；

步骤105：对所述步骤104解析的二进制文件数据进行格式转换，再通过主流Web地图引擎进行可视化展示。

更进一步地，所述WebAssembly开源编译器工具为Emscripten工具。

更进一步地，所述步骤104进一步包括：对于不同矢量数据采用不同的合适矢量驱动进行解析，矢量驱动会预先用所述WebAssembly开源编译器工具编译进wasm程序，矢量驱动把二进制文件数据读取成矢量C++对象，通过wasm实现的矢量解析器VectorParser解析成的C++的包含坐标和属性信息的GeoJSON对象，将GeoJSON对象转成GeoJSON字符串存在到WebAssembly共享内存，并返回GeoJSON字符串的内存指针地址。

更进一步地，所述步骤105进一步包括：浏览器端JavaScript获取GeoJSON字符串的内存指针，通过所述WebAssembly开源编译器工具的Pointer_stringify函数将C++字符串转成JavaScript字符串，并使用JSON.parse方法转化成JavaScript的GeoJSON格式数据。

更进一步地，所述主流Web地图引擎包括百度地图、高德地图、ArcGISJavaScript、Leaflet、MapBox、Cesium中的一种或多种，当所述主流Web地图引擎为高德地图API时,则采用AMap.GeoJSON对象进行可视化渲染。

本发明还公开了一种基于WebAssembly的矢量数据解析方法，包括如下步骤：

步骤201：实现矢量适配器VectorAdapter，对各种矢量数据格式进行适配；

步骤202：实现矢量解析器VectorParser，对矢量的坐标和属性进行解析；

步骤203：矢量解析器采用CJsonObject把矢量数据OGRFeature实例化C++的GeoJSON对象，以GeoJSON对象进行存储每个矢量数据。

步骤204：矢量解析器解析到的table属性数据，存储在GeoJSON对象的properties属性中，当为shp矢量数据时，通过GDAL/OGR驱动的OGRFeatureDefn的GetFieldCount方法获取字段数量和GetFieldAsString方法获取字段值，通过oJson对象Add方法来添加属性名和属性值；

步骤205：实现GeoJSON输出器GeoJsonExporter，输出的GeoJSON对象至浏览器端。

更进一步地，所述步骤201进一步包括：通过前端JavaScript的input文件输入框获取输入的文件，通过文件后缀进行判断其所述的文件类型，不同的矢量数据采用不同的合适矢量驱动，矢量适配器建立各个格式与矢量驱动的映射对照关系，根据所需适配进行预加载对应wasm程序文件，wasm程序采用Emscripten编译构建wasm程序文件，浏览端加载所述wasm程序文件，使用WebAssembly.Module和WebAssembly.Instance方法进行实例化。

更进一步地，所述步骤202进一步包括：首先浏览器前端通过FileReader对象的readAsBinaryString获取文件的二进制字符串，将二进制数据ArrayBuffer传给wasm程序的VectorParser解析器，因C/C++的内存没有gc机制，浏览器采用malloc和free函数分别分配WebAssembly内存、释放内存空间，将二进制文件ArrayBuffer放到WebAssembly的内存空间pointerBuffer：所述VectorParser解析器利用矢量适配器VectorAdapter提供的矢量驱动进行解析。

更进一步地，所述步骤203进一步包括：矢量解析器解析出来空间位置字节转换成浮点型，存储在GeoJSON对象的geometry["coordinates"]属性中，其中，所述GeoJSON是一种标准的地理空间信息数据交换格式规范，能够被所有常见的主流Web地图引擎支持加载。

更进一步地，所述步骤205进一步包括：wasm程序把所有矢量对象以C++的GeoJSON对象转换成GeoJSON字符串存放至WebAssembly内存当中，并返回C++的GeoJSON字符串的内存指针到浏览器端对象，GeoJsonExporter通过内存指针获取WebAssembly内存的C++的GeoJSON字符串。由于C++中的字符串表达方式与JavaScript是完全不兼容的，因此，在浏览器JavaScript中获取该字符串指针地址，要通过Pointer_stringify将其转换为JavaScript字符串，再进一步JavaScript使用JSON.parse方法转换成JavaScriptGeoJSON对象，通过主流Web地图引擎对JavaScriptGeoJSON进行地图可视化展示，最后，JavaScript调用free函数释放WebAssembly内存空间。

与现有检测方法相比，本申请实现矢量适配器VectorAdapter，对各种矢量数据格式进行适配，矢量适配器建立各个矢量空间数据格式与矢量驱动的映射对照关系，根据所需适配进行预加载对应wasm程序。加载wasm程序，使用WebAssembly.Module和WebAssembly.Instance方法进行实例化。实现矢量解析器VectorParser，对矢量的坐标和属性进行解析。前端通过FileReader对象的readAsBinaryString获取文件的二进制字符串，将二进制字符传给wasm程序的VectorParser解析器进行文件解析，采用矢量格式对应的矢量驱动进行解析。矢量解析器解析到的矢量数据，以GeoJSON对象进行存储，存储在GeoJSON对象的geometry属性中。GeoJSON是一种标准的地理空间信息数据交换格式，能够被所有常见的Web地图引擎支持加载。矢量解析器解析到的属性数据，存储在GeoJSON对象的properties属性中。实现GeoJSON输出器GeoJsonExporter，把所有矢量对象以GeoJSON形式输出到浏览器,以JavaScript对象进行接收并通过地图引擎可视化展示，目的是提供一种基于WebAssembly在浏览器端能够快速解析矢量数据的方法。

附图说明

从以下结合附图的描述可以进一步理解本发明。图中的部件不一定按比例绘制，而是将重点放在示出实施例的原理上。在图中，在不同的视图中，相同的附图标记指定对应的部分。

图1为本发明基于WebAssembly的实现逻辑流程图；

图2为本发明基于WebAssembly的矢量数据解析过程图。

具体实施方式

实施例一

图1为本发明基于WebAssembly的实现逻辑流程图：

如图1所示，步骤101：通过Emscripten工具(一种WebAssembly开源编译器工具)把本发明用到的C/C++源代码编译成wasm程序文件；

步骤102：通过浏览器的WebAssembly模块加载wasm程序，并暴露wasm程序的接口给浏览器端，浏览器端可通过JavaScript调用wasm接口。

步骤103：浏览器端JavaScript调取矢量空间数据文件到浏览器端以二进制方式存储，因C/C++的内存没有gc机制，浏览器端JavaScript通过调用Emscripten工具的malloc函数分配内存，将二进制文件存放至WebAssembly共享内存。

步骤104：浏览器端调用wasm程序的接口解析矢量数据，wasm程序通过操作WebAssembly内存来读取解析二进制文件数据，对于不同矢量数据采用不同的合适矢量驱动进行解析，矢量驱动会预先用Emscripten编译进wasm程序。矢量驱动把二进制文件数据读取成矢量C++对象，通过wasm实现的矢量解析器VectorParser解析成的C++的包含坐标和属性信息的GeoJSON对象，将GeoJSON对象转成GeoJSON字符串存在到WebAssembly共享内存，并返回GeoJSON字符串的内存指针地址。

步骤105：浏览器端JavaScript获取GeoJSON字符串的内存指针，通过Emscripten工具的Pointer_stringify函数将C++字符串转成JavaScript字符串，并使用JSON.parse方法转化成JavaScript的GeoJSON格式数据，通过主流Web地图引擎进行可视化展示，如高德地图api采用AMap.GeoJSON对象进行可视化渲染。

实施例二

图2为本发明基于WebAssembly的矢量数据解析过程图：

如图2所示，步骤201：实现矢量适配器VectorAdapter，对各种矢量数据格式进行适配，包括shp、gdb、dwg、dxf等常用矢量数据格式。通过前端JavaScript的input文件输入框获取输入的文件，通过文件后缀进行判断哪类文件，不同的矢量数据采用不同的合适矢量驱动，如shp文件采用GDAL/OGR(一个开源的操作各种地理数据格式的库)的shp驱动，gdb采用FileGDB API库等等。矢量适配器建立各个格式与矢量驱动的映射对照关系，根据所需适配进行预加载对应wasm程序文件。wasm程序采用Emscripten编译构建wasm程序文件。浏览端加载wasm程序文件，使用WebAssembly.Module和WebAssembly.Instance方法进行实例化。

步骤202：实现矢量解析器VectorParser，对矢量的坐标和属性进行解析。首先浏览器前端通过FileReader对象的readAsBinaryString获取文件的二进制字符串，将二进制数据ArrayBuffer传给wasm程序的VectorParser解析器。因C/C++的内存没有gc机制，浏览器采用malloc和free函数分别分配WebAssembly内存、释放内存空间(malloc、free函数为C的Emscripten导出的函数)。通过如下代码将二进制文件ArrayBuffer放到WebAssembly的内存空间pointerBuffer：

const malloc＝Module.cwrap('malloc','number',['number'])

const pointerBuffer＝malloc(ArrayBuffer.byteLength)；

Module.HEAP8.set(new Int8Array(ArrayBuffer),pointerBuffer)；

VectorParser解析器利用矢量适配器VectorAdapter提供的矢量驱动进行解析，如shp矢量数据采用GDAL/OGR驱动解析，把二进制数据加载到OGRLayer中，通过遍历OGRLayer的OGRFeature对象(即shp文件每个矢量对象)获取出来，转换成C++的JSON对象。

步骤203：矢量解析器采用CJsonObject(一个C++的开源JSON库)把矢量数据OGRFeature实例化C++的GeoJSON对象，以GeoJSON对象进行存储每个矢量数据。矢量解析器解析出来空间位置字节转换成浮点型，存储在GeoJSON对象的geometry["coordinates"]属性中。GeoJSON是一种标准的地理空间信息数据交换格式规范，能够被所有常见的主流Web地图引擎(百度地图、高德地图、ArcGIS JavaScript、Leaflet、MapBox、Cesium等等)支持加载。通过CJsonObject如下代码定义和实例化成C++的GeoJSON对象：

解析过程中判断输入矢量数据的几何类型，使之转换成GeoJSON支持的Point、LineString、Polygon、MultiPoint、MultiLineString、MultiPolygon等几何类型，并存在GeoJSON对象的geometry["type"]属性中。

步骤204：矢量解析器解析到的table属性数据，存储在GeoJSON对象的properties属性中，如shp矢量数据通过GDAL/OGR驱动的OGRFeatureDefn的GetFieldCount方法获取字段数量和GetFieldAsString方法获取字段值。通过oJson对象Add方法来添加属性名和属性值，比如oJson["properties"].Add("name","属性值")。

步骤205：实现GeoJSON输出器GeoJsonExporter，输出的GeoJSON对象至浏览器端。wasm程序把所有矢量对象以C++的GeoJSON对象转换成GeoJSON字符串存放至WebAssembly内存当中，并返回C++的GeoJSON字符串的内存指针到浏览器端对象，GeoJsonExporter通过内存指针获取WebAssembly内存的C++的GeoJSON字符串。由于C++中的字符串表达方式与JavaScript是完全不兼容的，因此，在浏览器JavaScript中获取该字符串指针地址，要通过Pointer_stringify将其转换为JavaScript字符串，再进一步JavaScript使用JSON.parse方法转换成JavaScriptGeoJSON对象，通过主流Web地图引擎对JavaScriptGeoJSON进行地图可视化展示，如高德地图api采用AMap.GeoJSON对象、ArcGIS JavaScript采用GeoJSONLayer对象、Cesium采用GeoJsonDataSource的方式进行地图可视化渲染。最后，JavaScript调用free函数释放WebAssembly内存空间。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

虽然上面已经参考各种实施例描述了本发明，但是应当理解，在不脱离本发明的范围的情况下，可以进行许多改变和修改。因此，其旨在上述详细描述被认为是例示性的而非限制性的，并且应当理解，以下权利要求(包括所有等同物)旨在限定本发明的精神和范围。以上这些实施例应理解为仅用于说明本发明而不用于限制本发明的保护范围。在阅读了本发明的记载的内容之后，技术人员可以对本发明作各种改动或修改，这些等效变化和修饰同样落入本发明权利要求所限定的范围。

Claims

1.一种基于WebAssembly的矢量空间数据解析方法，其特征在于，包括如下步骤：

2.如权利要求1所述的一种基于WebAssembly的矢量空间数据解析方法，其特征在于，所述WebAssembly开源编译器工具为Emscripten工具。

3.如权利要求1所述的一种基于WebAssembly的矢量空间数据解析方法，其特征在于，所述步骤104进一步包括：对于不同矢量数据采用不同的合适矢量驱动进行解析，矢量驱动会预先用所述WebAssembly开源编译器工具编译进wasm程序，矢量驱动把二进制文件数据读取成矢量C++对象，通过wasm实现的矢量解析器VectorParser解析成的C++的包含坐标和属性信息的GeoJSON对象，将GeoJSON对象转成GeoJSON字符串存在到WebAssembly共享内存，并返回GeoJSON字符串的内存指针地址。

4.如权利要求1所述的一种基于WebAssembly的矢量空间数据解析方法，其特征在于，所述步骤105进一步包括：浏览器端JavaScript获取GeoJSON字符串的内存指针，通过所述WebAssembly开源编译器工具的Pointer_stringify函数将C++字符串转成JavaScript字符串，并使用JSON.parse方法转化成JavaScript的GeoJSON格式数据。

5.如权利要求4所述的一种基于WebAssembly的矢量空间数据解析方法，其特征在于，所述主流Web地图引擎包括百度地图、高德地图、ArcGIS JavaScript、Leaflet、MapBox、Cesium中的一种或多种，当所述主流Web地图引擎为高德地图API时,则采用AMap.GeoJSON对象进行可视化渲染。

6.一种基于WebAssembly的矢量数据解析方法，其特征在于，包括如下步骤：

7.如权利要求6所述的一种基于WebAssembly的矢量数据解析方法，其特征在于，所述步骤201进一步包括：通过前端JavaScript的input文件输入框获取输入的文件，通过文件后缀进行判断其所述的文件类型，不同的矢量数据采用不同的合适矢量驱动，矢量适配器建立各个格式与矢量驱动的映射对照关系，根据所需适配进行预加载对应wasm程序文件，wasm程序采用Emscripten编译构建wasm程序文件，浏览端加载所述wasm程序文件，使用WebAssembly.Module和WebAssembly.Instance方法进行实例化。

8.如权利要求6所述的一种基于WebAssembly的矢量数据解析方法，其特征在于，所述步骤202进一步包括：首先浏览器前端通过FileReader对象的readAsBinaryString获取文件的二进制字符串，将二进制数据ArrayBuffer传给wasm程序的VectorParser解析器，因C/C++的内存没有gc机制，浏览器采用malloc和free函数分别分配WebAssembly内存、释放内存空间，将二进制文件ArrayBuffer放到WebAssembly的内存空间pointerBuffer：所述VectorParser解析器利用矢量适配器VectorAdapter提供的矢量驱动进行解析。

9.如权利要求6所述的一种基于WebAssembly的矢量数据解析方法，其特征在于，所述步骤203进一步包括：矢量解析器解析出来空间位置字节转换成浮点型，存储在GeoJSON对象的geometry["coordinates"]属性中，其中，所述GeoJSON是一种标准的地理空间信息数据交换格式规范，能够被所有常见的主流Web地图引擎支持加载。

10.如权利要求6所述的一种基于WebAssembly的矢量数据解析方法，其特征在于，所述步骤205进一步包括：wasm程序把所有矢量对象以C++的GeoJSON对象转换成GeoJSON字符串存放至WebAssembly内存当中，并返回C++的GeoJSON字符串的内存指针到浏览器端对象，GeoJsonExporter通过内存指针获取WebAssembly内存的C++的GeoJSON字符串。由于C++中的字符串表达方式与JavaScript是完全不兼容的，因此，在浏览器JavaScript中获取该字符串指针地址，要通过Pointer_stringify将其转换为JavaScript字符串，再进一步JavaScript使用JSON.parse方法转换成JavaScriptGeoJSON对象，通过主流Web地图引擎对JavaScriptGeoJSON进行地图可视化展示，最后，JavaScript调用free函数释放WebAssembly内存空间。