栅格图片的绘制方法及装置.pdf

《栅格图片的绘制方法及装置.pdf》由会员分享，可在线阅读，更多相关《栅格图片的绘制方法及装置.pdf（22页珍藏版）》请在专利查询网上搜索。

1、(10)申请公布号 CN 104111951 A (43)申请公布日 2014.10.22 C N 1 0 4 1 1 1 9 5 1 A (21)申请号 201310138472.9 (22)申请日 2013.04.19 G06F 17/30(2006.01) G06T 11/00(2006.01) (71)申请人百度在线网络技术(北京)有限公司 地址 100085 北京市海淀区上地十街10号 百度大厦 (72)发明人王加鹏 (74)专利代理机构北京鸿德海业知识产权代理 事务所(普通合伙) 11412 代理人袁媛 (54) 发明名称 栅格图片的绘制方法及装置 (57) 摘要 本发明提供一种栅。

2、格图片的绘制方法及装 置。一方面，本发明实施例通过向服务器发送绘制 请求消息，所述绘制请求消息中包含栅格图片的 标识信息，以使得所述服务器根据所述栅格图片 的标识信息，获得与所述栅格图片的标识信息对 应的矢量数据，进而接收所述服务器发送的所述 矢量数据，以及根据所述矢量数据，获得与所述矢 量数据对应的绘制特征信息，使得能够利用所述 绘制特征信息，绘制栅格图片，由于客户端请求获 取的是栅格图片的矢量数据，而不再是栅格图片 的栅格数据，因此，能够避免现有技术中由于栅格 数据的数据量很大而导致的客户端请求获取该栅 格数据的时间较长的问题，从而提高了栅格图片 绘制的效率。 (51)Int.Cl. 权利。

3、要求书3页 说明书16页 附图2页 (19)中华人民共和国国家知识产权局 (12)发明专利申请 权利要求书3页 说明书16页 附图2页 (10)申请公布号 CN 104111951 A CN 104111951 A 1/3页 2 1.一种栅格图片的绘制方法，其特征在于，包括： 向服务器发送绘制请求消息，所述绘制请求消息中包含栅格图片的标识信息，以使得 所述服务器根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对应的矢量数 据； 接收所述服务器发送的所述矢量数据； 根据所述矢量数据，获得与所述矢量数据对应的绘制特征信息； 利用所述绘制特征信息，绘制栅格图片。 2.根据权利要求1所述的方法。

4、，其特征在于，所述向服务器发送绘制请求消息，包括： 向服务器发送基于HTTP的所述绘制请求消息。 3.根据权利要求2所述的方法，其特征在于，所述向服务器发送基于HTTP的所述绘制 请求消息，包括： 向服务器发送AJAX或JSONP的所述绘制请求消息。 4.根据权利要求13任一权利要求所述的方法，其特征在于，所述绘制特征信息包括 下列中的至少一项： 地面元素的类型信息； 地面元素的图标信息； 地面元素的样式信息； 地面元素的地理位置信息； 地面元素的注记；以及 地面元素的偏移量。 5.根据权利要求14任一权利要求所述的方法，其特征在于，所述利用所述绘制特征 信息，绘制栅格图片，包括： 创建Can。

5、vas元素； 利用所述绘制特征信息，在所述Canvas元素中，绘制所述栅格图片。 6.一种栅格图片的绘制方法，其特征在于，包括： 接收客户端发送的绘制请求消息，所述绘制请求消息中包含栅格图片的标识信息； 根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对应的矢量数据； 向所述客户端发送所述矢量数据，以使得所述客户端根据所述矢量数据，获得与所述 矢量数据对应的绘制特征信息，以及利用所述绘制特征信息，绘制栅格图片。 7.根据权利要求6所述的方法，其特征在于，所述接收客户端发送的绘制请求消息，包 括： 接收客户端发送的基于HTTP的所述绘制请求消息。 8.根据权利要求7所述的方法，其特征在于。

