CN109949395A - 热力图渲染方法及装置 - Google Patents

Abstract

本申请实施例的目的在于提供一种热力图渲染方法及装置，用于改善现有技术中在数据加载过多的情况下出现渲染速度比较慢的问题。该热力图渲染方法包括：读取全部网格数据；将全部网格数据中的每个网格数据输入至多个存储结构的一个存储结构，其中，每个存储结构至多存储一个网格数据；在全部网格数据输入完成之后，根据热力图被划分获得的多个网格的每个网格对应的存储结构中的网格数据，将每个网格呈现出相应的颜色，以渲染热力图，其中，每个网格对应一个存储结构。

Description

热力图渲染方法及装置

技术领域

本申请涉及图像渲染技术领域，具体而言，涉及一种热力图渲染方法及装置。

背景技术

超文本标记语言(英语：HyperText Markup Language，简称：HTML)是一种用于创建网页的标准标记语言。HTML5是HTML最新的修订版本，2014年10月由万维网联盟完成标准制定。canvas是HTML5中用于定义图形的标签，例如定义图表和图像，也可以使用脚本语言(例如JavaScript语言)来绘制图形，例如可以使用canvas画一个红色矩形、彩色矩形和几个彩色的文字等。目前传统的热力图都是基于canvas进行渲染，但是，在数据加载过多的情况下，这种方式就会出现渲染速度比较慢的问题。

发明内容

本申请实施例的目的在于提供一种热力图渲染方法，用于改善现有技术中在数据加载过多的情况下出现渲染速度比较慢的问题。

本申请实施例提供了的一种热力图渲染方法，应用于客户端，包括：读取全部网格数据；将所述全部网格数据中的每个网格数据输入至多个存储结构的一个存储结构，其中，每个所述存储结构至多存储一个所述网格数据；在所述全部网格数据输入完成之后，根据热力图被划分获得的多个网格的每个网格对应的所述存储结构中的网格数据，将所述每个网格呈现出相应的颜色，以渲染所述热力图，其中，所述每个网格对应一个所述存储结构。

使用上述方法可以一次性获取全部网格数据，并将全部网格数据在渲染之前加载至存储结构中，以提前加载全部网格数据至存储结构的方式，以减少在渲染时的数据获取和数据加载的时间，从而有效地提升了热力图的渲染速度。

可选地，在本申请实施例中，在所述读取全部网格数据之前，所述方法还包括：对压缩数据进行解压得到所述全部网格数据。使用以上的压缩方法在服务器端压缩数据后，再通过网络进行传输至客户端进行处理，节约了网络带宽资源的同时，也使得通过网络进行传输至客户端的效率更高，从而间接地提升了热力图的渲染速度。

可选地，在本申请实施例中，在所述对压缩数据进行解压得到所述全部网格数据之前，还包括：接收服务器发送的格式数据；对所述格式数据进行解封装，获得所述压缩数据。使用以上的格式数据处理方法在服务器端对数据进行格式封装后，再通过网络进行传输至客户端进行解封装处理，使得客户端在对数据统一处理上有的效率更高，从而间接地提升了热力图的渲染速度。

可选地，在本申请实施例中，所述根据热力图被划分获得的多个网格的每个网格对应的所述存储结构中的网格数据，将所述每个网格呈现出相应的颜色，包括：确定所述热力图的类型为二维热力图，则利用二维动态插件读取所述热力图的每个网格对应所述存储结构中的网格数据的数值；将所述存储结构对应的网格呈现出与所述网格数据的数值相应的颜色。使用上述的二维动态插件读取存储结构中的网格数据的数值，然后使存储结构对应的网格呈现出与网格数据的数值相应的颜色，直接地提高了二维热力图的渲染速度。

可选地，在本申请实施例中，所述根据热力图被划分获得的多个网格的每个网格对应的所述存储结构中的网格数据，将所述每个网格呈现出相应的颜色，包括：确定所述热力图的类型为三维热力图，则利用三维引擎插件读取所述热力图的每个网格对应所述存储结构中的网格数据的数值；将所述存储结构对应的网格呈现出与所述网格数据的数值相应的颜色。使用上述的三维动态插件读取存储结构中的网格数据的数值，然后使存储结构对应的网格呈现出与网格数据的数值相应的颜色，直接地提高了三维热力图的渲染速度。

