CN112698898A - 一种播放盒终端热力图快照生成方法及*** - Google Patents

Abstract

本发明提供一种播放盒终端热力图快照生成方法及***，其中方法包括接收用户的热力图获取指令，根据热力图获取指令从云服务器中获取与热力图获取指令相对应的播放盒终端GPS数据；根据播放盒终端GPS数据控制前端的地图软件生成目标热力图视图信息；将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布后，生成并导出图片形式的目标播放盒终端热力图快照；将导出的图片形式的目标播放盒终端热力图快照显示在前端的显示页面上，***包括多个播放盒终端、前端浏览器以及后端云服务器，本发明提供的方法及***，自动生成图片形式的目标播放盒终端热力图快照，方便快捷且清晰度高。

Description

一种播放盒终端热力图快照生成方法及***

技术领域

本发明涉及终端热力图领域，尤其涉及一种播放盒终端热力图快照生成方法及***。

背景技术

目前会将与LED显示屏连接的播放盒终端(播放盒，与云服务器连接，接收云服务器下发的节目和指令等)安放在出租车中，控制LED显示屏播放节目。播放盒终端中设有GPS模块，会实时向云服务器上传播放盒终端(车辆)的GPS数据，前端浏览器与云服务器连接，根据用户指令获取到GPS数据并在前端的地图软件中生成热力图视图展示在前端的显示页面，但是热力图视图是动态实时变化的，当用户想要对热力图视图进行处理分析时，往往需要手动截图的形式获取到热力图图片，操作较为麻烦，尤其是当需要获取的热力图图片较多时，手动截图浪费大量时间。

发明内容

为了解决上述问题，本发明提供了一种播放盒终端热力图快照生成方法及***。

本发明提供的播放盒终端热力图快照生成方法，应用在前端浏览器，包括：接收用户的热力图获取指令，根据热力图获取指令从云服务器中获取与热力图获取指令相对应的播放盒终端GPS数据，热力图获取指令包括用户设定的时间范围以及一个或多个播放盒终端，播放盒终端GPS数据包括播放盒终端位置信息以及所述播放盒终端在同一个位置上出现的次数；根据播放盒终端GPS数据控制前端调用的地图软件生成目标热力图视图信息；将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布后，生成并导出图片形式的目标播放盒终端热力图快照，将导出的图片形式的目标播放盒终端热力图快照显示在前端的显示页面上。

进一步的，将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布，生成图片形式的目标播放盒终端热力图快照，包括：通过canvas画布的第一API接口将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布，生成图片形式的目标播放盒终端热力图快照；并且通过canvas画布的第二API接口从canvas画布中导出图片形式的目标播放盒终端热力图快照。

进一步的，第一API接口包括html2canvas接口，第二API接口包括格式转换接口以及存在指定格式保存接口，其中格式转换接口包括convertToPNG接口、convertToJPEG接口、convertToGIF接口以及convertToBMP接口，存在指定格式保存接口为saveAsPNG接口、saveAsJPEG接口、saveAsGIF接口和saveAsBMP接口。

进一步的，方法还包括：通过与canvas画布关联的html2canvas接口中的useCORS配置项，设置canvas画布允许载入符合跨域资源共享规范的图片资源，图片资源为目标热力图视图信息。

进一步的，方法还包括：在将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布之前，将目标热力图视图信息转化为二进制格式保存在本地；将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布包括将二进制格式的目标热力图视图信息作为DOM节点绘制到前端中的canvas画布。

进一步的，在将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布之前，方法还包括根据设备上物理像素和逻辑像素的比例确定放大倍数，根据放大倍数对canvas画布进行放大；对canvas画布进行放大后，使用css将放大后的canvas画布缩小，其中，缩小倍数与所述放大倍数相等。

进一步的，方法还包括：在将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布之前，设置与目标热力图视图信息关联的元素样式的格式为预设统一格式。

进一步的，方法还包括在将导出的图片形式的目标播放盒终端热力图快照展示在前端浏览器显示页面上时，采用img标签展示所述目标播放盒终端热力图快照。

进一步的，方法还包括将导出的图片形式的目标播放盒终端热力图快照上传至云服务器进行存储。

