CN110047371B - 一种矢量电子地图的渲染方法及装置 - Google Patents

Abstract

本申请公开了一种矢量电子地图的渲染方法及装置，该方法包括：对不同矢量图层的数据请求按照数据源进行合并，根据所述数据源的数量向服务器发送瓦片数据请求；接收来自服务器的瓦片数据；根据所述瓦片数据渲染矢量电子地图。本申请能够取得的有益效果在于，提升了矢量电子地图的渲染效率；避免和减少了瓦片接边处渲染不完整的问题；能更容易的解决渲染压盖问题。

Description

一种矢量电子地图的渲染方法及装置

技术领域

本申请涉及电子地图领域，尤其是涉及一种矢量电子地图的渲染方法及装置。

背景技术

矢量地图瓦片是一种新颖的模式。地图数据会以json等格式分块地传输到浏览器端，在浏览器端利用前端框架将地图显示出来。现在越来越多的电子地图用到瓦片技术。常用的电子地图Javascript库，如OpenLayers，Leaflet等，通常采用瓦片图层渲染的方式对矢量数据进行渲染。瓦片图层是将一个图层划分为多个固定大小的瓦片，每个瓦片是一个完整的渲染单元，并且由于每个瓦片是独立绘制，一个瓦片拥有一个小画布(HtmlCanvas)，当有矢量数据的渲染结果超出所在瓦片的画布，超出部分不会显示，导致瓦片接边处不能完整绘制。现代浏览器对于同数据源的并发请求数都有限制，例如Chrome的限制为6个，因此如果用Chrome浏览器加载该地图，如果所有的请求都发向同一域名，则在打开地图/缩放地图进行渲染的时候，每次只会有6个请求会直接执行，其他请求会等待。当然，采用多域名的方案进行请求分流，可很大程度上减少等待的请求数量，但是对于复杂的地图应用，加载大量图层时，依然不可避免的出现数据请求等待。现有技术中，对矢量电子地图进行渲染还存在渲染压盖问题。本申请解决了数据请求过多、瓦片接边处的数据渲染不完整和渲染压盖问题。

发明内容

本申请实施例提供一种矢量电子地图的渲染方法及装置。解决了数据请求过多、瓦片接边处的数据渲染不完整和渲染压盖问题。

本申请提供了一种矢量电子地图的渲染方法，该方法包括：

对不同矢量图层的数据请求按照数据源进行合并，根据所述数据源的数量向服务器发送瓦片数据请求；

接收来自服务器的瓦片数据；

根据所述瓦片数据渲染矢量电子地图。

本申请还提供了一种矢量电子地图的渲染装置，该装置包括：发送单元、接收单元和渲染单元；

所述发送单元，用于对不同矢量图层的数据请求按照数据源进行合并，根据所述数据源的数量向服务器发送瓦片数据请求；

所述接收单元，用于接收来自服务器的瓦片数据；

所述渲染单元，用于根据所述瓦片数据渲染矢量电子地图。

与现有技术相比，本申请能够取得的有益效果在于，同一数据源的不同类型数据请求可以合并，可有效减少数据请求量；采用一张画布绘制瓦片数据，避免了多瓦片绘制的接边问题；在一张画布上绘制瓦片数据，能更容易的解决渲染压盖问题。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请提供的一种矢量电子地图的渲染方法实施例的流程示意图；

图2为本申请提供的一种矢量电子地图的渲染装置实施例的结构示意图。

具体实施方式

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

图1为本申请提供的一种矢量电子地图的渲染方法实施例的流程示意图，该流程示意图包括：

步骤105，对不同矢量图层的数据请求按照数据源进行合并，根据所述数据源的数量向服务器发送瓦片数据请求；

矢量地图瓦片得到了广泛的研究和应用。在实际使用矢量电子地图的过程中，将电子地图划分成相同的大小的瓦片，对不同矢量图层的数据请求按照数据源(数据请求接口)进行合并，数据以瓦片为单位进行并行请求和暂存，根据数据源的数量向服务器发送瓦片数据请求，这样即使图层不断增多，只要图层的数据源不增加，数据请求数就不会增加，达到减少数据请求数的目的。