6、，所述接收客户端发送的基于HTTP的所述 绘制请求消息，包括： 接收客户端发送的AJAX或JSONP的所述绘制请求消息。 9.根据权利要求68任一权利要求所述的方法，其特征在于，所述绘制特征信息包括 下列中的至少一项： 地面元素的类型信息； 地面元素的图标信息； 权 利 要 求 书CN 104111951 A 2/3页 3 地面元素的样式信息； 地面元素的地理位置信息； 地面元素的注记；以及 地面元素的偏移量。 10.一种栅格图片的绘制装置，其特征在于，包括： 发送单元，用于向服务器发送绘制请求消息，所述绘制请求消息中包含栅格图片的标 识信息，以使得所述服务器根据所述栅格图片的标识信息，获得与。

7、所述栅格图片的标识信 息对应的矢量数据； 接收单元，用于接收所述服务器发送的所述矢量数据； 获得单元，用于根据所述矢量数据，获得与所述矢量数据对应的绘制特征信息； 绘制单元，用于利用所述绘制特征信息，绘制栅格图片。 11.根据权利要求10所述的装置，其特征在于，所述发送单元，具体用于 向服务器发送基于HTTP的所述绘制请求消息。 12.根据权利要求11所述的装置，其特征在于，所述发送单元，具体用于 向服务器发送AJAX或JSONP的所述绘制请求消息。 13.根据权利要求1012任一权利要求所述的装置，其特征在于，所述绘制特征信息 包括下列中的至少一项： 地面元素的类型信息； 地面元素的图标信息。

8、； 地面元素的样式信息； 地面元素的地理位置信息； 地面元素的注记；以及 地面元素的偏移量。 14.根据权利要求1013任一权利要求所述的装置，其特征在于，所述绘制单元，具体 用于 创建Canvas元素；以及利用所述绘制特征信息，在所述Canvas元素中，绘制所述栅格 图片。 15.一种栅格图片的绘制装置，其特征在于，包括： 接收单元，用于接收客户端发送的绘制请求消息，所述绘制请求消息中包含栅格图片 的标识信息； 获得单元，用于根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对应 的矢量数据； 发送单元，用于向所述客户端发送所述矢量数据，以使得所述客户端根据所述矢量数 据，获得与所述矢。

9、量数据对应的绘制特征信息，以及利用所述绘制特征信息，绘制栅格图 片。 16.根据权利要求15所述的装置，其特征在于，所述接收单元，具体用于 接收客户端发送的基于HTTP的所述绘制请求消息。 17.根据权利要求16所述的装置，其特征在于，所述接收单元，具体用于 接收客户端发送的AJAX或JSONP的所述绘制请求消息。 权 利 要 求 书CN 104111951 A 3/3页 4 18.根据权利要求1517任一权利要求所述的装置，其特征在于，所述绘制特征信息 包括下列中的至少一项： 地面元素的类型信息； 地面元素的图标信息； 地面元素的样式信息； 地面元素的地理位置信息； 地面元素的注记；以及 地。

10、面元素的偏移量。 权 利 要 求 书CN 104111951 A 1/16页 5 栅格图片的绘制方法及装置 【 技术领域 】 0001 本发明涉及矢量绘制技术，尤其涉及栅格图片的绘制方法及装置。 【 背景技术 】 0002 随着通信技术的发展，终端集成了越来越多的功能，从而使得终端的系统功能列 表中包含了越来越多相应的应用程序。有些应用程序中会调用矢量绘制应用，通过该应用， 客户端可以向使用者展示绘制的矢量，例如，地图。现有的矢量绘制应用中，服务器预先绘 制好栅格图片，客户端向服务器请求栅格图片的栅格数据，然后由所述客户端将所请求的 栅格数据显示为可视化的栅格图片。 0003 然而，由于栅格数。

11、据的数据量很大，因此，会使得客户端请求获取该栅格数据的时 间较长，从而导致了栅格图片绘制的效率的降低。 【 发明内容 】 0004 本发明的多个方面提供栅格图片的绘制方法及装置，用以提高栅格图片绘制的效 率。 0005 本发明的一方面，提供一种栅格图片的绘制方法，包括： 0006 向服务器发送绘制请求消息，所述绘制请求消息中包含栅格图片的标识信息，以 使得所述服务器根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对应的矢 量数据； 0007 接收所述服务器发送的所述矢量数据； 0008 根据所述矢量数据，获得与所述矢量数据对应的绘制特征信息； 0009 利用所述绘制特征信息，绘制栅格图。