本发明还提供一种播放盒终端热力图快照生成***，***包括多个播放盒终端、前端浏览器以及后端云服务器，其中：播放盒终端，设置在车辆上，并与后端云服务器连接，用于控制车辆上的LED显示屏，并实时采集所在位置的GPS数据作为第一GPS数据，将第一GPS数据上传至后端云服务器；后端云服务器，分别与播放盒终端以及后端云服务器连接，用于接收播放盒终端上传的第一GPS数据，并对第一GPS数据进行精度截取处理，将第一GPS数据截取至预设精度后存储至热力图计数表中，并根据第一GPS数据对应的上传时间及上传播放盒终端，为热力图计数表中的每条第一GPS数据建立索引，生成热力图搜索索引表；在接收到热力图获取指令后，根据热力图获取指令，从热力图搜索索引表中获取与热力图获取指令对应的索引，根据索引在热力图计数表中进行查询，获得与热力图获取指令对应的多条第二GPS数据；对第二GPS数据进行分组，将位置信息相同的第二GPS数据作为一组数据组，分别将每组数据组中的第二GPS数据整合为一条播放盒终端GPS数据，播放盒终端GPS数据中包括播放盒终端位置信息以及播放盒终端在同一个位置上出现的次数，将播放盒终端GPS数据发送至前端浏览器；前端浏览器，与后端云服务器连接，用于接收用户的热力图获取指令，根据热力图获取指令从云服务器中获取与热力图获取指令相对应的播放盒终端GPS数据，热力图获取指令包括用户确定的时间范围以及一个或多个播放盒终端，播放盒终端GPS数据包括播放盒终端位置信息以及播放盒终端在同一个位置上出现的次数；根据播放盒终端GPS数据控制前端调用的地图软件生成目标热力图视图信息；将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布后，生成并导出图片形式的目标播放盒终端热力图快照，将导出的图片形式的目标播放盒终端热力图快照显示在前端显示页面上。

本发明提供的播放盒终端热力图快照生成方法及***，至少具有以下有益效果：在前端浏览器中，将地图软件的中生成的目标热力图视图信息通过canvas画布自动生成图片形式的目标播放盒终端热力图快照，无需用户手动截取，方便快捷，且生成的目标播放盒终端热力图快照的图片清晰度相较于用户手动截图更加清晰。

附图说明

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

图1为本发明实施例的播放盒终端热力图快照生成方法的步骤流程图一；

图2为本发明实施例的播放盒终端热力图快照生成方法的步骤流程图二；

图3为本发明实施例的播放盒终端热力图快照生成方法的步骤流程图三；

图4为本发明实施例的播放盒终端热力图快照生成方法的步骤流程图四；

图5为本发明实施例的播放盒终端热力图快照生成***的结构示意图；

501-播放盒终端、502-前端浏览器、503-后端云服务器。

具体实施方式

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

在本发明的一种实施例中，提供一种播放盒终端热力图快照生成方法，该方法应用在前端浏览器中，如图1所示，方法包括以下步骤：

步骤S101：接收用户的热力图获取指令，根据热力图获取指令从云服务器中获取与热力图获取指令相对应的播放盒终端GPS数据。

云服务器中存储了大量的播放盒终端上传的GPS数据，具体的，播放盒终端被设置在车辆上，与车辆上的LED显示屏以及云服务器连接，播放盒终端中设置有GPS定位模块，可以实时监测播放盒终端(车辆)的位置，获得第一GPS数据，并将第一GPS数据上传至云服务器中。每条播放盒终端上传的第一GPS数据都对应一个上传播放盒终端以及上传时间，云服务器接收到第一GPS数据后，将第一GPS数据截取至预设精度后存储至热力图计数表中，并根据第一GPS数据对应的上传时间及上传播放盒终端，为热力图计数表中的每条第一GPS数据建立索引，生成热力图搜索索引表。进一步的，预设精度可以由技术人员自行设定，例如截取到第一GPS数据的小数点后3位，可以通过Mysql进行四舍五入并舍去第一GPS数据的小数点三位之后的数字(在Mysql获取热力图计数表中的第一GPS数据字段时就进行转换)。

在本实施例中，用户的热力图获取指令包括用户确定的时间范围及一个或多个播放盒终端，每个播放盒终端都具有唯一确定的播放盒终端ID，可以由用户在前端浏览器的显示页面中选择或输入播放盒终端ID来确定用户所需获取的某1个或某几个播放盒终端在预设的时间范围下的播放盒终端GPS数据。