如需要在浏览器界面显示一张地图，该地图需要加载4个图层，分别渲染城市道路、铁路、交通信号灯点位和停车场功能面数据，其中道路和铁路图层的数据来源接口相同，为数据源S1；交通信号灯和停车场数据来自不同的数据源，分别为数据源S2和数据源S3。

为了实现本申请的技术方案，在根据数据源的数量向服务器发送瓦片数据请求之前，还需要进行以下步骤：配置数据源，按照程序规定的数据源配置格式编写数据源配置文件，分别配置为数据源S1，数据源S2和数据源S3；配置图层，按照程序规定的图层配置格式编写图层配置文件，分别配置4个图层，城市道路为L1，铁路为L2，交通信号灯点位为L3和停车场为L4，其中L1和L2使用S1数据源，L3和L4分别使用S2、S3数据源；初始化地图，使用程序提供的接口函数，在浏览器界面中初始化地图对象，并加载数据源和图层配置。

根据数据源的数量向服务器发送瓦片数据请求主要包含了以下几个过程：合并数据请求，将数据源和数据类型组装为请求数据的url地址，在组装的过程中将数据源相同请求类型不同的合并为一个url地址，如本例中，会将城市道路L1和铁路L2的请求合并，最终生成3个url地址；拆分数据请求，根据地图当前显示的地理范围和配置的瓦片大小，计算出需要加载的瓦片个数和瓦片的定位坐标，计算瓦片数量的方法如下，显示器的分辨率为1366*768，瓦片规格为256*256，瓦片数量为1366/256*768/256个；计算一个点所在的瓦片的定位坐标的方法如下：假设点的像素坐标为(px，py)，瓦片的宽高为(tw，th)，则所在的瓦片定位坐标计算如下：x＝ceil(px/tw)，y＝ceil(py/th)，使用上述公式分别计算出地图左上角和右下角的瓦片定位坐标后，就可以计算出地图当前显示范围包含的所有瓦片定位坐标，然后将所有瓦片的定位坐标分别拼接到最终生成的3个url地址中，拆分出瓦片数据请求url。假设本例中，地图需要显示n个瓦片，则会拆分出3n个url；并发请求数据，根据所述瓦片的定位坐标以及缩放等级调用ajax请求接口，并行向服务器发起3n各瓦片数据请求以获取所述瓦片的定位坐标对应的不同数据源的瓦片数据；暂存数据，当一个瓦片的3个数据请求都返回数据后，会将返回的数据分类存储在瓦片对象中，以便渲染时使用。

可选地，针对每个数据源发送一个瓦片数据请求。如针对数据源S1、S2和S3分别发送一个瓦片数据请求。

步骤110，接收来自服务器的瓦片数据；

从服务器接收来自数据源S1、S2和S3的瓦片数据。

进一步地，将接收的来自服务器的瓦片数据存储在瓦片对象中。

步骤115，根据所述瓦片数据渲染矢量电子地图；

构造新的矢量图层，一个矢量图层是一个渲染单元，拥有独立的一张画布，因此多个图层之间是并行绘制，一个图层内不同瓦片数据串行绘制。当一个瓦片的数据请求暂存后，会立即启动所有图层的渲染。根据瓦片数据在画布中进行绘制，即使绘制的内容超出了瓦片范围，只要不超出画布范围，就可以将瓦片数据完整绘制出来。

可选地，获取瓦片对象中的瓦片数据，包括L1、L2、L3和L4四个矢量图层的瓦片数据。

可选地，将获取到的所述瓦片对象中的瓦片数据的坐标转换为同一个画布中的坐标；进一步地，由于瓦片请求到的矢量数据通常是经纬度坐标/瓦片相对坐标，要在图层的画布中进行绘制，就需要先转换为画布坐标，即Canvas坐标。Canvas坐标Cp的转换公式如下：