12、片。 0010 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述向服务 器发送绘制请求消息，包括： 0011 向服务器发送基于HTTP的所述绘制请求消息。 0012 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述向服务 器发送基于HTTP的所述绘制请求消息，包括： 0013 向服务器发送AJAX或JSONP的所述绘制请求消息。 0014 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述绘制特 征信息包括下列中的至少一项： 0015 地面元素的类型信息； 0016 地面元素的图标信息； 0017 地面元素的样式信息； 0018 地面元素的地理位置。

13、信息； 0019 地面元素的注记；以及 0020 地面元素的偏移量。 说 明 书CN 104111951 A 2/16页 6 0021 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述利用所 述绘制特征信息，绘制栅格图片，包括： 0022 创建Canvas元素； 0023 利用所述绘制特征信息，在所述Canvas元素中，绘制所述栅格图片。 0024 本发明的另一方面，提供另一种栅格图片的绘制方法，包括： 0025 接收客户端发送的绘制请求消息，所述绘制请求消息中包含栅格图片的标识信 息； 0026 根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对应的矢量数 据； 00。

14、27 向所述客户端发送所述矢量数据，以使得所述客户端根据所述矢量数据，获得与 所述矢量数据对应的绘制特征信息，以及利用所述绘制特征信息，绘制栅格图片。 0028 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述接收客 户端发送的绘制请求消息，包括： 0029 接收客户端发送的基于HTTP的所述绘制请求消息。 0030 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述接收客 户端发送的基于HTTP的所述绘制请求消息，包括： 0031 接收客户端发送的AJAX或JSONP的所述绘制请求消息。 0032 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述。

15、绘制特 征信息包括下列中的至少一项： 0033 地面元素的类型信息； 0034 地面元素的图标信息； 0035 地面元素的样式信息； 0036 地面元素的地理位置信息； 0037 地面元素的注记；以及 0038 地面元素的偏移量。 0039 本发明的另一方面，提供一种栅格图片的绘制装置，包括： 0040 发送单元，用于向服务器发送绘制请求消息，所述绘制请求消息中包含栅格图片 的标识信息，以使得所述服务器根据所述栅格图片的标识信息，获得与所述栅格图片的标 识信息对应的矢量数据； 0041 接收单元，用于接收所述服务器发送的所述矢量数据； 0042 获得单元，用于根据所述矢量数据，获得与所述矢量数。

16、据对应的绘制特征信息； 0043 绘制单元，用于利用所述绘制特征信息，绘制栅格图片。 0044 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述发送单 元，具体用于 0045 向服务器发送基于HTTP的所述绘制请求消息。 0046 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述发送单 元，具体用于 0047 向服务器发送AJAX或JSONP的所述绘制请求消息。 0048 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述绘制特 说 明 书CN 104111951 A 3/16页 7 征信息包括下列中的至少一项： 0049 地面元素的类型信息； 0。

17、050 地面元素的图标信息； 0051 地面元素的样式信息； 0052 地面元素的地理位置信息； 0053 地面元素的注记；以及 0054 地面元素的偏移量。 0055 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述绘制单 元，具体用于 0056 创建Canvas元素；以及利用所述绘制特征信息，在所述Canvas元素中，绘制所述 栅格图片。 0057 本发明的另一方面，提供另一种栅格图片的绘制装置，包括： 0058 接收单元，用于接收客户端发送的绘制请求消息，所述绘制请求消息中包含栅格 图片的标识信息； 0059 获得单元，用于根据所述栅格图片的标识信息，获得与所述栅格图片的。

18、标识信息 对应的矢量数据； 0060 发送单元，用于向所述客户端发送所述矢量数据，以使得所述客户端根据所述矢 量数据，获得与所述矢量数据对应的绘制特征信息，以及利用所述绘制特征信息，绘制栅格 图片。 0061 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述接收单 元，具体用于 0062 接收客户端发送的基于HTTP的所述绘制请求消息。 0063 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述接收单 元，具体用于 0064 接收客户端发送的AJAX或JSONP的所述绘制请求消息。 0065 如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述绘制特。

