CN110032614B

CN110032614B - 基于wasm的地图矢量渲染方法和装置

Info

Publication number: CN110032614B
Application number: CN201910316424.1A
Authority: CN
Inventors: 徐祥; 黄永; 吴星国; 王国玉
Original assignee: Chengdu Sefon Software Co Ltd
Current assignee: Chengdu Sefon Software Co Ltd
Priority date: 2019-04-18
Filing date: 2019-04-18
Publication date: 2020-02-07
Anticipated expiration: 2039-04-18
Also published as: CN110032614A

Abstract

本发明提供了基于wasm的地图矢量渲染方法和装置，包括：创建地图图像图层，该地图图像图层为利用canvas技术创建的；基于wasm渲染方法对地图图像图层进行渲染，得到渲染后的像素数据；将渲染后的像素数据复制到canvas对应的指定存储区；在指定存储区内加载地图图像图层，得到渲染的地图矢量数据，提高了客户端大数据渲染速度和图像加载速度。

Description

基于wasm的地图矢量渲染方法和装置

技术领域

本发明涉及计算机技术领域，尤其是涉及基于wasm的地图矢量渲染方法和装置。

背景技术

由于web(World Wide Web，全球广域网)应用的跨平台和免安装等优点，地图应用在web端的发展越来越成熟，各种框架层出不穷，各有各的特点，特效和功能都非常丰富，很多新技术也受到了程序员的欢迎，比如webgl(Web Graphics Library，web图形库)、webworker、webassembly(wasm)等，这些技术拓宽了web应用的道路，衍生出了许多大数据矢量渲染的优化方案。

由于目前地图的渲染基本上依赖于javascript的处理能力，javascript语言性能低效，大数据量的渲染效率依然是个比较大的问题，很多功能不得不弱化，在计算一些数据量比较大的场景下并不理想，受限于浏览器的处理能力，需要服务器端渲染切片，再通过http(Hyper Text Transfer Protocol，超文本传输协议)请求获取图像数据并渲染，但这种方式导致整个应用非常臃肿，需要开发和部署独立的切片服务等，考虑到网络带宽和服务器负载等原因，可能渲染效率不是很高。

发明内容

有鉴于此，本发明的目的在于提供基于wasm的地图矢量渲染方法和装置，提高了客户端大数据渲染速度和图像加载速度。

第一方面，本发明实施例提供了一种基于wasm的地图矢量渲染方法，所述方法包括：

创建地图图像图层，所述地图图像图层为利用canvas技术创建的；

基于wasm渲染方法对所述地图图像图层进行渲染，得到渲染后的像素数据；

将所述渲染后的像素数据复制到canvas对应的指定存储区；

在所述指定存储区内加载所述地图图像图层，得到渲染的地图矢量数据。

结合第一方面，本发明实施例提供了第一方面的第一种可能的实施方式，其中，所述方法还包括：

对创建的所述地图图像图层进行初始化，并将初始化的所述地图图像图层传入数据服务地址，以便于对所述地图图像图层进行渲染。

结合第一方面，本发明实施例提供了第一方面的第二种可能的实施方式，其中，所述基于wasm渲染方法对所述地图图像图层进行渲染，得到渲染后的像素数据包括：

获取所述地图图像图层包括的地图矢量数据；

将所述地图矢量数据的经纬度转换为像素坐标；

按照所述地图矢量数据的类型进行渲染处理，得到所述渲染后的像素数据；

其中，所述地图矢量数据的类型包括点、线和面三种类型。

结合第一方面的第二种可能的实施方式，本发明实施例提供了第一方面的第三种可能的实施方式，其中，如果所述地图矢量数据的类型为点类型时，所述按照所述地图矢量数据的类型进行渲染处理的步骤包括：

获取所述点的像素坐标；

根据所述点的像素坐标，查找所述点在所述canvas对应的指定存储区中的位置；

以所述位置为中心，将指定半径范围内的像素点设置为预设颜色。

