一种基于瓦片图的车位展示方法及其应用与流程

本发明属于智能停车技术领域，更具体地，涉及一种基于瓦片图的车位展示方法及其应用。

背景技术：

目前，车位管理系统主要采用rfid对车辆停车的识别与监控管理，当车辆停车入库时，车位上安装的rfid读写器自动判断车辆停靠信息，将车位信息加上车辆信息通过rf无线发送至系统数据中心，车位读写器可提供电池或者有线供电两种。

然而，随着私家车的普及，停车区域停靠的车辆越来越多，需要一种可以在地图上直观查看车位是否空闲的途径。目前，相关应用app直接在地图上渲染车位图片，由于停车区域范围较大且进出车辆较多，车位状态更新很快，当车位图片过多或车位状态更新过于频繁时，会导致应用设备的卡顿。

技术实现要素：

针对现有技术的至少一个缺陷或改进需求，本发明提供了一种基于瓦片图的车位展示方法及其应用，以解决因车位图片过多或车位状态更新过于频繁而导致的页面加载卡顿的技术问题。

为实现上述目的，按照本发明的一个方面，提供了一种基于瓦片图的车位展示方法，该方法包括：

获取整个待展示区域的地图信息，依据预设的层级参数将待展示区域划分为各个不同层级的瓦片图；

对各个不同层级的瓦片图进行车位标注，并将已标注车位的渲染数据串与对应的瓦片图进行映射关联；

利用映射关联关系获取各个不同层级瓦片图上各个车位的渲染数据串，对各个不同层级的瓦片图进行渲染，并将渲染后的各个不同层级的瓦片图存储于后台服务器；

响应屏幕点击事件以调用后台服务器存储的与目标展示区域对应的渲染后的瓦片图，并显示渲染后的瓦片图。

作为本发明的进一步改进，整个待展示区域的地图信息包括周围建筑、地貌、车位外轮廓及其他需要展示的内容。

作为本发明的进一步改进，预设的层级参数包括层级个数、每个层级的展示面积和每个层级的比例尺。

作为本发明的进一步改进，将已标注车位的渲染数据串与对应的瓦片图进行映射关联包括：

后台数据库建立与单个车位的存储表，存储表用于存储单个车位的对应各个不同层级瓦片图的渲染数据串。

作为本发明的进一步改进，渲染数据串包括：车位编号、瓦片图层级、车辆方向、瓦片图参考点的横向坐标、瓦片图参考点的纵向坐标值、车位中心点在瓦片图中的横向坐标值、车位中心点在瓦片图中的纵向坐标值和车位在瓦片图中的显示大小中的一种或多种。

作为本发明的进一步改进，对各个不同层级的瓦片图进行渲染包括：

将空闲车位用绿色车辆图片显示，将占用车位用红色车辆显示，而对于未获取到车位状态的车位用预设默认图片显示；

依据渲染数据串获取车位图片大小、车位中心点和车位朝向数据，利用该数据进行瓦片图上车位状态的绘制。

作为本发明的进一步改进，该方法还包括：

车位状态存在更新时，更新渲染数据串的存储数据并触发后台服务器再次调用更新车位的渲染数据串，以实现瓦片图的更新。

为实现上述目的，按照本发明的另一个方面，提供了一种基于瓦片图的车位展示系统，该系统包括：

后台服务器，用于获取整个待展示区域的地图信息，依据预设的层级参数将待展示区域划分为各个不同层级的瓦片图，对各个不同层级的瓦片图进行车位标注，并将已标注车位的渲染数据串与对应的瓦片图进行映射关联，利用映射关联关系获取各个不同层级瓦片图上各个车位的渲染数据串，对各个不同层级的瓦片图进行渲染和存储；

前端应用模块，用于点击屏幕以选中目标展示区域，响应屏幕点击事件与后台服务器进行调用交互，以调用后台服务器存储的与目标展示区域对应的渲染后的瓦片图，并显示渲染后的瓦片图。

为实现上述目的，按照本发明的另一个方面，提供了一种计算机可读介质，其存储有可由终端设备执行的计算机程序，当程序在终端设备上运行时，使得终端设备执行上述方法的步骤。