19、 征信息包括下列中的至少一项： 0066 地面元素的类型信息； 0067 地面元素的图标信息； 0068 地面元素的样式信息； 0069 地面元素的地理位置信息； 0070 地面元素的注记；以及 0071 地面元素的偏移量。 0072 由上述技术方案可知，一方面，本发明实施例通过向服务器发送绘制请求消息，所 述绘制请求消息中包含栅格图片的标识信息，以使得所述服务器根据所述栅格图片的标识 信息，获得与所述栅格图片的标识信息对应的矢量数据，进而接收所述服务器发送的所述 矢量数据，以及根据所述矢量数据，获得与所述矢量数据对应的绘制特征信息，使得能够利 用所述绘制特征信息，绘制栅格图片，由于客户端请求。

20、获取的是栅格图片的矢量数据，而不 再是栅格图片的栅格数据，因此，能够避免现有技术中由于栅格数据的数据量很大而导致 说 明 书CN 104111951 A 4/16页 8 的客户端请求获取该栅格数据的时间较长的问题，从而提高了栅格图片绘制的效率。 0073 由上述技术方案可知，另一方面，本发明实施例通过接收客户端发送的绘制请求 消息，所述绘制请求消息中包含栅格图片的标识信息，进而根据所述栅格图片的标识信息， 获得与所述栅格图片的标识信息对应的矢量数据，使得能够向所述客户端发送所述矢量数 据，以使得所述客户端根据所述矢量数据，获得与所述矢量数据对应的绘制特征信息，以及 利用所述绘制特征信息，绘制栅。

21、格图片，由于客户端请求获取的是栅格图片的矢量数据，而 不再是栅格图片的栅格数据，因此，能够避免现有技术中由于栅格数据的数据量很大而导 致的客户端请求获取该栅格数据的时间较长的问题，从而提高了栅格图片绘制的效率。 【 附图说明 】 0074 为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述 中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实 施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附 图获得其他的附图。 0075 图1为本发明一实施例提供的一种栅格图片的绘制方法的流程示意图； 0076 图2为本发明另一实施例。

22、提供的另一种栅格图片的绘制方法的流程示意图； 0077 图3为本发明另一实施例提供的一种栅格图片的绘制装置的结构示意图； 0078 图4为本发明另一实施例提供的另一种栅格图片的绘制装置的结构示意图。 【 具体实施方式 】 0079 为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例 中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是 本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员 在没有作出创造性劳动前提下所获得的全部其他实施例，都属于本发明保护的范围。 0080 本发明的技术方案，可以应用于各种网络，例如，互。

23、联网、全球移动通信系统 （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 Acc。

24、ess，WiMAX）网络等。 0081 需要说明的是，本发明实施例中所涉及的终端可以包括但不限于手机、个人数字 助理（Personal Digital Assistant，PDA）、无线手持装置、无线上网本、个人电脑、便携电 脑、个人电脑（Personal Computer，PC）、MP3播放器、MP4播放器等。 0082 另外，本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在 三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情 况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。 0083 图1为本发明一实施例提供的一种栅。

25、格图片的绘制方法的流程示意图，如图1所 示。 0084 101、向服务器发送绘制请求消息，所述绘制请求消息中包含栅格图片的标识信 说 明 书CN 104111951 A 5/16页 9 息，以使得所述服务器根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对 应的矢量数据。 0085 102、接收所述服务器发送的所述矢量数据。 0086 103、根据所述矢量数据，获得与所述矢量数据对应的绘制特征信息。 0087 104、利用所述绘制特征信息，绘制栅格图片。 0088 需要说明的是，101104的执行主体可以是客户端，能够调用绘制装置，例如，画 布（canvas）应用软件，本实施例对此不进。