结合第一方面的第二种可能的实施方式，本发明实施例提供了第一方面的第四种可能的实施方式，其中，如果所述地图矢量数据的类型为线类型时，所述按照所述地图矢量数据的类型进行渲染处理的步骤包括：

获取所述线的像素坐标；

根据所述线的像素坐标，查找所述线在所述canvas对应的指定存储区中的位置；

将所述位置的指定线宽范围内的像素点设置为预设颜色。

结合第一方面的第二种可能的实施方式，本发明实施例提供了第一方面的第五种可能的实施方式，其中，如果所述地图矢量数据的类型为面类型时，所述按照所述地图矢量数据的类型进行渲染处理的步骤包括：

获取所述面的边线的像素坐标；

根据所述边线的像素坐标，查找所述边线在所述canvas对应的指定存储区中的位置；

以所述位置为中心，将所述边线包围内的像素点设置为预设颜色。

第二方面，本发明实施例还提供一种基于wasm的地图矢量渲染装置，所述装置包括：

创建模块，用于创建地图图像图层，所述地图图像图层为利用canvas技术创建的；

渲染模块，用于基于wasm渲染方法对所述地图图像图层进行渲染，得到渲染后的像素数据；

复制模块，用于将所述渲染后的像素数据复制到canvas对应的指定存储区；

加载模块，用于在所述指定存储区内加载所述地图图像图层，得到渲染的地图矢量数据。

结合第二方面，本发明实施例提供了第二方面的第一种可能的实施方式，其中，所述装置还包括：

初始化模块，用于对创建的所述地图图像图层进行初始化，并将初始化的所述地图图像图层传入数据服务地址，以便于对所述地图图像图层进行渲染。

第三方面，本发明实施例还提供一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一方面所述的方法的步骤。

第四方面，本发明实施例还提供一种具有处理器可执行的非易失的程序代码的计算机可读介质，所述程序代码使所述处理器执行上述第一方面所述的方法的步骤。

本发明实施例提供了基于wasm的地图矢量渲染方法和装置，包括：创建地图图像图层，该地图图像图层为利用canvas技术创建的；基于wasm渲染方法对该地图图像图层进行渲染，得到渲染后的像素数据；将渲染后的像素数据复制到canvas对应的指定存储区；在该指定存储区内加载地图图像图层，得到渲染的地图矢量数据，由于在数据传输过程中省掉了http请求过程，因此，相当于直接在客户端执行渲染过程，进而有效省去了服务端的渲染过程，提高了客户端大数据渲染速度和图像加载速度。

本发明的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点在说明书以及附图中所特别指出的结构来实现和获得。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的基于wasm的地图矢量渲染方法流程图；

图2为本发明实施例提供的传统地图矢量渲染方法原理框图；

图3为本发明实施例提供的基于wasm的地图矢量渲染方法原理框图；

图4为本发明实施例提供的另一基于wasm的地图矢量渲染方法流程图；

图5为本发明实施例提供的基于wasm的地图矢量渲染装置示意图。

图标：

10-创建模块；20-渲染模块；30-复制模块；40-加载模块。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

为便于对本实施例进行理解，下面对本发明实施例进行详细介绍。

实施例一：

图1为本发明实施例提供的基于wasm的地图矢量渲染方法流程图。

参照图1，该方法包括以下步骤：

步骤S101，创建地图图像图层，该地图图像图层为利用canvas技术创建的；

步骤S102，基于wasm渲染方法对地图图像图层进行渲染，得到渲染后的像素数据；

步骤S103，将渲染后的像素数据复制到canvas对应的指定存储区；

步骤S104，在指定存储区内加载地图图像图层，得到渲染的地图矢量数据。