Cp＝project(Dp，zoom)–Lp，其中，Lp：地图当前显示范围左上角的像素坐标，Dp：矢量数据一个点的经纬度坐标，project：经纬度坐标转像素坐标的函数，zoom：地图缩放级别。

在本实施例中，可以在服务端增加一些处理，将经纬度坐标转换为像素坐标。这样瓦片请求到的瓦片数据就直接是像素坐标，减少了在客户端进行复杂的经纬度转像素的计算，能较明显的提高渲染效率。

进一步地，坐标转换之后，调用Canvas的绘制接口，根据预先定义的绘制规则，将点、线、面等矢量数据绘制在同一个画布中，以渲染矢量电子地图。由于是在整张画布上绘制，不会出现接边问题，因此从根本上解决了瓦片独立绘制的接边问题。

进一步地，利用空间索引对文字和图标进行压盖调整，以解决渲染压盖问题。

与现有技术相比，本实施例能够取得的有益效果在于，同一数据源的不同类型数据请求可以合并，可有效减少数据请求量；采用一张画布绘制瓦片数据，避免了多瓦片绘制的接边问题；在一张画布上绘制瓦片数据，能更容易的解决渲染压盖问题。

图2为本申请提供的一种矢量电子地图的渲染装置实施例的结构示意图，该结构示意图包括：发送单元205、接收单元210和渲染单元215；

发送单元205，用于对不同矢量图层的数据请求按照数据源进行合并，根据所述数据源的数量向服务器发送瓦片数据请求；

在实际使用矢量电子地图的过程中，将电子地图划分成相同的大小的瓦片，对不同矢量图层的数据请求按照数据源(数据请求接口)进行合并，数据以瓦片为单位进行并行请求和暂存。发送单元205根据数据源的数量向服务器发送瓦片数据请求，这样即使图层不断增多，只要图层的数据源不增加，数据请求数就不会增加，达到减少数据请求数的目的。

发送单元205根据当前显示的地理范围以及瓦片规格计算出瓦片的数量和瓦片的定位坐标，计算瓦片数量的方法如下，显示器的分辨率为1366*768，瓦片规格为256*256，瓦片数量为1366/256*768/256个；计算一个点所在的瓦片的定位坐标的方法如下：假设点的像素坐标为(px，py)，瓦片的宽高为(tw，th)，则所在的瓦片定位坐标计算如下：x＝ceil(px/tw)，y＝ceil(py/th)，使用上述公式分别计算出地图左上角和右下角的瓦片定位坐标后，就可以计算出地图当前显示范围包含的所有瓦片定位坐标，然后将所有瓦片的定位坐标分别拼接到最终生成的3个url地址中，拆分出瓦片数据请求url。假设本例中，地图需要显示n个瓦片，则会拆分出3n个url；并发请求数据，根据所述瓦片的定位坐标以及缩放等级调用ajax请求接口，发送单元205并行向服务器发起3n各瓦片数据请求以获取所述瓦片的定位坐标对应的不同数据源的瓦片数据。

可选地，发送单元205还用于针对数据源S1、S2和S3分别发送一个瓦片数据请求。

接收单元210，用于接收来自服务器的瓦片数据；

可选地，接收单元210接收到所述瓦片的定位坐标对应的不同数据源的瓦片数据后，将瓦片数据存储在瓦片对象中，以便渲染时使用。

渲染单元215，用于根据所述瓦片数据渲染矢量电子地图。

新构造的矢量图层拥有独立的一张画布，每个图层是一个渲染单元，因此多个图层之间是并行绘制，一个图层内不同瓦片数据串行绘制。当一个瓦片的数据请求暂存后，会立即启动所有图层的渲染。根据瓦片数据在画布中进行绘制，即使绘制的内容超出了瓦片范围，只要不超出画布范围，就可以将瓦片数据完整绘制出来。

可选地，渲染单元215获取瓦片对象中的瓦片数据，包括L1、L2、L3和L4四个矢量图层的瓦片数据；将接收到的所述瓦片对象中的瓦片数据的经纬度坐标/瓦片相对坐标通过渲染单元215转换为同一个画布中的坐标，即Canvas坐标，Canvas坐标Cp的转换公式如下：