26、行限定。 0089 可以理解的是，所述客户端可以是安装在终端上的应用程序，或者还可以是浏览 器的一个网页，只要能够实现绘制功能，以提供矢量绘制的客观存在形式都可以，本实施例 对此不进行限定。 0090 这样，通过向服务器发送绘制请求消息，所述绘制请求消息中包含栅格图片的标 识信息，以使得所述服务器根据所述栅格图片的标识信息，获得与所述栅格图片的标识信 息对应的矢量数据，进而接收所述服务器发送的所述矢量数据，以及根据所述矢量数据，获 得与所述矢量数据对应的绘制特征信息，使得能够利用所述绘制特征信息，绘制栅格图片， 由于客户端请求获取的是栅格图片的矢量数据，而不再是栅格图片的栅格数据，因此，能够 。

27、避免现有技术中由于栅格数据的数据量很大而导致的客户端请求获取该栅格数据的时间 较长的问题，从而提高了栅格图片绘制的效率。 0091 现有的栅格图片的绘制方法，服务器预先绘制好栅格图片，客户端向服务器请求 栅格图片的栅格数据，然后由所述客户端将所请求的栅格数据显示为可视化的栅格图片。 这样，由于栅格数据的数据量很大，因此，会使得客户端请求获取该栅格数据的时间较长， 从而导致了栅格图片绘制的效率的降低。 0092 可以理解的是，在101之前，客户端可以按照现有技术中的方法，确定待绘制的栅 格图片的标识信息。例如，客户端根据当前视野所能够展示的栅格图片大小，以及进一步结 合当前的定位需求，确定待绘制。

28、的栅格图片的标识信息，例如，确定待绘制的一栅格地图的 行号为12652、列号为4712和级别（即层数）为16。 0093 其中，所述栅格图片，又可以称为瓦片图片，瓦片图片的行号、列号和级别的详细 描述可以参见现有技术中的相关内容，此处不再赘述。 0094 本实施例中，所述的图片可以包括但不限于地图，本实施例对此不进行限定。以地 图为例，下面将简单介绍一下地图的瓦片，即瓦片地图。 0095 首先，确定地图服务平台所要提供的缩放级别的数量N，把缩放级别最低、地图比 例尺最小的地图图片作为底层，即第0层，并对其进行分块，从地图图片的左上角开始，从 左至右、从上到下进行切割，分割成相同大小，例如，25。

29、6x256像素的正方形瓦片地图，形成 第0层瓦片矩阵； 0096 其次，在第0层地图图片的基础上，按每2x2像素合成为一个像素的方法生成第1 层地图图片，并对其进行分块，分割成与下一层相同大小的正方形瓦片地图，形成第1层瓦 片矩阵； 0097 然后，采用同样的方法生成第2层瓦片矩阵； 0098 如此下去，直到第N-1层，构成整个瓦片金字塔。 0099 例如，在Google地图中，地图图片由大量的正方形的瓦片地图组成。共有18级缩 说 明 书CN 104111951 A 6/16页 10 放比例，每个瓦片地图都有坐标值，由列号X值和行号Y值构成。地图比例尺的比例因子 zoom取值范围是（017）。

30、。 0100 可选地，在本实施例的一个可能的实现方式中，在101中，客户端具体可以向服务 器发送基于超文本传输协议（Hypertext Transfer Protocol，HTTP）的所述绘制请求消息。 0101 例如，所述客户端具体可以向服务器发送基于可扩展标记语言（eXtensible Markup Language，XML）的异步Java脚本语言（JavaScript）（Asynchronous JavaScript and XML，AJAX）的所述绘制请求消息。具体地，所述客户端在所述绘制请求消息中设置AJAX 回调函数，以保证在该客户端在所述AJAX回调函数中获取到服务器返回的数据。。

31、 0102 或者，再例如，所述客户端具体还可以向服务器发送基于带填充的JavaScript对 象表示法（JavaScript Object Notation，JSON）（JSON with Padding，JSONP）的所述绘制 请求消息。具体地，所述客户端在所述绘制请求消息中设置JSONP回调函数，以保证在该客 户端在所述JSONP回调函数中获取到服务器返回的数据。 0103 可选地，在本实施例的一个可能的实现方式中，在103中，客户端所获得的与所述 矢量数据对应的绘制特征信息可以包括但不限于下列中的至少一项： 0104 地面元素的类型信息； 0105 地面元素的图标信息； 0106 地面元。