本申请实施例还提供了一种热力图渲染方法，应用于服务器，所述方法包括：根据热力图被划分获得的多个网格对预先存储的数据进行统计，获得全部网格数据；将所述全部网格数据发送给客户端。使用上述方法将需要传输给客户端的数据提前统计处理，以提前对全部网格数据进行统计和发送的方式，来缩短响应请求后对数据的处理和发送时间，从而有效地提升了热力图的渲染速度。

可选地，在本申请实施例中，所述将所述全部网格数据发送给客户端，包括：将所述全部网格数据根据所述多个网格进行压缩，获得压缩数据；将所述压缩数据发送给客户端。使用以上的压缩方法在服务器端压缩数据后，再通过网络进行传输至客户端进行处理，节约了网络带宽资源的同时，也使得通过网络进行传输至客户端的效率更高，从而间接地提升了热力图的渲染速度。

可选地，在本申请实施例中，所述将所述压缩数据发送给客户端，包括：对所述压缩数据进行封装，获得格式数据；将所述格式数据发送给客户端。使用以上的格式数据处理方法在服务器端对数据进行格式封装后，再通过网络进行传输至客户端进行解封装处理，使得客户端在对数据统一处理上有的效率更高，从而间接地提升了热力图的渲染速度。

本申请实施例还提供了一种热力图渲染装置，应用于客户端，所述热力图渲染装置包括：网格数据读取模块，用于读取全部网格数据；网格数据输入模块，用于将所述全部网格数据中的每个网格数据输入至多个存储结构的一个存储结构，其中，每个所述存储结构至多存储一个所述网格数据；热力图渲染模块，用于在所述全部网格数据输入完成之后，根据热力图被划分获得的多个网格的每个网格对应的所述存储结构中的网格数据，将所述每个网格呈现出相应的颜色，以渲染所述热力图，其中，所述每个网格对应一个所述存储结构。

使用上述装置可以一次性获取全部网格数据，并将全部网格数据在渲染之前加载至存储结构中，以提前加载全部网格数据至存储结构的方式，以减少在渲染时的数据获取和数据加载的时间，从而有效地提升了热力图的渲染速度。

本申请实施例还提供了一种热力图渲染装置，应用于服务器，所述热力图渲染装置包括：网格数据获得模块，用于根据热力图被划分获得的多个网格对预先存储的数据进行统计，获得全部网格数据；网格数据发送模块，用于将所述全部网格数据发送给客户端。使用上述装置将需要传输给客户端的数据提前统计处理，以提前对全部网格数据进行统计和发送的方式，来缩短响应请求后对数据的处理和发送时间，从而有效地提升了热力图的渲染速度。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本申请实施例提供的服务器和客户端交互示意图；

图2示出了本申请实施例提供的服务器的结构示意图；

图3示出了本申请实施例提供的热力图渲染方法流程示意图；

图4示出了本申请实施例提供的热力图渲染装置应用于客户端的结构示意图；

图5示出了本申请实施例提供的热力图渲染装置应用于服务器的结构示意图。

具体实施方式

在现有技术中，对热力图进行渲染一般都是采用HTML5中的canvas标签进行渲染，以三十万条人口数据渲染在一张热力图为例，详细的描述如下：

首先是初始化背景地图；这里的背景地图可以是一张包含某地区地图的静态图片，也可以是调用地图接口获得某地区地图的静态图片。初始化背景地图是指将获得的静态图片加载并显示在客户端显示屏上，通常是将静态图片显示在浏览器页面中或者是软件应用程序中。例如：有一张静态图片命名为a.png，将a.png加载并显示在客户端的浏览器上。

其次是异步加载数据；这里的异步加载，也叫非阻塞模式加载，是指客户端的浏览器或者软件应用程序在不刷新页面全局窗口的情况下，向服务器请求并获得数据的同时，不影响浏览器或者软件应用程序其它任务的进行，在这里通俗来讲就是边加载数据边画图。例如：浏览器中加载JavaScript脚本，并利用JavaScript脚本中的异步加载功能，向服务器请求数据命名为b.json，向服务器请求数据命名为c.json，接收服务器发送的b.json,接收服务器发送的c.json。

然后是将获得的数据以预先设定的颜色画在背景地图中；这里预先设定的颜色可以是人口数据密集则显示红色，人口数据稀疏则显示黄色，人口数据为零则为透明。当然，存在有些数据先接收到，有些数据后接收到的情况，那么就可以先画先接收到的数据。例如：先接收服务器发送的b.json,后接收到服务器发送的c.json，那么就先画b.json到背景地图中，然后再画c.json到背景地图中。