为实现上述目的，按照本发明的另一个方面，提供了一种终端设备，包括至少一个处理单元、以及至少一个存储单元，其中，存储单元存储有计算机程序，当程序被处理单元执行时，使得处理单元执行上述方法的步骤。

总体而言，通过本发明所构思的以上技术方案与现有技术相比，能够取得下列有益效果：

本发明提供的一种基于瓦片图的车位展示方法及其应用，其通过在后台服务器上进行瓦片图的制作与部署，通过将车位信息与不同层级瓦片图映射关联，以获取车位状态信息并绘制到不同层级的瓦片图上，前端直接调用后台服务器已渲染的瓦片图，从而在地图上渲染车位时，避免车位数目过多导致的页面加载卡顿问题，同时由于不同层级下瓦片图上车位的位置更加精确，通过直观获取到车位的朝向，使用户可以在地图上直观查看车位是否空闲可用，同时可使车位朝向更为直观显示，方便了园区用户或是访客停车。

附图说明

图1是本发明实施例提供的一种基于瓦片图的车位展示方法的示意图；

图2是本发明实施例提供的渲染数据串的示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。此外，下面所描述的本发明各个实施方式中所涉及到的技术特征只要彼此之间未构成冲突就可以相互组合。

下面结合实施例和附图对本发明提供的自动化房屋信息显示方法及系统的工作原理进行详细说明。

本发明所涉及的技术术语解释如下：

瓦片图：瓦片地图金字塔模型是一种多分辨率层次模型，从瓦片金字塔的底层到顶层，分辨率越来越低，但表示的地理范围不变。首先确定地图服务平台所要提供的缩放级别的数量n，把缩放级别最高、地图比例尺最大的地图图片作为金字塔的底层，即第0层，并对其进行分块，从地图图片的左上角开始，从左至右、从上到下进行切割，分割成相同大小(比如256x256像素)的正方形地图瓦片，形成第0层瓦片矩阵，在第0层地图图片的基础上，按每像素分割为2×2个像素的方法生成第1层地图图片，并对其进行分块，分割成与下一层相同大小的正方形地图瓦片，形成第1层瓦片矩阵，采用同样的方法生成第2层瓦片矩阵，…，如此下去，直到第n-1层，构成整个瓦片金字塔。

图1是本发明实施例提供的一种基于瓦片图的车位展示方法的示意图。如图1所示，一种基于瓦片图的车位展示方法，其包括如下步骤：

获取整个待展示区域的地图信息，依据预设的层级参数将待展示区域划分为各个不同层级的瓦片图；

具体地，依据获取的整个待展示区域的地图信息，按照一定比例绘制一张超大ui图以表征整个待展示区域，例如，分辨率可以选取为20000*15385，其包括整个待展示区域的周围建筑，地貌，车位外轮廓及其他需要展示的内容，可以自定义地图风格，使用切图工具将整个图片切至不同层级，其中，每个层级的展示的实际面积不同，即每个层级的瓦片图对应的比例尺不同，可依据展示需求设置对应的层级，预设的层级参数包括层级个数、每个层级的展示面积、每个层级的比例尺等，如可以选择18-21级，每个层级图片大小均为256px*256px，格式为png，当然，以上层级的个数、图片大小以及格式都可以依据展示需求进行调整；优选的，将切好的各个不同层级的瓦片图复制一份放到后台tiles_bak目录下，用做备份；再将另一份放置于在后台webcontent目录下的tiles目录，这样所设置的瓦片图请求路径为ip+/s/tiles/{z}/{x}/{y}.png，从而用以响应前端的瓦片图请求需求，其中，ip为服务器部署瓦片图目录。

对各个不同层级的瓦片图进行车位标注，并将已标注车位的渲染数据串与对应的瓦片图进行映射关联；具体包括：在后台数据库中以一个车位为单位新建一张表，该表用于存储单个车位的对应各个不同层级瓦片图的渲染数据串，由于一个车位在各层级瓦片图的显示位置以及各个层级的比例尺不同，则对应不同层级下该车位的渲染数据必然存在不同。图2是本发明实施例提供的渲染数据串的示意图。如图2所示，作为一个示例，渲染数据串包括以下字段：parking_num(车位编号)，level(瓦片图层级)，direction(车辆方向)，folder(即请求路径中的x，也可以称作瓦片图参考点的横向坐标值)，file(即请求路径中的y，也可以称作瓦片图参考点的纵向坐标值)，pixel_x(车位中心点在瓦片图中的横向坐标值，如可以计算该中心点与瓦片图左边的距离值，单位px)，pixel_y(车位中心点在瓦片图中的纵向坐标值，如可以计算该中心点与瓦片图顶边的距离值，单位px)，size(车位在瓦片图中的显示大小)。通过渲染数据串，并将其与瓦片图映射，由于每个瓦片图的比例尺不同，从而在后续进行瓦片图调用时，可以获取到对应层级下的染数据串，有助于在瓦片图上更加精确地绘制出车位状态。