前端浏览器接收到用户的热力图获取指令之后，可将热力图获取指令发送至云服务器，根据热力图获取指令从云服务器中获取与热力图获取指令相对应的播放盒终端GPS数据(具体的获取方法在后文中有详细叙述，在此不再过多赘述)。具体的，播放盒终端GPS数据包括播放盒终端位置信息以及播放盒终端在同一个位置上出现的次数。

步骤S102：根据播放盒终端GPS数据控制前端调用的地图软件生成目标热力图视图信息。

具体的，地图软件可以根据每一条播放盒终端GPS数据中的播放盒终端位置信息以及播放盒终端在同一个位置上出现的次数生成目标热力图视图信息，其中，播放盒终端在同一个位置上出现的次数即代表该位置处的权重，次数越多，则反映在目标热力图视图上该位置处的颜色就越深。进一步的，在云服务器接收到热力图获取指令之后，即根据热力图获取指令获取到与其对应的第二GPS数据，之后对第二GPS数据进行数据的分组以及整合，将位置信息相同的第二GPS数据作为1组，通过count相加的方式，统计每1组内的第二GPS数据的条数，即播放盒终端在同一个位置上出现的次数。例如在同一个位置下：0点到1点，播放盒终端出现在该位置1次，即存在1条第二GPS数据，1点-2点，播放盒终端出现在该位置2次，即存在2条第二GPS数据，3点-4点，播放盒终端出现在该位置5次，即存在5条第二GPS数据，count相加就是8次数据，在热力图中，同一个精维度多次相加，呈现的颜色越深，反之亦然。

步骤S103：将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布后，生成并导出图片形式的目标播放盒终端热力图快照。

进一步的，可以通过canvas画布的第一API接口将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布，生成图片形式的目标播放盒终端热力图快照；具体的，使用html2canvas代码语句，在通过前端确定地图折线、圆和多边形等覆盖物是由SVG绘制后，将SVG转换成canvas，以便于对上述覆盖物绘制到canvas画布中，其中SVG(Scalable VectorGraphics，可缩放的矢量图形)，是一种开放标准的矢量图形语言，可以任意放大图形显示，且不会以牺牲图像质量为代价，可被非常多的工具读取和修改。之后通过canvas画布的第二API接口从canvas画布中导出图片形式的目标播放盒终端热力图快照，具体使用的是canvas2image代码语句。

更进一步的，上述所提及的第一API接口包括html2canvas接口，第二API接口包括格式转换接口以及存在指定格式保存接口，其中格式转换接口包括convertToPNG接口、convertToJPEG接口、convertToGIF接口以及convertToBMP接口，存在指定格式保存接口为saveAsPNG接口、saveAsJPEG接口、saveAsGIF接口和saveAsBMP接口。

步骤S104：将导出的图片形式的目标播放盒终端热力图快照显示在前端的显示页面上。

本实施例中的播放盒终端热力图快照生成方法在前端浏览器中，将地图软件的中生成的目标热力图视图信息通过canvas画布自动生成图片形式的目标播放盒终端热力图快照，无需用户手动截取，方便快捷。

在本发明的又一种实施例中，如图2所示，播放盒终端热力图快照生成方法还包括：

步骤S105：通过与canvas画布关联的html2canvas接口中的useCORS配置项，设置canvas画布允许载入符合跨域资源共享规范的图片资源。

只有当域名、协议和端口相同的资源才是同源资源。通常浏览器会禁止一种资源去直接访问不同域、协议或端口的另一种资源。在本实施例中，图片资源指的是目标热力图视图信息。由于图片资源是来源于地图软件中，访问图片资源就会存在这种跨域问题，此时设置canvas画布允许载入符合跨域资源共享规范的图片资源，就可获取跨域资源，实现跨域通信。

在本实施例中，步骤S105设置在步骤S103之前，在将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布，生成并导出图片形式的目标播放盒终端热力图快照之前先对canvas画布进行配置，将canvas画布配置为允许载入符合跨域资源共享规范的图片资源，从而实现图片跨域。

在本发明的又一种实施例中，如图3所示，方法还包括：

步骤S106：将目标热力图视图信息转化为二进制格式保存在本地。具体的，在本实施例中，步骤S106设置在步骤S103之前，并且此时步骤S103为将二进制格式的目标热力图视图信息作为DOM节点绘制到前端中的canvas画布,生成并导出图片形式的目标播放盒终端热力图快照。