最后是将所有接收到的数据画在背景地图中，即热力图渲染完成。

当然，上述的这种热力图渲染方法在具体实施的过程中，当在数据加载过多的情况下，这种方式就会出现渲染速度比较慢。例如，在数据量达到两千多时，在客户端的浏览器上，数据加载和热力图渲染的时间甚至达到了数十秒，数据量达到一万条时，客户端的浏览器已经卡死。

为解决上述技术问题，本申请实施例提供了如下的热力图渲染方法和装置，下面将结合附图，对本申请实施例中的热力图渲染方法和装置进行详细介绍。

请参见图1，图1示出了本申请实施例提供的服务器和客户端交互示意图。服务器101通过网络103与一个或多个客户端102进行通信连接，以进行数据通信或交互。服务器101可以是网络服务器、数据库服务器等。客户端102可以是平板电脑或个人台式机电脑。在本申请实施例中，服务器101主要通过网络103与安装于客户端102进行交互。

请参见图2，图2示出了本申请实施例提供的服务器的结构示意图。本申请实施例提供了的一种服务器101，包括：处理器104和存储器105，存储器105存储有处理器104可执行的机器可读指令，机器可读指令被处理器104执行时执行如下的方法。

请参见图2，本申请实施例还提供了的一种存储介质106，该存储介质106上存储有计算机程序，该计算机程序被处理器104运行时执行如下的方法。

其中，存储介质106可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(Static Random Access Memory,简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory,简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read Only Memory,简称EPROM)，可编程只读存储器(Programmable Red-Only Memory,简称PROM)，只读存储器(Read-Only Memory,简称ROM)，磁存储器，快闪存储器，磁盘或光盘。

第一实施例

请参见图3，图3示出了本申请实施例提供的热力图渲染方法流程示意图。本申请实施例提供了的一种热力图渲染方法，应用于客户端，包括：

步骤S110：读取全部网格数据。

其中，网格为按照预设条件将图像划分成大小均匀的格网矩阵的显示区域，以便于客户端中的运行程序对图像进行分区域展示，通常在客户端的内存中对应一块特定的存储结构。这里的预设条件可以是动态展示的需求，又或者是存储硬件的单位要求。

网格数据，是指一个网格对应的存储结构将要存储的数据，例如网格在内存中对应的存储结构编号为10001，而将要存储的数据为#FFFFFF，那么可以将#FFFFFF的数据存入编号为10001的存储结构中。又例如网格在内存中对应的存储结构编号为10002，而将要存储的人口数据为1200，那么可以将1200的人口数据存入编号为10001的存储结构中。

通常一个网格里需要存储的数据可以称为一个网格数据。在热力图的多个网格加载全部网格数据后，热力图的多个网格根据全部网格数据对热力图渲染。

客户端可以从暂时性存储介质中读取全部网格数据，也可以从永久性存储介质中读取全部网格数据，示例性的，客户端接收服务器发送的全部网格数据，将该全部网格数据存储至暂时性存储介质中，然后再从暂时性存储介质中读取全部网格数据。客户端通过网络通信卡接收服务器发送的全部网格数据，将该全部网格数据存储至永久性存储介质中，然后再从暂时性存储介质中读取全部网格数据。

可选地，在一种示例性实施例中，上述在步骤S110之前，还包括如下步骤：

步骤S101：接收服务器发送的格式数据。

步骤S102：对格式数据进行解封装，获得压缩数据。

步骤S103：对压缩数据进行解压得到全部网格数据。

下面对上述步骤S101-S103展开详细描述：

在步骤S101中，格式数据可以是各种格式的数据，例如：轻量级的数据交换格式(JavaScript Object Notation,JSON)格式，或可扩展标记语言(eXtensible MarkupLanguage，XML)格式。

客户端可以通过简单对象访问协议(Simple Object Access Protocol,SOAP)与服务器通信，SOAP是一种基于XML的协议，可以和现存的许多因特网协议和格式结合使用，现存的许多因特网协议包括：超文本传输协议(HyperText Transfer Protocol,HTTP)，简单邮件传输协议(Simple Mail Transfer Protocol,SMTP)，多用途网际邮件扩充协议(Multipurpose Internet Mail Extensions,MIME)，基于非常通用的传输协议是SOAP的一个优点。当然，客户端也可以通过网络服务描述语言(Web Services DescriptionLanguage,WSDL)接收服务器发送的格式数据，在其中一种实施方式中，服务器上建立Web服务后，使用WSDL协议对提供的Web服务进行描述，然后客户端再通过SOAP协议接收服务器发送的JSON格式或者XML格式的数据。