32、素的样式信息； 0107 地面元素的地理位置信息； 0108 地面元素的注记；以及 0109 地面元素的偏移量。 0110 其中， 0111 所述地面元素的类型信息可以包括但不限于点、线和面中的至少一项。 0112 所述地面元素的图标信息可以包括但不限于酒店、医院、学校和公园中的至少一 项。 0113 所述地面元素的地理位置信息可以包括但不限于经度和纬度。 0114 所述地面元素的注记可以为地面元素的文本标记，例如，百度、上地十街等。 0115 可选地，在本实施例的一个可能的实现方式中，在104中，客户端具体可以创建画 布（Canvas）元素。 0116 具体地，Canvas元素是超文本标记语。

33、言（HyperText Mark-up Language，HTML）的 第五版本（HTML5）中新增的一个重要元素，专门用来绘制图形，在万维网（World Wide Web， Web）页面上创建一个Canvas元素，就相当于在Web页面上放置一块“画布”，可以在其中进 行图形的绘制。 0117 然后，所述客户端则可以利用所述绘制特征信息，在所述Canvas元素中，绘制所 述栅格图片。 0118 为使得本发明实施例提供的方法更加清楚，下面将以栅格地图的绘制作为举例， 假设当前用户想通过在终端安装的浏览器的地图页面，定位天安门附近，以查看天安门附 近的地图（即栅格地图），即行号为12652、列号为。

34、47121和级别为16。 0119 首先，终端安装的浏览器的地图页面即客户端，根据用户所要定位的区域即天安 门附近，确定该区域的对应的地图图片的行号、列号和级别，即行号为12652、列号为47121 说 明 书CN 104111951 A 10 7/16页 11 和级别为16。 0120 然后，所述客户端则将地图图片的行号、列号和级别封装成一个HTTP请求消息 http:/ 0138 tileTop=列号*zoomUnit*256; 0139 zoomUnit=2(18级别)； 说 明 书CN 104111951 A 11 8/16页 12 0140 其中，行号、列号、级别是所述客户端所确定的。

35、地图图片的行号、列号和级别。 0141 然后，所述客户端则可以根据Feature对象中所包含的样式信息，完成栅格地图 的绘制。具体地，Feature对象中所包含的样式信息的详细描述可以如表2所示。 0142 表2Feature对象中所包含的样式信息 0143 样式名称样式值样式说明 2000 tiananmen.png天安门图标 2001 5,red线宽2像素，颜色为红色 2002 1,green边框为1像素，填充色为绿色 0144 0145 例如，对于点对象，客户端可以调用Canvas元素的drawImage方法，将图标绘制到 对应的像素位置处； 0146 或者，再例如，对于线对象，客户端可。

36、以设置画笔的宽度和画笔的颜色，然后调用 Canvas元素的stroke方法，将图标绘制到对应的像素位置处； 0147 或者，再例如，对于面对象，客户端可以设置画布的填充色和画笔的宽度，然后调 用Canvas元素的stroke方法和fill方法两个方法，将图标绘制到对应的像素位置处，其 中，stroke方法是绘制面对象的边框，fill方法是绘制面对象的填充区域。 0148 至此，通过以上具体操作，客户端就完成了将矢量数据绘制成栅格地图的过程。 0149 本实施例中，通过向服务器发送绘制请求消息，所述绘制请求消息中包含栅格图 片的标识信息，以使得所述服务器根据所述栅格图片的标识信息，获得与所述栅格。

37、图片的 标识信息对应的矢量数据，进而接收所述服务器发送的所述矢量数据，以及根据所述矢量 数据，获得与所述矢量数据对应的绘制特征信息，使得能够利用所述绘制特征信息，绘制栅 格图片，由于客户端请求获取的是栅格图片的矢量数据，而不再是栅格图片的栅格数据，因 此，能够避免现有技术中由于栅格数据的数据量很大而导致的客户端请求获取该栅格数据 的时间较长的问题，从而提高了栅格图片绘制的效率。 0150 另外，采用本发明提供的技术方案，由于客户端请求获取的是栅格图片的矢量数 据，而不再是栅格图片的栅格数据，因此，服务器无需向客户端发送栅格数据，从而节省了 数据流量和网络资源。 0151 图2为本发明另一实施例。