通过图片资源转Blob的方案，将base64的连接转换为二进制的图片，保存在本地中，不用重新去加载，以保证图片的地址来自本地，避免在快照(截取目标热力图)转化时出现加载失败的情况(也即快照不完整的情况)。Blob是对大数据块的不透明引用或句柄，名字来源于SQL数据库，表示二进制大对象，为用于二进制数据的大量JavaScript API提供重要的数据交换机制。Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。

在本发明的又一种实施例中，如图4所示，在将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布之前，方法还包括

步骤S107：根据设备上物理像素和逻辑像素的比例确定放大倍数，根据放大倍数对canvas画布进行放大。

具体的，设备上物理像素和逻辑像素的比例即devicePixelRatio，为设备像素比，它的值等于设备像素/设备无关像素，即devicePixelRatio＝DP/DIP，其中DP(devicepixel，设备像素)又称物理像素、屏幕像素，是显示屏的最小物理单元，是我们在屏幕上能看到的最小点。在本实施例中，这里的设备像素即前端显示屏的像素。DIP(device-independent pixel，设备无关像素)又称密度无关像素，DIP是一个抽象单位，表示计算机中的一个虚拟点，是逻辑像素。

步骤S108：对canvas画布进行放大后，使用css将放大后的canvas画布缩小，其中，缩小倍数与所述放大倍数相等。

CSS指层叠样式表，英文全称：Cascading Style Sheets，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

本实施例中，对于高分辨率的前端显示屏，通过上述步骤可以将css像素(css像素是浏览器使用的抽象单位，属于设备无关像素DIP，我们看到的内容，是浏览器将css像素转化为设备像素后的结果)与前端显示屏的物理像素对齐，从而在后续生成图片形式的目标播放盒终端热力图快照时，在一定程度上提高清晰度。

在本发明的又一种实施例中，方法还包括：在将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布之前，设置与目标热力图视图信息关联的元素样式的格式为预设统一格式。具体的，与目标热力图视图信息关联的元素样式为使用％,vw,vh,rem等单位的元素样式，包括宽度、高度、字体大小和位置等样式。本实施例中，预设统一格式可以为PX格式，将与目标热力图视图信息关联的元素样式的格式统一设置为PX格式，可以给到html2canvas接口明确的整数计算值，避免因小数舍入而导致的拉伸模糊。

在本发明的又一种实施例中，方法还包括：在将导出的图片形式的目标播放盒终端热力图快照展示在前端浏览器显示页面上时，采用img标签展示目标播放盒终端热力图快照。很多情况下，导出的图片模糊是由于原视图中的图片是以css中background的方式显示的。而background-size并不会反馈图片具体的宽高数值，而是通过枚举值如contain、cover等代表图片缩放的类型；因此以background方式最终生成的图片会较为模糊。将background改为<img>标签方式呈现，<img>标签可以设置图片的height和width属性，为图像指定height和width属性，可以在页面加载时为图像预留空间，因此对于图片清晰度会有一定的改观，从而采用img标签展示目标播放盒终端热力图快照可以优化展示效果，提高清晰度。

在本发明的又一种实施例中，方法还包括将导出的图片形式的目标播放盒终端热力图快照上传至云服务器。本实施例中，将导出的图片形式的目标播放盒终端热力图快照上传至云服务器进行存储，以便其他用户也可以获取到目标播放盒终端热力图快照。

本发明还提供一种播放盒终端热力图快照生成***，如图5所示，***包括多个播放盒终端501、前端浏览器502以及后端云服务器503，其中播放盒终端501，设置在车辆上，并与后端云服务器503连接，用于控制车辆上的LED显示屏，并实时采集所在位置的GPS数据作为第一GPS数据，将第一GPS数据上传至后端云服务器503。