在步骤S102中，对上述的格式数据进行解封装，获得压缩数据。上述的格式数据包括：JSON格式数据或XML格式数据。

压缩数据，可以是指对数据本身的压缩，例如，网格数据在存储中是以矩阵的方式进行存储的，因此对矩阵进行压缩再发送，可以极大地节约网络资源，提高网格数据的传输效率。也可以是指运行于服务器上的代理服务软件对需要传输的数据进行压缩并传输的数据文件，具体地例如：Nginx或者Apache Http Server上需要进行压缩的静态数据文件。

在一种示例性的实施方式中，对上述的JSON格式数据可以使用解封装插件进行解封装，获得压缩数据，这里的解封装插件可以是GSON插件包、FastJSON插件包和Jackson插件包。

使用以上的格式数据处理方法在服务器端对数据进行格式封装后，再通过网络进行传输至客户端进行解封装处理，使得客户端在对数据统一处理上有的效率更高，从而间接地提升了热力图的渲染速度。

在步骤S103中，对压缩数据进行解压得到全部网格数据的方式有很多中，在一种示例性的实施方式中，当压缩数据为矩阵且该矩阵为对称矩阵时，例如，这里的对称矩阵可以为该矩阵对角线上的数字为1和8，对角线两边的元素是对称的，整个矩阵满足a[i][j]＝a[j][i]，其中，a为该对称矩阵，i为行的序数，如第i行，j为列的序数，如第j列，a[i][j]代表该对称矩阵第i行第j列的数值。因此，只需要按照特殊结构存储该对称矩阵的一半的数值即可，即只存储即可，在复原该对称矩阵时，可以按照相应的方式从特殊结构复原该对称矩阵。该存储结构可以是[1][2,8]，第一个方括号里代表上述对称矩阵的第一行的数值，第二个方括号里代表上述对称矩阵的第二行的数值，不同列的数值以逗号分隔。在复原该对称矩阵时，先按照行复原为再将对角的数值拷贝即可获得原对称矩阵

当然，步骤S102和步骤S103的执行顺序可以是先执行解压缩步骤，再执行解封装步骤，一种示例性的实施方式描述如下：

压缩数据，也可以是指运行于服务器上的代理服务软件对需要传输的数据进行压缩并传输的数据文件，具体的代理服务软件例如：Nginx或者Apache Http Server，其中，Nginx(engine x)是一个高性能的HTTP和反向代理服务软件，也是一个IMAP/POP3/SMTP服务；Apache Http Server(简称Apache)，是Apache软件基金会的一个开放源代码的网页服务器。这些代理服务软件可以运行于服务器上，为客户端提供静态文件或据传输服务。

在一个具体的实施方式中，对压缩数据进行解压的方法，例如，服务器上运行着Nginx服务软件，服务器将提前准备需要传输的数据文件为

a.json，Nginx服务软件使用压缩模块(例如gzip模块)将a.json进行压缩后，获得a.json.gzip文件，然后将a.json.gzip文件传输给客户端，客户端接收到a.json.gzip文件后，利用浏览器的解压缩模块对a.json.gzip文件进行解压，获得服务器传输的数据文件，即a.json文件。

可以理解的是，使用以上的格式数据处理方法在服务器端对数据进行格式封装后，再通过网络进行传输至客户端进行解封装处理，使得客户端在对数据统一处理上有的效率更高，从而间接地提升了热力图的渲染速度。

步骤S120：将全部网格数据中的每个网格数据输入至多个存储结构的一个存储结构，其中，每个存储结构至多存储一个网格数据。

存储结构可以是指客户端浏览器中待加载网格数据的图模板对象，一个图模板对象的在内存中对应一个存储结构，例如有两个存储结构包括第一存储结构和第二存储结构，第一存储结构的地址编号为10001，第二存储结构的地址编号为10002。

网格数据的数量不做限制，可以是2个网格数据，也可以是3个网格数据，例如包括：第一网格数据和第二网格数据，第一网格数据的值为2100，第二网格数据的值为2200。