Cp＝project(Dp，zoom)–Lp，其中，Lp：地图当前显示范围左上角的像素坐标，Dp：矢量数据一个点的经纬度坐标，project：经纬度坐标转像素坐标的函数，zoom：地图缩放级别；坐标转换之后，调用Canvas的绘制接口，矢量图层根据预先定义的绘制规则，将点、线、面等瓦片数据在同一个画布中绘制出来，以通过渲染单元215渲染矢量电子地图。由于是在整张画布上绘制，不会出现接边问题，因此从根本上解决了瓦片独立绘制的接边问题。

可选地，该装置还包括转换单元，用于服务器将瓦片数据的经纬度坐标转换为像素坐标，这样瓦片请求到的瓦片数据就直接是像素坐标，减少了在客户端进行复杂的经纬度转像素的计算，能较明显的提高渲染效率。

进一步地，利用空间索引对文字和图标进行压盖调整，以解决渲染压盖问题。

与现有技术相比，本实施例能够取得的有益效果在于，同一数据源的不同类型数据请求可以合并，可有效减少数据请求量；采用一张画布绘制瓦片数据，避免了多瓦片绘制的接边问题；在一张画布上绘制瓦片数据，能更容易的解决渲染压盖问题。

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

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (8)

1.一种矢量电子地图的渲染方法，其特征在于，该方法包括：

对不同矢量图层的数据请求按照数据源进行合并，根据所述数据源的数量向服务器发送瓦片数据请求，所述数据源为数据请求接口；针对每个数据源发送一个瓦片数据请求；

接收来自服务器的瓦片数据；

根据所述瓦片数据渲染矢量电子地图。

2.根据权利要求1所述的矢量电子地图的渲染方法，其特征在于，所述根据所述数据源的数量向服务器发送瓦片数据请求包括：

根据当前显示的地理范围以及瓦片规格计算瓦片数量和瓦片的定位坐标；

根据所述瓦片的定位坐标以及缩放等级向所述服务器发送瓦片数据请求以获取所述瓦片的定位坐标对应的不同数据源的瓦片数据。

3.根据权利要求1所述的矢量电子地图的渲染方法，其特征在于，所述根据所述瓦片数据渲染矢量电子地图包括：

获取瓦片对象中的瓦片数据；

将每个矢量图层作为一个渲染单元，所述矢量图层根据所述瓦片数据在同一个画布中绘制瓦片，以渲染矢量电子地图。

4.根据权利要求1所述的矢量电子地图的渲染方法，其特征在于，所述接收来自服务器的瓦片数据之前，所述方法还包括：

服务器将瓦片数据的经纬度坐标转换为像素坐标。

5.一种矢量电子地图的渲染装置，其特征在于，该装置包括：发送单元、接收单元和渲染单元；

所述发送单元，用于对不同矢量图层的数据请求按照数据源进行合并，根据所述数据源的数量向服务器发送瓦片数据请求，所述数据源为数据请求接口；针对每个数据源发送一个瓦片数据请求

所述接收单元，用于接收来自服务器的瓦片数据；

所述渲染单元，用于根据所述瓦片数据渲染矢量电子地图。

6.根据权利要求5所述的矢量电子地图的渲染装置，其特征在于，所述发送单元，还用于根据当前显示的地理范围以及瓦片规格计算瓦片数量和瓦片的定位坐标；还用于根据所述瓦片的定位坐标以及缩放等级向所述服务器发送瓦片数据请求以获取所述瓦片的定位坐标对应的不同数据源的瓦片数据。

7.根据权利要求5所述的矢量电子地图的渲染装置，其特征在于，所述渲染单元，还用于获取瓦片对象中的瓦片数据；还用于将每个矢量图层作为一个渲染单元，所述矢量图层根据所述瓦片数据在同一个画布中绘制瓦片，以渲染矢量电子地图。

8.根据权利要求5所述的矢量电子地图的渲染装置，其特征在于，转换单元，用于服务器将瓦片数据的经纬度坐标转换为像素坐标。

Images