后端云服务器503，分别与播放盒终端501以及后端云服务器503连接，用于接收播放盒终端501上传的第一GPS数据，并对第一GPS数据进行精度截取处理，将第一GPS数据截取至预设精度后存储至热力图计数表中，并根据第一GPS数据对应的上传时间及上传播放盒终端，为热力图计数表中的每条第一GPS数据建立索引，生成热力图搜索索引表；在接收到热力图获取指令后，根据热力图获取指令，从热力图搜索索引表中获取与热力图获取指令对应的索引，根据索引在热力图计数表中进行查询，获得与热力图获取指令对应的多条第二GPS数据；对第二GPS数据进行分组，将位置信息相同的第二GPS数据作为一组数据组，分别将每组数据组中的第二GPS数据整合为一条播放盒终端GPS数据，播放盒终端GPS数据中包括播放盒终端位置信息以及所述播放盒终端在同一个位置上出现的次数，将播放盒终端GPS数据发送至前端浏览器502。本***的后端云服务器，接收到播放盒终端上传的GPS数据后，会根据GPS数据的上传时间以及上传播放盒终端为每条GPS数据建立索引，生成索引表，索引表是使用sql语句搭建，因此可通过sql语句实现增删查改等操作，后续前端浏览器根据用户的热力图获取指令获取相关数据时可以很快查询到对应的数据，并且云服务器还将查询到的与热力图获取指令对应的第二GPS数据进行分组，并对每组数据进行整合，将其整合为一条播放盒终端GPS数据后再发送给前端浏览器，前端浏览器可直接利用播放盒终端GPS数据生成目标热力图视图信息，在减少了数据传输量，提高云服务器与前端浏览器之间的传输速度的同时，减少前端浏览器的工作量，提高前端浏览器生成播放盒终端热力图快照的生成速度。

前端浏览器502，与后端云服务器503连接，用于接收用户的热力图获取指令，根据热力图获取指令从云服务器中获取与热力图获取指令相对应的播放盒终端GPS数据，热力图获取指令包括用户确定的时间范围以及一个或多个播放盒终端，播放盒终端GPS数据包括播放盒终端位置信息以及播放盒终端在同一个位置上出现的次数；根据播放盒终端GPS数据控制前端调用的地图软件生成目标热力图视图信息；将目标热力图视图信息作为DOM节点绘制到前端中的canvas画布后，生成并导出图片形式的目标播放盒终端热力图快照，将导出的图片形式的目标播放盒终端热力图快照显示在前端显示页面上。

本发明提供的播放盒终端热力图快照生成方法及***，在前端浏览器中，将地图软件的中生成的目标热力图视图信息通过canvas画布自动生成图片形式的目标播放盒终端热力图快照，无需用户手动截取，方便快捷。并且通过canvas画布html2canvas接口中的useCORS配置项，设置所述canvas画布允许载入符合CORS规范的图片资源，以实现图片跨域。本发明还通过配置canvas画布大小，进一步提高清晰度，令导出的目标播放盒终端热力图快照更清晰，便于用户后续的分析处理工作。

本发明说明书中使用的术语和措辞仅仅为了举例说明，并不意味构成限定。本文中在本发明的权利要求书、说明书中所使用的“第一”、“第二”只是为了便于区分的目的，没有特殊含义，不是旨在于限制本发明。本领域技术人员应当理解，在不脱离所公开的实施方式的基本原理的前提下，对上述实施方式中的各细节可进行各种变化。因此，本发明的范围只由权利要求确定，在权利要求中，除非另有说明，所有的术语应按最宽泛合理的意思进行理解。

Claims (10)

1.一种播放盒终端热力图快照生成方法，其特征在于，应用在前端浏览器，包括：

接收用户的热力图获取指令，根据所述热力图获取指令从云服务器中获取与所述热力图获取指令相对应的播放盒终端GPS数据，所述热力图获取指令包括用户设定的时间范围以及一个或多个播放盒终端，所述播放盒终端GPS数据包括播放盒终端位置信息以及所述播放盒终端在同一个位置上出现的次数；

根据所述播放盒终端GPS数据控制前端调用的地图软件生成目标热力图视图信息；

将所述目标热力图视图信息作为DOM节点绘制到前端中的canvas画布后，生成并导出图片形式的目标播放盒终端热力图快照；

将导出的图片形式的目标播放盒终端热力图快照显示在前端的显示页面上。

2.根据权利要求1所述的播放盒终端热力图快照生成方法，其特征在于，所述将所述目标热力图视图信息作为DOM节点绘制到前端中的canvas画布，生成并导出图片形式的目标播放盒终端热力图快照，包括：

通过所述canvas画布的第一API接口将所述目标热力图视图信息作为DOM节点绘制到前端中的canvas画布，生成图片形式的目标播放盒终端热力图快照；

并且通过所述canvas画布的第二API接口从所述canvas画布中导出图片形式的目标播放盒终端热力图快照。