将全部网格数据中的每个网格数据输入至多个存储结构的一个存储结构的方式例如：将第一网格数据的值2100加载至地址编号为10001的内存区域即第一存储结构中，将第二网格数据的值2200加载至地址编号为10002的内存区域即第二存储结构中。

步骤S130：在全部网格数据输入完成之后，根据热力图被划分获得的多个网格的每个网格对应的存储结构中的网格数据，将每个网格呈现出相应的颜色，以渲染热力图，其中，每个网格对应一个存储结构。

以上述的数据加载为例进行说明，将每个网格呈现出相应的颜色，以渲染热力图的方式，例如：将网格数据的值小于2150呈现为白色的RGB色彩值为#FFF，将网格数据的值大于2150呈现为黑色的RGB色彩值为#000，其中，RGB是指三原色,R代表Red(红色),G代表Green(绿色),B代表Blue(蓝色)，可以用RGB的色彩值具体表示一种颜色，以便能够在客户端的显示器上显示出来。又例如：将网格数据的值大于1000设置为透明，将网格数据的值大于1000且小于2150呈现为黄色，将网格数据的值大于2150且小于5000呈现为红色，将网格数据的值大于5000且小于9999呈现为红色，。

当然色彩值也可以用其它的方式表示，例如：HSB，其中，H(hues)表示色相，S(saturation)表示饱和度，B(brightness)表示亮度。因此，上述的第一网格数据的值2100小于2150，第一网格数据对应的网格应该呈现为白色#FFF，第二网格数据的值2200大于2150，第二网格数据对应的网格应该呈现为黑色#000。

在一种示例性的实施方式中，步骤S130可以包括：

步骤S131：确定热力图的类型为二维热力图，则利用二维动态插件读取热力图的每个网格对应存储结构中的网格数据的数值。

二维动态插件，是指针对二维热力图加速渲染的插件，可以采用Echarts库中的timeline组件中的heatmap热力图功能，其中，Echarts库是指一种针对浏览器的强大且交互式的图表可视化库，timeline组件是Echarts库中提供多个选项卡之间进行切换和播放等操作功能的组件，heatmap热力图功能是timeline组件中专门针对热力图提供快速开发的一种功能脚本功能。

在具体的实施过程中，timeline组件具体可以使用24小时时间轴的样式，当然，服务器需要提前准备24小时时间轴的样式所需要展示的数据，按照时间轴顺序或者倒序动态地对该数据进行播放，在播放的时候由于timeline组件对数据处理的效率非常高，所以，采用Echarts库中的timeline组件中的heatmap热力图功能，可以极大地提高了热力图的渲染效率，从而在渲染热力图时完全感受不到卡顿的现象。

使用上述的二维动态插件读取存储结构中的网格数据的数值，然后使存储结构对应的网格呈现出与网格数据的数值相应的颜色，直接地提高了二维热力图的渲染速度。

步骤S132：将存储结构对应的网格呈现出与网格数据的数值相应的颜色。

这一步骤的颜色呈现方式与步骤S130的具体方法一致，因此，不在此赘述。

在另一种示例性的实施方式中，步骤S130可以包括：

步骤S133：确定热力图的类型为三维热力图，则利用三维引擎插件读取热力图的每个网格对应存储结构中的网格数据的数值。

三维动态插件，是指针对三维热力图加速渲染的插件，可以采用Echarts库中的timeline组件，再结合maptalks插件，或者结合mapbox插件，其中，Echarts库是一种针对浏览器的强大且交互式的图表可视化库，tmaptalks插件是一种开源的专门为集成二维地图或三维地图的JavaScript(一种客户端脚本开发语言)库，mapbox插件是一种开源的专门为定制设计的地图平台，可以为移动终端或者网页终端提供程序接口或者软件开发工具包。

在具体的实施过程中，timeline组件具体可以使用24小时时间轴的样式，当然，服务器需要提前准备24小时时间轴的样式所需要展示的数据，按照时间轴顺序或者倒序动态地对该数据进行播放，具体地，例如：三维热力图中的网格柱子可以根据服务器发送的数据动态地调节高低，三维热力图中的网格柱子展现出由低到高或者由高到低的动态变化。因为在播放的时候由于timeline组件对数据处理的效率非常高，所以，采用Echarts库中的timeline组件中的heatmap热力图功能，可以极大地提高了热力图的渲染效率，从而在渲染热力图时完全感受不到卡顿的现象，提升了热力图的展示效果。