本发明实施例提供的基于wasm的地图矢量渲染方法，通过创建地图图像图层，该地图图像图层为利用canvas技术创建的；利用wasm渲染方法对该地图图像图层进行渲染，得到渲染后的像素数据；将渲染后的像素数据复制到canvas对应的指定存储区；在该指定存储区内加载地图图像图层，从而得到渲染的地图矢量数据，由于在数据传输过程中省掉了http请求过程，因此，相当于直接在客户端执行渲染过程，进而有效省去了服务端的渲染过程，提高了客户端大数据渲染速度和图像加载速度。

传统的服务端渲染方法包括客户端和服务端，如图2所示，客户端先通过向服务端发送http请求，服务端收到该http请求后，将矢量数据渲染成图像，并以图片流的方式发送给客户端，客户端根据接收到的图片流加载图像，从而得到渲染后的地图。这种地图渲染方式需要服务端和客户端的高度耦合，但是对于出现地图大数据的情况，这种渲染方式导致渲染速度和图像加载速度均比较慢。

wasm是一种可以在客户端执行的高效字节码，接近于机器码的执行速度，且在独立的沙盒环境中运行，不会影响到浏览器的渲染，有了这种技术，可以在客户端真正意义上实现高效渲染。因此，本实施例提出了一种基于wasm的地图矢量渲染方法，如图3所示，wasm相当于在客户端执行的传统服务端的渲染过程，且在数据传输过程中省去了http请求的过程，属于客户端通信，在低宽带的情况下，渲染更高效，且由于减少了服务端渲染的压力，在高负载的情况下，提高了渲染的速度。因此，提高了客户端大数据渲染速度和图像加载速度。

进一步的，利用canvas技术创建地图图像图层，对创建的地图图像图层进行初始化，并将初始化的地图图像图层传入数据服务地址，以便于对地图图像图层进行渲染。其中，canvas技术是HTML5(Hyper Text Markup Language，超文本标记语言)新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。首先，当地图图像图层开始初始化的时候，调用wasm方法的初始化方法，其中，wasm方法用c++编写并生成wasm二进制文件，初始化时javascript加载wasm方法并编译，将初始化后的地图图像图层传入数据服务地址，以便于对地图图像图层进行渲染；然后wasm渲染方法对地图图像图层进行渲染，得到渲染后的像素数据，并将渲染后的像素数据复制到canvas对应的指定存储区，最后在指定存储区内加载地图图像图层，得到渲染的地图矢量数据。因此，该过程省去了http请求过程，属于客户端的渲染过程，在低宽带的情况下，渲染更高效。

进一步的，地图矢量数据的类型包括点、线和面三种类型，参照图4，步骤S102还包括：

步骤S201，获取地图图像图层包括的地图矢量数据；

步骤S202，将地图矢量数据的经纬度转换为像素坐标；

步骤S203，按照地图矢量数据的类型进行渲染处理，得到渲染后的像素数据。

具体地，在地图渲染的时候，wasm方法根据地图矢量数据的类型调用不同的方法进行绘制。地图矢量数据的类型包括点、线和面三种类型，当地图矢量数据的类型为点类型时，按照地图矢量数据的类型进行渲染处理的步骤包括：获取点的像素坐标；根据点的像素坐标，查找点在canvas对应的指定存储区中的位置；以该位置为中心，将指定半径范围内的像素点设置为预设颜色，例如，在点绘制中，假设点为半径为10的圆点，则通过点的像素坐标找到点在canvas对应的指定存储区中的位置，并以该点为中心半径为10的范围内的像素点设置为预设颜色；当地图矢量数据的类型为线类型时，按照地图矢量数据的类型进行渲染处理的步骤包括：获取线的像素坐标；根据线的像素坐标，查找线在canvas对应的指定存储区中的位置；将该位置的指定线宽范围内的像素点设置为预设颜色，例如，在线绘制中，假设线宽为1，则通过线的像素坐标，查找线在canvas对应的指定存储区中的位置，将该位置的线宽为1范围内的像素点设置为预设颜色；当地图矢量数据的类型为面类型时，按照地图矢量数据的类型进行渲染处理的步骤包括：获取面的边线的像素坐标；根据边线的像素坐标，查找边线在canvas对应的指定存储区中的位置；以该位置为中心，将边线包围内的像素点设置为预设颜色，这里面的边线绘制方式和线的绘制方式一样，如果有填充色的时候，则需将边线包围内的像素点设置为预设颜色。

