栅格图片的绘制方法及装置制造方法
【专利摘要】本发明提供一种栅格图片的绘制方法及装置。一方面，本发明实施例通过向服务器发送绘制请求消息，所述绘制请求消息中包含栅格图片的标识信息，以使得所述服务器根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对应的矢量数据，进而接收所述服务器发送的所述矢量数据，以及根据所述矢量数据，获得与所述矢量数据对应的绘制特征信息，使得能够利用所述绘制特征信息，绘制栅格图片，由于客户端请求获取的是栅格图片的矢量数据，而不再是栅格图片的栅格数据，因此，能够避免现有技术中由于栅格数据的数据量很大而导致的客户端请求获取该栅格数据的时间较长的问题，从而提高了栅格图片绘制的效率。
【专利说明】栅格图片的绘制方法及装置 【【技术领域】】
[0001] 本发明涉及矢量绘制技术，尤其涉及栅格图片的绘制方法及装置。 【【背景技术】】
[0002] 随着通信技术的发展，终端集成了越来越多的功能，从而使得终端的系统功能列 表中包含了越来越多相应的应用程序。有些应用程序中会调用矢量绘制应用，通过该应用， 客户端可以向使用者展示绘制的矢量，例如，地图。现有的矢量绘制应用中，服务器预先绘 制好栅格图片，客户端向服务器请求栅格图片的栅格数据，然后由所述客户端将所请求的 栅格数据显示为可视化的栅格图片。
[0003] 然而，由于栅格数据的数据量很大，因此，会使得客户端请求获取该栅格数据的时 间较长，从而导致了栅格图片绘制的效率的降低。 【
【发明内容】
】
[0004] 本发明的多个方面提供栅格图片的绘制方法及装置，用以提高栅格图片绘制的效 率。
[0005] 本发明的一方面，提供一种栅格图片的绘制方法，包括：
[0006] 向服务器发送绘制请求消息，所述绘制请求消息中包含栅格图片的标识信息，以 使得所述服务器根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对应的矢 量数据；
[0007] 接收所述服务器发送的所述矢量数据；
[0008] 根据所述矢量数据，获得与所述矢量数据对应的绘制特征信息；
[0009] 利用所述绘制特征信息，绘制栅格图片。
[0010] 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述向服务 器发送绘制请求消息，包括：
[0011] 向服务器发送基于HTTP的所述绘制请求消息。
[0012] 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述向服务 器发送基于HTTP的所述绘制请求消息，包括：
[0013] 向服务器发送AJAX或JS0NP的所述绘制请求消息。
[0014] 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述绘制特 征信息包括下列中的至少一项：
[0015] 地面元素的类型信息；
[0016] 地面元素的图标信息；
[0017] 地面元素的样式信息；
[0018] 地面元素的地理位置信息；
[0019] 地面元素的注记；以及 [0020] 地面元素的偏移量。
[0021] 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述利用所 述绘制特征信息，绘制栅格图片，包括：
[0022] 创建 Canvas 元素；
[0023] 利用所述绘制特征信息，在所述Canvas元素中，绘制所述栅格图片。
[0024] 本发明的另一方面，提供另一种栅格图片的绘制方法，包括：
[0025] 接收客户端发送的绘制请求消息，所述绘制请求消息中包含栅格图片的标识信 息；
[0026] 根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对应的矢量数 据；
[0027] 向所述客户端发送所述矢量数据，以使得所述客户端根据所述矢量数据，获得与 所述矢量数据对应的绘制特征信息，以及利用所述绘制特征信息，绘制栅格图片。
[0028] 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述接收客 户端发送的绘制请求消息，包括：
[0029] 接收客户端发送的基于HTTP的所述绘制请求消息。
[0030] 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述接收客 户端发送的基于HTTP的所述绘制请求消息，包括：
[0031] 接收客户端发送的AJAX或JS0NP的所述绘制请求消息。
[0032] 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述绘制特 征信息包括下列中的至少一项：
[0033] 地面元素的类型信息；
[0034] 地面元素的图标信息；
[0035] 地面元素的样式信息；
[0036] 地面元素的地理位置信息；
[0037] 地面元素的注记；以及
[0038] 地面元素的偏移量。
[0039] 本发明的另一方面，提供一种栅格图片的绘制装置，包括：
[0040] 发送单元，用于向服务器发送绘制请求消息，所述绘制请求消息中包含栅格图片 的标识信息，以使得所述服务器根据所述栅格图片的标识信息，获得与所述栅格图片的标 识信息对应的矢量数据；
[0041] 接收单元，用于接收所述服务器发送的所述矢量数据；
[0042] 获得单元，用于根据所述矢量数据，获得与所述矢量数据对应的绘制特征信息；
[0043] 绘制单元，用于利用所述绘制特征信息，绘制栅格图片。
[0044] 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述发送单 元，具体用于
[0045] 向服务器发送基于HTTP的所述绘制请求消息。
[0046] 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述发送单 元，具体用于
[0047] 向服务器发送AJAX或JS0NP的所述绘制请求消息。
[0048] 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述绘制特 征信息包括下列中的至少一项：
[0049] 地面元素的类型信息；
[0050] 地面元素的图标信息；
[0051] 地面元素的样式信息；
[0052] 地面元素的地理位置信息；
[0053] 地面元素的注记；以及
[0054] 地面元素的偏移量。
[0055] 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述绘制单 元，具体用于
[0056] 创建Canvas元素；以及利用所述绘制特征信息，在所述Canvas元素中，绘制所述 栅格图片。
[0057] 本发明的另一方面，提供另一种栅格图片的绘制装置，包括：
[0058] 接收单元，用于接收客户端发送的绘制请求消息，所述绘制请求消息中包含栅格 图片的标识信息；
[0059] 获得单元，用于根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息 对应的矢量数据；
[0060] 发送单元，用于向所述客户端发送所述矢量数据，以使得所述客户端根据所述矢 量数据，获得与所述矢量数据对应的绘制特征信息，以及利用所述绘制特征信息，绘制栅格 图片。
[0061] 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述接收单 元，具体用于
[0062] 接收客户端发送的基于HTTP的所述绘制请求消息。
[0063] 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述接收单 元，具体用于
[0064] 接收客户端发送的AJAX或JS0NP的所述绘制请求消息。
[0065] 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述绘制特 征信息包括下列中的至少一项：
[0066] 地面元素的类型信息；
[0067] 地面元素的图标信息；
[0068] 地面元素的样式信息；
[0069] 地面元素的地理位置信息；
[0070] 地面元素的注记；以及
[0071] 地面兀素的偏移量。
[0072] 由上述技术方案可知，一方面，本发明实施例通过向服务器发送绘制请求消息，所 述绘制请求消息中包含栅格图片的标识信息，以使得所述服务器根据所述栅格图片的标识 信息，获得与所述栅格图片的标识信息对应的矢量数据，进而接收所述服务器发送的所述 矢量数据，以及根据所述矢量数据，获得与所述矢量数据对应的绘制特征信息，使得能够利 用所述绘制特征信息，绘制栅格图片，由于客户端请求获取的是栅格图片的矢量数据，而不 再是栅格图片的栅格数据，因此，能够避免现有技术中由于栅格数据的数据量很大而导致 的客户端请求获取该栅格数据的时间较长的问题，从而提高了栅格图片绘制的效率。
[0073] 由上述技术方案可知，另一方面，本发明实施例通过接收客户端发送的绘制请求 消息，所述绘制请求消息中包含栅格图片的标识信息，进而根据所述栅格图片的标识信息， 获得与所述栅格图片的标识信息对应的矢量数据，使得能够向所述客户端发送所述矢量数 据，以使得所述客户端根据所述矢量数据，获得与所述矢量数据对应的绘制特征信息，以及 利用所述绘制特征信息，绘制栅格图片，由于客户端请求获取的是栅格图片的矢量数据，而 不再是栅格图片的栅格数据，因此，能够避免现有技术中由于栅格数据的数据量很大而导 致的客户端请求获取该栅格数据的时间较长的问题，从而提高了栅格图片绘制的效率。 【【专利附图】
【附图说明】】
[0074] 为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述 中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实 施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附 图获得其他的附图。
[0075] 图1为本发明一实施例提供的一种栅格图片的绘制方法的流程示意图；
[0076] 图2为本发明另一实施例提供的另一种栅格图片的绘制方法的流程示意图；
[0077] 图3为本发明另一实施例提供的一种栅格图片的绘制装置的结构示意图；
[0078] 图4为本发明另一实施例提供的另一种栅格图片的绘制装置的结构示意图。 【【具体实施方式】】
[0079] 为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例 中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是 本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员 在没有作出创造性劳动前提下所获得的全部其他实施例，都属于本发明保护的范围。
[0080] 本发明的技术方案，可以应用于各种网络，例如，互联网、全球移动通信系统 (Global System for Mobile Communications，GSM)网络、通用分组无线业务（General Packet Radio Service，GPRS)网络、码分多址（Code Division Multiple Access，CDMA) 网络、CDMA2000 网络、宽带码分多址（Wideband Code Division Multiple Access，WCDMA) 网络、长期演进（Long Term Evolution, LTE)网络或全球微波接入互操作性（World Interoperability for Microwave Access，WiMAX)网络等。
[0081] 需要说明的是，本发明实施例中所涉及的终端可以包括但不限于手机、个人数字 助理（Personal Digital Assistant, PDA)、无线手持装置、无线上网本、个人电脑、便携电 脑、个人电脑（Personal Computer, PC)、MP3播放器、MP4播放器等。
[0082] 另外，本文中术语"和/或"，仅仅是一种描述关联对象的关联关系，表示可以存在 三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情 况。另外，本文中字符"/"，一般表示前后关联对象是一种"或"的关系。
[0083] 图1为本发明一实施例提供的一种栅格图片的绘制方法的流程示意图，如图1所 /_J、1 〇
[0084] 101、向服务器发送绘制请求消息，所述绘制请求消息中包含栅格图片的标识信 息，以使得所述服务器根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对 应的矢量数据。
[0085] 102、接收所述服务器发送的所述矢量数据。
[0086] 103、根据所述矢量数据，获得与所述矢量数据对应的绘制特征信息。
[0087] 104、利用所述绘制特征信息，绘制栅格图片。
[0088] 需要说明的是，101?104的执行主体可以是客户端，能够调用绘制装置，例如，画 布（canvas)应用软件，本实施例对此不进行限定。
[0089] 可以理解的是，所述客户端可以是安装在终端上的应用程序，或者还可以是浏览 器的一个网页，只要能够实现绘制功能，以提供矢量绘制的客观存在形式都可以，本实施例 对此不进行限定。
[0090] 这样，通过向服务器发送绘制请求消息，所述绘制请求消息中包含栅格图片的标 识信息，以使得所述服务器根据所述栅格图片的标识信息，获得与所述栅格图片的标识信 息对应的矢量数据，进而接收所述服务器发送的所述矢量数据，以及根据所述矢量数据，获 得与所述矢量数据对应的绘制特征信息，使得能够利用所述绘制特征信息，绘制栅格图片， 由于客户端请求获取的是栅格图片的矢量数据，而不再是栅格图片的栅格数据，因此，能够 避免现有技术中由于栅格数据的数据量很大而导致的客户端请求获取该栅格数据的时间 较长的问题，从而提高了栅格图片绘制的效率。
[0091] 现有的栅格图片的绘制方法，服务器预先绘制好栅格图片，客户端向服务器请求 栅格图片的栅格数据，然后由所述客户端将所请求的栅格数据显示为可视化的栅格图片。 这样，由于栅格数据的数据量很大，因此，会使得客户端请求获取该栅格数据的时间较长， 从而导致了栅格图片绘制的效率的降低。
[0092] 可以理解的是，在101之前，客户端可以按照现有技术中的方法，确定待绘制的栅 格图片的标识信息。例如，客户端根据当前视野所能够展示的栅格图片大小，以及进一步结 合当前的定位需求，确定待绘制的栅格图片的标识信息，例如，确定待绘制的一栅格地图的 行号为12652、列号为4712和级别（即层数）为16。
[0093] 其中，所述栅格图片，又可以称为瓦片图片，瓦片图片的行号、列号和级别的详细 描述可以参见现有技术中的相关内容，此处不再赘述。
[0094] 本实施例中，所述的图片可以包括但不限于地图，本实施例对此不进行限定。以地 图为例，下面将简单介绍一下地图的瓦片，即瓦片地图。
[0095] 首先，确定地图服务平台所要提供的缩放级别的数量N，把缩放级别最低、地图比 例尺最小的地图图片作为底层，即第〇层，并对其进行分块，从地图图片的左上角开始，从 左至右、从上到下进行切割，分割成相同大小，例如，256x256像素的正方形瓦片地图，形成 第0层瓦片矩阵；
[0096] 其次，在第0层地图图片的基础上，按每2x2像素合成为一个像素的方法生成第1 层地图图片，并对其进行分块，分割成与下一层相同大小的正方形瓦片地图，形成第1层瓦 片矩阵；
[0097] 然后，采用同样的方法生成第2层瓦片矩阵；
[0098] 如此下去，直到第N-1层，构成整个瓦片金字塔。
[0099] 例如，在Google地图中，地图图片由大量的正方形的瓦片地图组成。共有18级缩 放比例，每个瓦片地图都有坐标值，由列号X值和行号Y值构成。地图比例尺的比例因子 zoom取值范围是（0?17)。
[0100] 可选地，在本实施例的一个可能的实现方式中，在101中，客户端具体可以向服务 器发送基于超文本传输协议（Hypertext Transfer Protocol,HTTP)的所述绘制请求消息。
[0101] 例如，所述客户端具体可以向服务器发送基于可扩展标记语言（extensible Markup Language, XML)的异步 Java 脚本语言（JavaScript) (Asynchronous JavaScript and XML，AJAX)的所述绘制请求消息。具体地，所述客户端在所述绘制请求消息中设置AJAX 回调函数，以保证在该客户端在所述AJAX回调函数中获取到服务器返回的数据。
[0102] 或者，再例如，所述客户端具体还可以向服务器发送基于带填充的JavaScript对 象表不法（JavaScript Object Notation，JS0N) (JS0N with Padding，JS0NP)的所述绘制 请求消息。具体地，所述客户端在所述绘制请求消息中设置JS0NP回调函数，以保证在该客 户端在所述JS0NP回调函数中获取到服务器返回的数据。
[0103] 可选地，在本实施例的一个可能的实现方式中，在103中，客户端所获得的与所述 矢量数据对应的绘制特征信息可以包括但不限于下列中的至少一项：
[0104] 地面元素的类型信息；
[0105] 地面元素的图标信息；
[0106] 地面元素的样式信息；
[0107] 地面元素的地理位置信息；
[0108] 地面元素的注记；以及 [0109] 地面元素的偏移量。
[0110] 其中，
[0111] 所述地面元素的类型信息可以包括但不限于点、线和面中的至少一项。
[0112] 所述地面元素的图标信息可以包括但不限于酒店、医院、学校和公园中的至少一 项。
[0113] 所述地面元素的地理位置信息可以包括但不限于经度和纬度。
[0114] 所述地面元素的注记可以为地面元素的文本标记，例如，百度、上地十街等。
[0115] 可选地，在本实施例的一个可能的实现方式中，在104中，客户端具体可以创建画 布（Canvas)兀素。
[0116] 具体地，Canvas 元素是超文本标记语言（HyperText Mark-up Language, HTML)的 第五版本（HTML5)中新增的一个重要元素，专门用来绘制图形，在万维网（World Wide Web， Web)页面上创建一个Canvas元素，就相当于在Web页面上放置一块"画布"，可以在其中进 行图形的绘制。
[0117] 然后，所述客户端则可以利用所述绘制特征信息，在所述Canvas元素中，绘制所 述栅格图片。
[0118] 为使得本发明实施例提供的方法更加清楚，下面将以栅格地图的绘制作为举例， 假设当前用户想通过在终端安装的浏览器的地图页面，定位天安门附近，以查看天安门附 近的地图（即栅格地图)，即行号为12652、列号为47121和级别为16。
[0119] 首先，终端安装的浏览器的地图页面即客户端，根据用户所要定位的区域即天安 门附近，确定该区域的对应的地图图片的行号、列号和级别，即行号为12652、列号为47121 和级别为16。
[0120] 然后，所述客户端则将地图图片的行号、列号和级别封装成一个HTTP请求消息 http://vectordata.map.baidu.com/ ? x=12652&y=4712&z=16,通过 AJAX 对象，将所述 HTTP请求消息发送到网络侧的服务器。服务器接收到该HTTP请求消息之后，查询数据库， 通过Ajax对象的回调函数向客户端返回与所述地图图片的行号、列号和级别对应的矢量 数据。
[0121] 具体地，所述矢量数据的形式可以是二进制数据，或者还可以是其他形式的数据， 本实施例对此不进行限定。
[0122] 接着，所述客户端在Ajax对象的回调函数中获取到所述矢量数据之后，利用内 置的数据视图（DataView)或者开源对象jDataView，可以进一步根据解析协议逐字节进 行解析，将所述矢量数据解析为面对象、线对象和点对象，这些对象统称为绘制特征信息 (Feature)对象，每个Feature对象可以包括但不限于下列中的至少一项：
[0123] 地面元素的类型信息；
[0124] 地面元素的图标信息；
[0125] 地面元素的样式信息；
[0126] 地面元素的地理位置信息；
[0127] 地面元素的注记；以及
[0128] 地面元素的偏移量。
[0129] Feature对象的详细描述可以如表1所示。
[0130] 表 IFeature 对象
[0131]
【权利要求】
1. 一种栅格图片的绘制方法，其特征在于，包括： 向服务器发送绘制请求消息，所述绘制请求消息中包含栅格图片的标识信息，以使得 所述服务器根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对应的矢量数 据； 接收所述服务器发送的所述矢量数据； 根据所述矢量数据，获得与所述矢量数据对应的绘制特征信息； 利用所述绘制特征信息，绘制栅格图片。
2. 根据权利要求1所述的方法，其特征在于，所述向服务器发送绘制请求消息，包括： 向服务器发送基于HTTP的所述绘制请求消息。
3. 根据权利要求2所述的方法，其特征在于，所述向服务器发送基于HTTP的所述绘制 请求消息，包括： 向服务器发送AJAX或JSONP的所述绘制请求消息。
4. 根据权利要求1?3任一权利要求所述的方法，其特征在于，所述绘制特征信息包括 下列中的至少一项： 地面元素的类型信息； 地面元素的图标信息； 地面元素的样式信息； 地面元素的地理位置信息； 地面元素的注记；以及 地面兀素的偏移量。
5. 根据权利要求1?4任一权利要求所述的方法，其特征在于，所述利用所述绘制特征 信息，绘制栅格图片，包括： 创建Canvas元素； 利用所述绘制特征信息，在所述Canvas元素中，绘制所述栅格图片。
6. -种栅格图片的绘制方法，其特征在于，包括： 接收客户端发送的绘制请求消息，所述绘制请求消息中包含栅格图片的标识信息； 根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对应的矢量数据； 向所述客户端发送所述矢量数据，以使得所述客户端根据所述矢量数据，获得与所述 矢量数据对应的绘制特征信息，以及利用所述绘制特征信息，绘制栅格图片。
7. 根据权利要求6所述的方法，其特征在于，所述接收客户端发送的绘制请求消息，包 括： 接收客户端发送的基于HTTP的所述绘制请求消息。
8. 根据权利要求7所述的方法，其特征在于，所述接收客户端发送的基于HTTP的所述 绘制请求消息，包括： 接收客户端发送的AJAX或JSONP的所述绘制请求消息。
9. 根据权利要求6?8任一权利要求所述的方法，其特征在于，所述绘制特征信息包括 下列中的至少一项： 地面元素的类型信息； 地面元素的图标信息； 地面元素的样式信息； 地面元素的地理位置信息； 地面元素的注记；以及 地面兀素的偏移量。
10. -种栅格图片的绘制装置，其特征在于，包括： 发送单元，用于向服务器发送绘制请求消息，所述绘制请求消息中包含栅格图片的标 识信息，以使得所述服务器根据所述栅格图片的标识信息，获得与所述栅格图片的标识信 息对应的矢量数据； 接收单元，用于接收所述服务器发送的所述矢量数据； 获得单元，用于根据所述矢量数据，获得与所述矢量数据对应的绘制特征信息； 绘制单元，用于利用所述绘制特征信息，绘制栅格图片。
11. 根据权利要求10所述的装置，其特征在于，所述发送单元，具体用于 向服务器发送基于HTTP的所述绘制请求消息。
12. 根据权利要求11所述的装置，其特征在于，所述发送单元，具体用于 向服务器发送AJAX或JSONP的所述绘制请求消息。
13. 根据权利要求10?12任一权利要求所述的装置，其特征在于，所述绘制特征信息 包括下列中的至少一项： 地面元素的类型信息； 地面元素的图标信息； 地面元素的样式信息； 地面元素的地理位置信息； 地面元素的注记；以及 地面兀素的偏移量。
14. 根据权利要求10?13任一权利要求所述的装置，其特征在于，所述绘制单元，具体 用于 创建Canvas元素；以及利用所述绘制特征信息，在所述Canvas元素中，绘制所述栅格 图片。
15. -种栅格图片的绘制装置，其特征在于，包括： 接收单元，用于接收客户端发送的绘制请求消息，所述绘制请求消息中包含栅格图片 的标识信息； 获得单元，用于根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对应 的矢量数据； 发送单元，用于向所述客户端发送所述矢量数据，以使得所述客户端根据所述矢量数 据，获得与所述矢量数据对应的绘制特征信息，以及利用所述绘制特征信息，绘制栅格图 片。
16. 根据权利要求15所述的装置，其特征在于，所述接收单元，具体用于 接收客户端发送的基于HTTP的所述绘制请求消息。
17. 根据权利要求16所述的装置，其特征在于，所述接收单元，具体用于 接收客户端发送的AJAX或JSONP的所述绘制请求消息。
18.根据权利要求15?17任一权利要求所述的装置，其特征在于，所述绘制特征信息 包括下列中的至少一项： 地面元素的类型信息； 地面元素的图标信息； 地面元素的样式信息； 地面元素的地理位置信息； 地面元素的注记；以及 地面兀素的偏移量。
【文档编号】G06F17/30GK104111951SQ201310138472
【公开日】2014年10月22日 申请日期:2013年4月19日 优先权日:2013年4月19日
【发明者】王加鹏 申请人:百度在线网络技术（北京）有限公司