使用上述的三维动态插件读取存储结构中的网格数据的数值，然后使存储结构对应的网格呈现出与网格数据的数值相应的颜色，直接地提高了三维热力图的渲染速度。

步骤S134：将存储结构对应的网格呈现出与网格数据的数值相应的颜色。

该步骤的颜色呈现方式与步骤S130的具体方法一致，因此，不在此赘述。使用上述方法可以一次性获取全部网格数据，并将全部网格数据在渲染之前加载至存储结构中，以提前加载全部网格数据至存储结构的方式，以减少在渲染时的数据获取和数据加载的时间，从而有效地提升了热力图的渲染速度。

第二实施例

本申请实施例提供了的一种热力图渲染方法，应用于服务器，方法包括：

步骤S210：根据热力图被划分获得的多个网格对预先存储的数据进行统计，获得全部网格数据。

其中，预先存储的数据是需要通过热力图展示的数据，例如可以是人口数据和位置数据，人口数据可以从合作的运营商提供的接口中获取，例如从接口中获取的运营商信令数据提取人口数据；而位置数据可以先通过运营商提供的接口中获取手机全球定位***(Global Positioning System，GPS)数据，再从手机GPS数据提取位置数据。在一种示例性的实施方式中，人口数据例如A区人口数量为10万，B区的人口数量为20万，而C市只包括A区和B区，A区的位置坐标为[100,200]，B区的位置坐标为[200,100]。

以上述的人口数据和位置数据为例，根据热力图被划分获得的多个网格对预先存储的数据进行统计的具体方式可以是，统计C市的人口数据计算方式为：10万+20万＝30万，而C市的位置数据为：