3.根据权利要求2所述的播放盒终端热力图快照生成方法，其特征在于，所述第一API接口包括html2canvas接口，所述第二API接口包括格式转换接口以及存在指定格式保存接口，其中格式转换接口包括convertToPNG接口、convertToJPEG接口、convertToGIF接口以及convertToBMP接口，存在指定格式保存接口为saveAsPNG接口、saveAsJPEG接口、saveAsGIF接口和saveAsBMP接口。

4.根据权利要求1所述的播放盒终端热力图快照生成方法，其特征在于，所述方法还包括：通过与canvas画布关联的html2canvas接口中的useCORS配置项，设置所述canvas画布允许载入符合跨域资源共享规范的图片资源，所述图片资源为目标热力图视图信息。

5.根据权利要求1所述的播放盒终端热力图快照生成方法，其特征在于，所述方法还包括：

在将所述目标热力图视图信息作为DOM节点绘制到前端中的canvas画布之前，将目标热力图视图信息转化为二进制格式保存在本地；

所述将所述目标热力图视图信息作为DOM节点绘制到前端中的canvas画布包括：

将二进制格式的目标热力图视图信息作为DOM节点绘制到前端中的canvas画布。

6.根据权利要求1所述的播放盒终端热力图快照生成方法，其特征在于，在将所述目标热力图视图信息作为DOM节点绘制到前端中的canvas画布之前，所述方法还包括：

根据设备上物理像素和逻辑像素的比例确定放大倍数，根据所述放大倍数对所述canvas画布进行放大；

对所述canvas画布进行放大后，使用css将放大后的所述canvas画布缩小，其中，缩小倍数与所述放大倍数相等。

7.根据权利要求1所述的播放盒终端热力图快照生成方法，其特征在于，所述方法还包括：

在将所述目标热力图视图信息作为DOM节点绘制到前端中的canvas画布之前，设置与所述目标热力图视图信息关联的元素样式的格式为预设统一格式。

8.根据权利要求1所述的播放盒终端热力图快照生成方法，其特征在于，所述方法还包括：

在将导出的图片形式的目标播放盒终端热力图快照展示在前端浏览器显示页面上时，采用img标签展示所述目标播放盒终端热力图快照。

9.根据权利要求1所述的播放盒终端热力图快照生成方法，其特征在于，所述方法还包括：

将导出的图片形式的目标播放盒终端热力图快照上传至云服务器进行存储。

10.一种播放盒终端热力图快照生成***，其特征在于，所述***包括多个播放盒终端、前端浏览器以及后端云服务器，其中：

所述播放盒终端，设置在车辆上，并与所述后端云服务器连接，用于控制车辆上的LED显示屏，并实时采集所在位置的GPS数据作为第一GPS数据，将所述第一GPS数据上传至所述后端云服务器；

所述后端云服务器，分别与所述播放盒终端以及后端云服务器连接，用于接收所述播放盒终端上传的第一GPS数据，并对所述第一GPS数据进行精度截取处理，将所述第一GPS数据截取至预设精度后存储至热力图计数表中，并根据所述第一GPS数据对应的上传时间及上传播放盒终端，为所述热力图计数表中的每条第一GPS数据建立索引，生成热力图搜索索引表；在接收到热力图获取指令后，根据所述热力图获取指令，从所述热力图搜索索引表中获取与所述热力图获取指令对应的索引，根据所述索引在所述热力图计数表中进行查询，获得与所述热力图获取指令对应的多条第二GPS数据；对所述第二GPS数据进行分组，将位置信息相同的第二GPS数据作为一组数据组，分别将每组数据组中的第二GPS数据整合为一条播放盒终端GPS数据，所述播放盒终端GPS数据中包括播放盒终端位置信息以及所述播放盒终端在同一个位置上出现的次数，将所述播放盒终端GPS数据发送至所述前端浏览器；

所述前端浏览器，与所述后端云服务器连接，用于接收用户的热力图获取指令，根据所述热力图获取指令从云服务器中获取与所述热力图获取指令相对应的播放盒终端GPS数据，所述热力图获取指令包括用户确定的时间范围以及一个或多个播放盒终端，所述播放盒终端GPS数据包括播放盒终端位置信息以及所述播放盒终端在同一个位置上出现的次数；根据所述播放盒终端GPS数据控制前端调用的地图软件生成目标热力图视图信息；将所述目标热力图视图信息作为DOM节点绘制到前端中的canvas画布后，生成并导出图片形式的目标播放盒终端热力图快照，将导出的图片形式的目标播放盒终端热力图快照显示在前端的显示页面上。

Images