利用所述映射关联关系获取各个不同层级瓦片图上各个车位的渲染数据串，对各个不同层级的瓦片图进行渲染，并将渲染后的各个不同层级的瓦片图存储于后台服务器；

具体包括：通过该映射关联关系，可以在数据库中索引出与瓦片图对应的车位的染数据串，从而获取该瓦片图下的所有车位状态信息，例如可以通过遍历映射关联关系中的所有关联车位的索引标志进行索引，从而调用到对应的具体信息。在瓦片图的渲染过程中，可以将空闲车位用绿色车辆图片显示，将占用车位用红色车辆显示，而对于未获取到车位状态的车位(如存在故障)用预设默认图片显示。作为一个示例，利用车位编号在数据库查询车位信息，获取tiles目录下对应18-21级的瓦片图，再根据车位中心的坐标、设置的车位图片大小、车辆的朝向在不同层级下的瓦片图中绘制车辆，获取车位状态信息并绘制到不同层级的瓦片图上，同样的在其他表获取到所有车位信息，遍历车位信息，可获取到每个车位的车位编号及其车位状态，在tiles_info表中查询包含此车位的瓦片图，再通过车位图片大小、车位中心点、车位朝向、车位状态精确地在瓦片图上绘制出车位状态，由此可精确直观展示出车位朝向及状态信息。

点击屏幕以选中目标展示区域，响应屏幕点击事件以调用后台服务器存储的与目标展示区域对应的渲染后的瓦片图，在屏幕上显示对应的渲染后的瓦片图。

作为一个示例，前端代码采用leaflet调用瓦片图，请求路径为ip+/s/tiles/{z}/{x}/{y}.png。

如l.tilelayer(util.getbaseurl()+"s/tiles/{z}/{x}/{y}.png",{

minzoom:18,

maxzoom:22

}).addto(map)；

通过上述方式，通过点击屏幕来选中目标展示区域，通过获取点击位置数据来判断出对应的瓦片图。

作为一个优选的方案，该方法还包括：车位状态存在更新时，更新渲染数据串的存储数据并触发后台服务器再次调用更新车位的渲染数据串，从而实现瓦片图的更新。通过调用更新车位的渲染数据串，在瓦片图上对应更新车位的相同位置上重绘车辆图片以覆盖原来的图片，以此达到地图上瓦片图车位状态更新的目的，这样响应前端点击事件再调用的瓦片图上车位状态已是最新的状态。

一种基于瓦片图的车位展示系统，其包括：

后台服务器，用于获取整个待展示区域的地图信息，依据预设的层级参数将待展示区域划分为各个不同层级的瓦片图，对各个不同层级的瓦片图进行车位标注，并将已标注车位的渲染数据串与对应的瓦片图进行映射关联，利用所述映射关联关系获取各个不同层级瓦片图上各个车位的渲染数据串，对各个不同层级的瓦片图进行渲染和存储；

前端应用模块，用于点击屏幕以选中目标展示区域，响应屏幕点击事件与后台服务器进行调用交互，以调用后台服务器存储的与目标展示区域对应的渲染后的瓦片图，在屏幕上显示对应的渲染后的瓦片图。

该系统的实现原理、技术效果与上述方法类似，此处不再赘述。

一种计算机可读介质，其存储有可由终端设备执行的计算机程序，当程序在终端设备上运行时，使得终端设备执行上述方法的步骤。

一种终端设备，包括至少一个处理单元、以及至少一个存储单元，其中，存储单元存储有计算机程序，当程序被处理单元执行时，使得处理单元执行上述方法的步骤。

本领域的技术人员容易理解，以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。