[(100+200)/2,(200+100)/2＝[150,150]，将C市的人口数据和位置数据作为一个网格数据，以此类推，获取全部的网格数据，例如D市的人口数据和C市的人口数据相同，D市的位置数据为[800,900]，全部的网格数据包括C市和D市，则全部的网格数据可以表示为{C:[population:30,location:[150,150]],D:[population:30,location:[800,900]]}。

步骤S220：将全部网格数据发送给客户端。

如上的，服务器可以通过SOAP协议与客户端通信，服务器通过SOAP协议将全部网格数据发送给客户端。

可选地，在本申请实施例中，步骤S220可以包括：

步骤S221：将全部网格数据根据多个网格进行压缩，获得压缩数据。

以上述的数据为例，将全部网格数据根据多个网格进行压缩的方式可以为：{C:[population:30,location:[150,150]],D:[population:C,location:[800,900]]}。即在D市人口数据上直接用C市的特殊编号或者名称代替。当然，这只是其中一种示例性的表示方式，在具体的实施过程中，全部网格数据可以是以矩阵的方式进行存储的，也可以是以序列化或者其它形式存储的。在对全部网格数据进行压缩后，可以极大地节约网络资源，提高网格数据的传输效率。

步骤S222：将压缩数据发送给客户端。

如上，服务器可以通过SOAP协议与客户端通信，服务器通过SOAP协议将压缩数据发送给客户端。使用以上的压缩方法在服务器端压缩数据后，再通过网络进行传输至客户端进行处理，节约了网络带宽资源的同时，也使得通过网络进行传输至客户端的效率更高，从而间接地提升了热力图的渲染速度。

可选地，在本申请实施例中，步骤S220还可以包括：

步骤S223：对压缩数据进行封装，获得格式数据。

以上述的数据为例，压缩数据为{C:[population:30,location:[150,150]],D:[population:C,location:[800,900]]}，例如用JSON格式对压缩数据进行封装，则获得的格式数据，例如：{"C":[{"population":"30","location":[150,150]"}]，"D":[{"population":"C",location":[150,150]"}]。当然也可以用XML格式对压缩数据进行封装，因此，具体使用什么格式对数据进行封装不应理解为对本申请实施例的限制。

步骤S224：将格式数据发送给客户端。

如上的，服务器可以通过SOAP协议与客户端通信，服务器通过SOAP协议将格式数据发送给客户端。使用上述方法可以一次性获取全部网格数据，并将全部网格数据在渲染之前加载至存储结构中，以提前加载全部网格数据至存储结构的方式，以减少在渲染时的数据获取和数据加载的时间，从而有效地提升了热力图的渲染速度。

第三实施例

请参见图4，图4示出了本申请实施例提供的热力图渲染装置应用于客户端的结构示意图。本申请实施例提供了的一种热力图渲染装置100，应用于客户端102，热力图渲染装置100包括：

网格数据读取模块110，用于读取全部网格数据。

网格数据输入模块120，用于将全部网格数据中的每个网格数据输入至多个存储结构的一个存储结构，其中，每个存储结构至多存储一个网格数据。

热力图渲染模块130，用于在全部网格数据输入完成之后，根据热力图被划分获得的多个网格的每个网格对应的存储结构中的网格数据，将每个网格呈现出相应的颜色，以渲染热力图，其中，每个网格对应一个存储结构。

第四实施例

请参见图5，图5示出了本申请实施例提供的热力图渲染装置应用于服务器的结构示意图。本申请实施例提供了的一种热力图渲染装置100，应用于服务器101，热力图渲染装置100包括：

网格数据获得模块140，用于根据热力图被划分获得的多个网格对预先存储的数据进行统计，获得全部网格数据。

网格数据发送模块150，用于将全部网格数据发送给客户端。

以上，仅为本申请实施例的具体实施方式，但本申请实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请实施例揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请实施例的保护范围之内。

Claims (10)

1.一种热力图渲染方法，其特征在于，应用于客户端，包括：

读取全部网格数据；

将所述全部网格数据中的每个网格数据输入至多个存储结构的一个存储结构，其中，每个所述存储结构至多存储一个所述网格数据；

在所述全部网格数据输入完成之后，根据热力图被划分获得的多个网格的每个网格对应的所述存储结构中的网格数据，将所述每个网格呈现出相应的颜色，以渲染所述热力图，其中，所述每个网格对应一个所述存储结构。

2.如权利要求1所述的热力图渲染方法，其特征在于，在所述读取全部网格数据之前，所述方法还包括：

对压缩数据进行解压得到所述全部网格数据。

3.如权利要求2所述的热力图渲染方法，其特征在于，在所述对压缩数据进行解压得到所述全部网格数据之前，还包括：

接收服务器发送的格式数据；

对所述格式数据进行解封装，获得所述压缩数据。

4.如权利要求1所述的热力图渲染方法，其特征在于，所述根据热力图被划分获得的多个网格的每个网格对应的所述存储结构中的网格数据，将所述每个网格呈现出相应的颜色，包括：

确定所述热力图的类型为二维热力图，则利用二维动态插件读取所述热力图的每个网格对应所述存储结构中的网格数据的数值；

将所述存储结构对应的网格呈现出与所述网格数据的数值相应的颜色。

5.如权利要求1所述的热力图渲染方法，其特征在于，所述根据热力图被划分获得的多个网格的每个网格对应的所述存储结构中的网格数据，将所述每个网格呈现出相应的颜色，包括：

确定所述热力图的类型为三维热力图，则利用三维引擎插件读取所述热力图的每个网格对应所述存储结构中的网格数据的数值；

将所述存储结构对应的网格呈现出与所述网格数据的数值相应的颜色。

6.一种热力图渲染方法，其特征在于，应用于服务器，所述方法包括：

根据热力图被划分获得的多个网格对预先存储的数据进行统计，获得全部网格数据；

将所述全部网格数据发送给客户端。

7.如权利要求6所述的热力图渲染方法，其特征在于，所述将所述全部网格数据发送给客户端，包括：

将所述全部网格数据根据所述多个网格进行压缩，获得压缩数据；

将所述压缩数据发送给客户端。

8.如权利要求7所述的热力图渲染方法，其特征在于，所述将所述压缩数据发送给客户端，包括：

对所述压缩数据进行封装，获得格式数据；

将所述格式数据发送给客户端。

9.一种热力图渲染装置，其特征在于，应用于客户端，所述热力图渲染装置包括：

网格数据读取模块，用于读取全部网格数据；

网格数据输入模块，用于将所述全部网格数据中的每个网格数据输入至多个存储结构的一个存储结构，其中，每个所述存储结构至多存储一个所述网格数据；

热力图渲染模块，用于在所述全部网格数据输入完成之后，根据热力图被划分获得的多个网格的每个网格对应的所述存储结构中的网格数据，将所述每个网格呈现出相应的颜色，以渲染所述热力图，其中，所述每个网格对应一个所述存储结构。

10.一种热力图渲染装置，其特征在于，应用于服务器，所述热力图渲染装置包括：

网格数据获得模块，用于根据热力图被划分获得的多个网格对预先存储的数据进行统计，获得全部网格数据；

网格数据发送模块，用于将所述全部网格数据发送给客户端。