实施例二：

参照图5，该装置包括创建模块10、渲染模块20、复制模块30和加载模块40。

创建模块10，用于创建地图图像图层，该地图图像图层为利用canvas技术创建的；

渲染模块20，用于基于wasm渲染方法对地图图像图层进行渲染，得到渲染后的像素数据；

复制模块30，用于将渲染后的像素数据复制到canvas对应的指定存储区；

加载模块40，用于在指定存储区内加载地图图像图层，得到渲染的地图矢量数据。

进一步的，该装置还包括：

初始化模块(未示出)，用于对创建的地图图像图层进行初始化，并将初始化的地图图像图层传入数据服务地址，以便于对地图图像图层进行渲染。

本发明实施例提供了基于wasm的地图矢量渲染方法和装置，包括：创建地图图像图层，该地图图像图层为利用canvas技术创建的；基于wasm渲染方法对该地图图像图层进行渲染，得到渲染后的像素数据；将渲染后的像素数据复制到canvas对应的指定存储区；在该指定存储区内加载地图图像图层，得到渲染的地图矢量数据，因此，由于在数据传输过程中省掉了http请求过程，相当于直接在客户端执行渲染过程，进而有效省去了服务端的渲染过程，提高了客户端大数据渲染速度和图像加载速度。

本发明实施例还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例提供的地图矢量渲染方法的步骤。

本发明实施例还提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器运行时执行上述实施例的地图矢量渲染方法的步骤。

本发明实施例所提供的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见方法实施例，在此不再赘述。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims

1.一种基于wasm的地图矢量渲染方法，其特征在于，所述方法包括：

将所述渲染后的像素数据复制到canvas对应的指定存储区；

在所述指定存储区内加载所述地图图像图层，得到渲染的地图矢量数据；

其中，所述基于wasm渲染方法对所述地图图像图层进行渲染，得到渲染后的像素数据包括：

获取所述地图图像图层包括的地图矢量数据；

将所述地图矢量数据的经纬度转换为像素坐标；

其中，所述地图矢量数据的类型包括点、线和面三种类型。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

3.根据权利要求1所述的方法，其特征在于，如果所述地图矢量数据的类型为点类型时，所述按照所述地图矢量数据的类型进行渲染处理的步骤包括：

获取所述点的像素坐标；

4.根据权利要求1所述的方法，其特征在于，如果所述地图矢量数据的类型为线类型时，所述按照所述地图矢量数据的类型进行渲染处理的步骤包括：

获取所述线的像素坐标；

将所述位置的指定线宽范围内的像素点设置为预设颜色。

5.根据权利要求1所述的方法，其特征在于，如果所述地图矢量数据的类型为面类型时，所述按照所述地图矢量数据的类型进行渲染处理的步骤包括：

获取所述面的边线的像素坐标；

6.一种基于wasm的地图矢量渲染装置，其特征在于，所述装置包括：

加载模块，用于在所述指定存储区内加载所述地图图像图层，得到渲染的地图矢量数据；

其中，所述渲染模块还包括：

获取所述地图图像图层包括的地图矢量数据；

将所述地图矢量数据的经纬度转换为像素坐标；

其中，所述地图矢量数据的类型包括点、线和面三种类型。

7.根据权利要求6所述的装置，其特征在于，所述装置还包括：

8.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现上述权利要求1-5任一项所述的方法的步骤。

9.一种具有处理器可执行的非易失的程序代码的计算机可读介质，其特征在于，所述程序代码使所述处理器执行上述权利要求1-5任一项所述的方法的步骤。