38、提供的另一种栅格图片的绘制方法的流程示意图，如图 2所示。 0152 201、接收客户端发送的绘制请求消息，所述绘制请求消息中包含栅格图片的标识 信息。 0153 202、根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对应的矢量 数据。 0154 203、向所述客户端发送所述矢量数据，以使得所述客户端根据所述矢量数据，获 说 明 书CN 104111951 A 12 9/16页 13 得与所述矢量数据对应的绘制特征信息，以及利用所述绘制特征信息，绘制栅格图片。 0155 需要说明的是，201203的执行主体可以是位于网络侧的服务器，本实施例对此 不进行限定。 0156 可以理解的是，。

39、所述客户端能够调用绘制装置，例如，画布（canvas）应用软件，本 实施例对此不进行限定。 0157 可以理解的是，所述客户端可以是安装在终端上的应用程序，或者还可以是浏览 器的一个网页，只要能够实现绘制功能，以提供矢量绘制的客观存在形式都可以，本实施例 对此不进行限定。 0158 这样，通过接收客户端发送的绘制请求消息，所述绘制请求消息中包含栅格图片 的标识信息，进而根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息对应的 矢量数据，使得能够向所述客户端发送所述矢量数据，以使得所述客户端根据所述矢量数 据，获得与所述矢量数据对应的绘制特征信息，以及利用所述绘制特征信息，绘制栅格图 片，。

40、由于客户端请求获取的是栅格图片的矢量数据，而不再是栅格图片的栅格数据，因此， 能够避免现有技术中由于栅格数据的数据量很大而导致的客户端请求获取该栅格数据的 时间较长的问题，从而提高了栅格图片绘制的效率。 0159 现有的栅格图片的绘制方法，服务器预先绘制好栅格图片，客户端向服务器请求 栅格图片的栅格数据，然后由所述客户端将所请求的栅格数据显示为可视化的栅格图片。 这样，由于栅格数据的数据量很大，因此，会使得客户端请求获取该栅格数据的时间较长， 从而导致了栅格图片绘制的效率的降低。 0160 可以理解的是，在201之前，客户端可以按照现有技术中的方法，确定待绘制的栅 格图片的标识信息。例如，客户。

41、端根据当前视野所能够展示的栅格图片大小，以及进一步结 合当前的定位需求，确定待绘制的栅格图片的标识信息，例如，确定待绘制的一栅格地图的 行号为12652、列号为4712和级别（即层数）为16。 0161 其中，所述栅格图片，又可以称为瓦片图片，瓦片图片的行号、列号和级别的详细 描述可以参见现有技术中的相关内容，此处不再赘述。 0162 本实施例中，所述的图片可以包括但不限于地图，本实施例对此不进行限定。以地 图为例，下面将简单介绍一下地图的瓦片，即瓦片地图。 0163 首先，确定地图服务平台所要提供的缩放级别的数量N，把缩放级别最低、地图比 例尺最小的地图图片作为底层，即第0层，并对其进行分块。

42、，从地图图片的左上角开始，从 左至右、从上到下进行切割，分割成相同大小，例如，256x256像素的正方形瓦片地图，形成 第0层瓦片矩阵； 0164 其次，在第0层地图图片的基础上，按每2x2像素合成为一个像素的方法生成第1 层地图图片，并对其进行分块，分割成与下一层相同大小的正方形瓦片地图，形成第1层瓦 片矩阵； 0165 然后，采用同样的方法生成第2层瓦片矩阵； 0166 如此下去，直到第N-1层，构成整个瓦片金字塔。 0167 例如，在Google地图中，地图图片由大量的正方形的瓦片地图组成。共有18级缩 放比例，每个瓦片地图都有坐标值，由列号X值和行号Y值构成。地图比例尺的比例因子 zo。

43、om取值范围是（017）。 说 明 书CN 104111951 A 13 10/16页 14 0168 可选地，在本实施例的一个可能的实现方式中，在201中，服务器具体可以接收客 户端发送的基于HTTP的所述绘制请求消息。 0169 例如，所述服务器具体可以接收客户端发送的基于可扩展标记语言（eXtensible Markup Language，XML）的异步Java脚本语言（JavaScript）（Asynchronous JavaScript and XML，AJAX）的所述绘制请求消息。具体地，所述客户端在所述绘制请求消息中设置AJAX 回调函数，以保证在该客户端在所述AJAX回调函数中。

44、获取到服务器返回的数据。 0170 或者，再例如，所述服务器具体还可以接收客户端发送的基于带填充的 JavaScript对象表示法（JavaScript Object Notation，JSON）（JSON with Padding， JSONP）的所述绘制请求消息。具体地，所述客户端在所述绘制请求消息中设置JSONP回调 函数，以保证在该客户端在所述JSONP回调函数中获取到服务器返回的数据。 0171 可选地，在本实施例的一个可能的实现方式中，客户端所获得的与所述矢量数据 对应的绘制特征信息可以包括但不限于下列中的至少一项： 0172 地面元素的类型信息； 0173 地面元素的图标信息； 。

45、0174 地面元素的样式信息； 0175 地面元素的地理位置信息； 0176 地面元素的注记；以及 0177 地面元素的偏移量。 0178 其中， 0179 所述地面元素的类型信息可以包括但不限于点、线和面中的至少一项。 0180 所述地面元素的图标信息可以包括但不限于酒店、医院、学校和公园中的至少一 项。 0181 所述地面元素的地理位置信息可以包括但不限于经度和纬度。 0182 所述地面元素的注记可以为地面元素的文本标记，例如，百度、上地十街等。 0183 可选地，在本实施例的一个可能的实现方式中，客户端具体可以创建画布 （Canvas）元素。 0184 具体地，Canvas元素是超文本标。

46、记语言（HyperText Mark-up Language，HTML）的 第五版本（HTML5）中新增的一个重要元素，专门用来绘制图形，在万维网（World Wide Web， Web）页面上创建一个Canvas元素，就相当于在Web页面上放置一块“画布”，可以在其中进 行图形的绘制。 0185 然后，所述客户端则可以利用所述绘制特征信息，在所述Canvas元素中，绘制所 述栅格图片。 0186 为使得本发明实施例提供的方法更加清楚，下面将以栅格地图的绘制作为举例， 假设当前用户想通过在终端安装的浏览器的地图页面，定位天安门附近，以查看天安门附 近的地图（即栅格地图），即行号为12652、列。

47、号为47121和级别为16。详细描述可以参见图 1对应的实施例中的相关内容，此处不再赘述。 0187 本实施例中，通过接收客户端发送的绘制请求消息，所述绘制请求消息中包含栅 格图片的标识信息，进而根据所述栅格图片的标识信息，获得与所述栅格图片的标识信息 对应的矢量数据，使得能够向所述客户端发送所述矢量数据，以使得所述客户端根据所述 说 明 书CN 104111951 A 14 11/16页 15 矢量数据，获得与所述矢量数据对应的绘制特征信息，以及利用所述绘制特征信息，绘制栅 格图片，由于客户端请求获取的是栅格图片的矢量数据，而不再是栅格图片的栅格数据，因 此，能够避免现有技术中由于栅格数据的。

48、数据量很大而导致的客户端请求获取该栅格数据 的时间较长的问题，从而提高了栅格图片绘制的效率。 0188 另外，采用本发明提供的技术方案，由于客户端请求获取的是栅格图片的矢量数 据，而不再是栅格图片的栅格数据，因此，服务器无需向客户端发送栅格数据，从而节省了 数据流量和网络资源。 0189 需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列 的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为 依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知 悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明 所必须的。 0190 在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部 分，可以参见其他实施例的相关描述。 0191 图3为本发明另一实施例提供的一种栅格图片的绘制装置的结构示意图，如图3 所示。本实施例的栅格图片的绘制装置可以包括发送单元31、接收单元32、获得单元33和 绘制单元34。其中，发送单元31，用于向服务器发送绘制请求消息，所述绘制请求消息。