一种地图绘制方法及装置发明专利

专利名称：一种地图绘制方法及装置

专利类型：发明专利

专利申请号：CN201811122678.1

专利申请（专利权）人：北京高德云图科技有限公司
权利人地址：北京市朝阳区阜荣街10号7层商业715室

专利发明（设计）人：杜萌萌

专利摘要：本发明公开了一种地图绘制方法及装置，涉及地图绘制技术领域，主要目的在于通过WebGL技术实现地图绘制，提高地图的绘制效率。本发明主要的技术方案为：根据待绘制地图的图像参数，获取地图要素切片；将地图要素切片中记录的每个地图要素的切片内坐标转换为预置场景坐标系内的场景坐标，预置场景坐标系是基于地图投影后的平面坐标系建立的三维坐标系；将地图要素切片中记录的每个地图要素的场景坐标和绘制信息存储至绘制数据存储对象中，绘制数据存储对象是对应地图要素预先创建的；基于预置场景坐标系得到目标图像变换矩阵；利用目标图像变换矩阵将所有地图要素对应的绘制数据存储对象中存储的数据通过图形处理器中的预置着色器绘制出待绘制地图。

主权利要求：
1.一种地图绘制方法，其特征在于，所述方法包括：
根据待绘制地图的图像参数，获取地图要素切片；
将所述地图要素切片中记录的每个地图要素的切片内坐标转换为预置场景坐标系内的场景坐标，所述预置场景坐标系是基于地图投影后的平面坐标系建立的三维坐标系；
将所述地图要素切片中记录的每个地图要素的场景坐标和绘制信息存储至绘制数据存储对象中，所述绘制数据存储对象是对应所述地图要素预先创建的；
基于所述预置场景坐标系，得到目标图像变换矩阵；
利用所述目标图像变换矩阵将所有地图要素对应的所述绘制数据存储对象中存储的数据通过图形处理器中的预置着色器绘制出待绘制地图；
其中，所述将所述地图要素切片中记录的每个地图要素的场景坐标和绘制信息存储至绘制数据存储对象中，包括：如果地图要素为区域面要素，则创建包括顶点数据对象和颜色数据对象的绘制数据存储对象，将所述区域面要素中的区域面拆分为多个三角形的所有顶点的场景坐标，调用基于WebGL的数据缓存接口将所述场景坐标存存储至顶点数据对象，将对应于所述所有顶点的颜色信息存储至颜色数据对象；
如果地图要素为道路要素，则创建包括顶点数据对象和颜色数据对象的绘制数据存储对象，将所述道路要素中的道路线段拓宽为预置宽度的区域面后，再拆分为多个三角形的所有顶点的场景坐标，调用基于WebGL的数据缓存接口将所述场景坐标存储至顶点数据对象，将对应于所述所有顶点的颜色信息存储至颜色数据对象；
如果地图要素为建筑物要素，则创建包括顶点数据对象和颜色数据对象的绘制数据存储对象，将所述建筑物要素中建筑物的各个平面拆分为多个三角形的所有顶点的场景坐标，调用基于WebGL的数据缓存接口将所述场景坐标存储至顶点数据对象，将对应于所述所有顶点的颜色信息存储至颜色数据对象；
如果地图要素为标注要素，则创建包括顶点数据对象和纹理数据对象的绘制数据存储对象，调用基于WebGL的数据缓存接口将显示所述标注要素的矩形区域的所有顶点的场景坐标存储至顶点数据对象，将预置图片中指定位置的纹理贴图对应的纹理信息存储至纹理数据对象。
2.根据权利要求1所述的方法，其特征在于，所述方法还包括：
监测用户是否对已绘制地图进行移动或缩放操作，若监测到，则判断已绘制地图的下一帧待绘制地图中所含有的地图要素是否存在对应的绘制数据存储对象；
若存在，则根据所述移动或缩放操作计算新的图像变换矩阵，并以新的图像变换矩阵作为目标图像变换矩阵，执行所述利用所述目标图像变换矩阵将所有地图要素对应的所述绘制数据存储对象中存储的数据通过图形处理器中的预置着色器绘制出待绘制地图的步骤；
若不存在，则返回根据待绘制地图的图像参数，获取地图要素切片的步骤。
3.根据权利要求1所述的方法，其特征在于，所述目标图像变换矩阵包括：图像平移矩阵、图像缩放矩阵和视口变换矩阵，则所述利用所述目标图像变换矩阵将所有地图要素对应的所述绘制数据存储对象中存储的数据通过图形处理器中的预置着色器绘制出待绘制地图包括：获取所述图像平移矩阵、图像缩放矩阵和视口变换矩阵的乘积；
由预置着色器通过预置代码提取绘制数据存储对象中的场景坐标，所述预置代码是根据地图要素的分类对应编写的代码；
将所述乘积乘以所述场景坐标，确定所述待绘制地图中的地图要素所对应的屏幕像素坐标系内的像素点；
由预置着色器调用WebGL的drawElements接口启动WebGL绘制管线，将所述绘制数据存储对象中的绘制信息绘制在所述像素点上。
4.一种地图绘制装置，其特征在于，所述装置包括：
切片获取单元，用于根据待绘制地图的图像参数，获取地图要素切片；
坐标转换单元，用于将所述地图要素切片中记录的每个地图要素的切片内坐标转换为预置场景坐标系内的场景坐标，所述预置场景坐标系是基于地图投影后的平面坐标系建立的三维坐标系；
数据存储单元，用于将所述地图要素切片中记录的每个地图要素的场景坐标和绘制信息存储至绘制数据存储对象中，所述绘制数据存储对象是对应所述地图要素预先创建的；
矩阵计算单元，用于基于所述预置场景坐标系，得到目标图像变换矩阵；
地图绘制单元，用于利用所述目标图像变换矩阵将所有地图要素对应的所述绘制数据存储对象中存储的数据通过图形处理器中的预置着色器绘制出待绘制地图；
其中，所述数据存储单元具体用于：
如果地图要素为区域面要素，则创建包括顶点数据对象和颜色数据对象的绘制数据存储对象，将所述区域面要素中的区域面拆分为多个三角形的所有顶点的场景坐标，调用基于WebGL的数据缓存接口将所述场景坐标存存储至顶点数据对象，将对应于所述所有顶点的颜色信息存储至颜色数据对象；
如果地图要素为道路要素，则创建包括顶点数据对象和颜色数据对象的绘制数据存储对象，将所述道路要素中的道路线段拓宽为预置宽度的区域面后，再拆分为多个三角形的所有顶点的场景坐标，调用基于WebGL的数据缓存接口将所述场景坐标存储至顶点数据对象，将对应于所述所有顶点的颜色信息存储至颜色数据对象；
如果地图要素为建筑物要素，则创建包括顶点数据对象和颜色数据对象的绘制数据存储对象，将所述建筑物要素中建筑物的各个平面拆分为多个三角形的所有顶点的场景坐标，调用基于WebGL的数据缓存接口将所述场景坐标存储至顶点数据对象，将对应于所述所有顶点的颜色信息存储至颜色数据对象；
如果地图要素为标注要素，则创建包括顶点数据对象和纹理数据对象的绘制数据存储对象，调用基于WebGL的数据缓存接口将显示所述标注要素的矩形区域的所有顶点的场景坐标存储至顶点数据对象，将预置图片中指定位置的纹理贴图对应的纹理信息存储至纹理数据对象。
5.根据权利要求4所述的装置，其特征在于，所述装置还包括：
监测单元，用于监测用户是否对已绘制地图进行移动或缩放操作，若监测到，则判断已绘制地图的下一帧待绘制地图中所含有的地图要素是否存在对应的绘制数据存储对象；
若存在，则由矩阵计算单元根据移动或缩放操作计算新的图像变换矩阵，并以新的图像变换矩阵作为目标图像变换矩阵，执行所述地图绘制单元利用所述目标图像变换矩阵将所有地图要素对应的所述绘制数据存储对象中存储的数据通过图形处理器中的预置着色器绘制出待绘制地图的步骤；
若不存在，则返回至所述切片获取单元，执行根据待绘制地图的图像参数，获取地图要素切片的步骤。
6.根据权利要求4所述的装置，其特征在于，所述目标图像变换矩阵包括：图像平移矩阵、图像缩放矩阵和视口变换矩阵，则所述地图绘制单元包括：矩阵处理模块，用于获取所述图像平移矩阵、图像缩放矩阵和视口变换矩阵的乘积；
场景坐标提取模块，用于由预置着色器通过预置代码提取绘制数据存储对象中的场景坐标，所述预置代码是根据地图要素的分类对应编写的代码；
像素点确定模块，用于将所述矩阵处理模块得到的乘积乘以所述场景坐标提取模块提取的场景坐标，确定所述待绘制地图中的地图要素所对应的屏幕像素坐标系内的像素点；
地图绘制模块，用于由预置着色器调用WebGL的drawElements接口启动WebGL绘制管线，将所述绘制数据存储对象中的绘制信息绘制在所述像素点确定模块确定的像素点上。
7.一种处理器，其特征在于，所述处理器用于运行计算机程序，其中，所述计算机程序运行时执行权利要求1‑3中任意一项所述的地图绘制方法。 说明书 : 一种地图绘制方法及装置技术领域[0001] 本发明涉及地图绘制技术领域，尤其涉及一种地图绘制方法及装置。背景技术[0002] 随着浏览器端绘图技术的不断发展，尤其是HTML5标准发布之后，canvas、svg等绘图接口的出现，WEB地图的绘制方式也出现了翻天覆地的变化，由于具有数据体积小、定制灵活、放大缩小不失真等优势，矢量地图逐渐替代了部分栅格地图的份额，互联网涌现出了越来越多的矢量地图产品。一般地，WEB地图所展示的地图要素通常有四类，分别是区域面、道路、建筑物、标注(包括有兴趣点(PointofInterest，POI)、道路名称等标注)。通常这些要素在投影到平面之后，会被按照一定的大小进行切片分割，分割后这些要素将会被分布在不同的切片上，以切片号作为切片内要素的数据索引，这些要素的坐标会被预先处理成切片内的像素坐标。地图在WEB前端进行展示的时候将以切片号为索引加载需要的数据，然后以一定的绘制手段绘制出来。[0003] 目前，绘制地图要素的主要方式是由前端获取到地图数据，再调用浏览器厂商内置的CanvasRenderingContext2D接口利用canvas元素进行地图绘制，通常是将区域面、道路、建筑物作为一层(下文称作要素层)，将POI标注和道路标注等标注作为独立一层(下文称作标注层)，最后通过两个图层的叠加实现地图的完整绘制。然而，利用canvas元素所绘制的图像，在遇到如缩放或连续移动等地图操作时，由于要对每一帧图像都进行重新绘制，而受到CanvasRenderingContext2D接口性能的限制，该图像绘制过程将会变得卡顿，影响用户操作地图的流畅性。同时，由于使用canvas元素所绘制的图像仍是位图，在放大和缩小操作过程中，如果不进行图像的实时绘制更新，那么使用原图进行缩放操作将存在图形失真的问题。因此，现有的地图要素绘制方式无法对用户的连续操作进行快速响应，影响了用户的查询操作体验。发明内容[0004] 鉴于上述问题，本发明提出了一种地图绘制方法及装置，主要目的在于通过WebGL技术实现地图绘制，提高地图的绘制效率。[0005] 为达到上述目的，本发明主要提供如下技术方案：[0006] 一方面，本发明提供一种地图绘制方法，具体包括：[0007] 根据待绘制地图的图像参数，获取地图要素切片；[0008] 将所述地图要素切片中记录的每个地图要素的切片内坐标转换为预置场景坐标系内的场景坐标，所述预置场景坐标系是基于地图投影后的平面坐标系建立的三维坐标系；[0009] 将所述地图要素切片中记录的每个地图要素的场景坐标和绘制信息存储至绘制数据存储对象中，所述绘制数据存储对象是对应所述地图要素预先创建的；[0010] 基于所述预置场景坐标系，得到目标图像变换矩阵；[0011] 利用所述目标图像变换矩阵将所有地图要素对应的所述绘制数据存储对象中存储的数据通过图形处理器中的预置着色器绘制出待绘制地图。[0012] 另一方面，本发明提供一种地图绘制装置，具体包括：[0013] 切片获取单元，用于根据待绘制地图的图像参数，获取地图要素切片；[0014] 坐标转换单元，用于将所述地图要素切片中记录的每个地图要素的切片内坐标转换为预置场景坐标系内的场景坐标，所述预置场景坐标系是基于地图投影后的平面坐标系建立的三维坐标系；[0015] 数据存储单元，用于将所述地图要素切片中记录的每个地图要素的场景坐标和绘制信息存储至绘制数据存储对象中，所述绘制数据存储对象是对应所述地图要素预先创建的；[0016] 矩阵计算单元，用于基于所述预置场景坐标系，得到目标图像变换矩阵；[0017] 地图绘制单元，用于利用所述目标图像变换矩阵将所有地图要素对应的所述绘制数据存储对象中存储的数据通过图形处理器中的预置着色器绘制出待绘制地图。[0018] 另一方面，本发明提供一种存储介质，所述存储介质用于存储的计算机程序，其中，所述计算机程序运行时控制所述存储介质所在设备执行上述的地图绘制方法。[0019] 另一方面，本发明提供一种处理器，所述处理器用于运行计算机程序，其中，所述计算机程序运行时执行上述的地图绘制方法。[0020] 借由上述技术方案，本发明提供的一种地图绘制方法及装置，是基于WebGL绘图接口在预置场景坐标系中确定地图要素的位置，并通过目标图像变换矩阵对所有的地图要素进行矢量绘制，由于WebGL是利用图形处理器(GraphicsProcessingUnit，GPU)中的着色器执行的图像绘制，该绘图过程不再占用中央处理器(CentralProcessingUnit，CPU)的处理资源，因此，本发明能够对地图变化过程中的每一帧图像都进行有效的绘制，使得矢量地图显示的更为流畅，提升了对用户操作的响应速度。同时，相对使用canvas元素进行地图绘制的方式，本发明是在同一图层中对全类型地图要素进行矢量绘制，而不是将两个图层进行叠加，因此，在同一图层中的矢量数据不会因为地图的缩放操作而影响到图像质量，更加提升了所绘制地图的展示效果。[0021] 上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。附图说明[0022] 通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：[0023] 图1示出了本发明实施例提出的一种地图绘制方法的流程图；[0024] 图2示出了本发明实施例提出的另一种地图绘制方法的流程图；[0025] 图3示出了本发明实施例中针对不同类型地图要素绘制的方法流程图；[0026] 图4示出了本发明实施例中一个地图要素切片中含有的地图要素示意图；[0027] 图5示出了本发明实施例中处理不同类型地图要素的示意图；[0028] 图6示出了本发明实施例提出的一种地图绘制装置的组成框图；[0029] 图7示出了本发明实施例提出的另一种地图绘制装置的组成框图。具体实施方式[0030] 下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。[0031] 本发明实施例提供了一种地图绘制方法，是通过WebGL绘图接口实现将所有的地图要素绘制在同一矢量图中，能够提高图像的绘制效率，实现逐帧绘制矢量地图。需要说明的是，在执行本发明的具体绘制方法之前，需要预先设置一个场景坐标系，该场景坐标系为三维坐标系，用以绘制在用户屏幕上所展示的地图图像，同时，通过该场景坐标系也可以将实际的地理坐标转换为屏幕中的像素坐标。在此，需要说明的是，由于本实施例中存在有多个坐标系的坐标变换，因此，先对各个坐标系进行说明，包括有地理坐标系、地理平面像素坐标系，切片内像素坐标系，屏幕像素坐标系，其中，地理坐标系为经纬度以及高程坐标组成的三维坐标；地理平面像素坐标系是使用墨卡托投影并在一定分辨率下转换地理坐标系得到的，本实施例中的地图要素切片就是基于该地理平面像素坐标系下的地图按照不同缩放级别进行切分后得到的；而切片内像素坐标系则是在各个地图要素切片内创建的坐标系；屏幕像素坐标系则是由用户屏幕中的像素点所组成的坐标系。[0032] 本发明实施例是要在场景坐标系内将需要显示的地图要素，从地图要素切片中提取并绘制到对应的地理平面像素坐标系下的地图中，并将绘制的图像投影到屏幕中，可见，该过程就需要根据数据所采用的对应坐标系进行坐标转换。而本实施例中所创建的场景坐标系是以地理坐标系下地图图像中的某一点为原点，以预置缩放级别下地理平面像素坐标系内的像素为单位，将需要展示在屏幕中的地图要素投影到该场景坐标系下进行绘制。[0033] 本实施例所绘制的地图是针对显示在屏幕中每一帧的地图要素在地图中的位置、形状、颜色等信息，其具体的绘制步骤如图1所示，包括：[0034] 步骤101、根据待绘制地图的图像参数，获取地图要素切片。[0035] 具体的，图像参数主要包括所绘制地图的缩放级别、待绘制地图的中心点坐标、图像的尺寸(地图的展示范围)等。其中，该中心点坐标可以是地理坐标系下的坐标，也可以是地理平面像素坐标系下的坐标，由于坐标可以相互转换，该中心点坐标一般采用地理坐标系下的坐标。[0036] 根据缩放级别计算出中心点坐标在当前缩放级别下的地理平面像素坐标，再根据待绘制地图的尺寸计算出该待绘制地图左上角和右下角在该缩放级别下的地理平面像素坐标。一般地，待绘制地图为矩形，因此，根据这两个像素坐标除以切片大小，可以计算出左上角和右下角的数据对应的切片号(切片号是根据切片在地图中的行列位置坐标确定的)，处于两个切片号中间的切片号就是地图范围内的所有切片的编号。假设一缩放级别下地图的切片数量为16个，行列呈4*4排列，待绘制地图左上角对应的切片号为(1,2)，右下角对应的切片号为(3,3)，那么该待绘制地图所需的切片6片，对应的切片号分别为：(1,2)、(2,2)、(3,2)、(1,3)、(2,3)和(3,3)。[0037] 再根据这些切片的切片号获取到这些切片中含有的地图要素数据，每个切片的数据中都记录有该切片所包含的所有地图要素的形状信息(以切片内像素坐标构成的形状)和颜色、宽度、图标等信息。[0038] 步骤102、将地图要素切片中记录的每个地图要素的切片内坐标转换为预置场景坐标系内的场景坐标。[0039] 预置场景坐标系是基于地图投影后的平面坐标系建立的三维坐标系，通过设置该坐标系，不仅可以绘制平面二维的地图要素，还可以根据实际的矢量数据绘制三维立体的地图要素。[0040] 一般地，每个地图要素切片中会记录有多个地图要素的信息，而其中每一个地图要素都包括有该地图要素的位置、形状、颜色或纹理等信息。对于一个地图要素，如果是标注类型的地图要素，其位置一般是通过一个点坐标表示，而如果是面类型或线类型的地图要素，如区域面要素、道路要素等，其位置或形状一般是通过多个点坐标来确定的一个多边形或三维图形的区域。对于地图要素的颜色则是通过独立的字段记录的，在该字段中可以针对每个像素点的颜色进行设置，即根据每个像素点的坐标设置颜色。可见，地图要素中的信息主要为坐标信息，而一般情况下，该坐标信息为切片内坐标，即基于该地图要素所在切片内的像素点所创建的切片内像素坐标系下的坐标。[0041] 具体的转换过程为：根据地图要素所属切片的切片号(即待绘制地图在当前缩放级别下按照预定瓦片大小切割后所处的行列位置)计算切片内坐标对应的地理平面像素坐标，之后，根据地理平面像素坐标系与场景坐标系之间的对应关系，将地理平面像素坐标转换为场景坐标。其中，对于坐标系间的具体转换方法为数学模型中的常用的坐标变换方法，此处不再详细说明。[0042] 步骤103、将地图要素切片中记录的每个地图要素的场景坐标和绘制信息存储至绘制数据存储对象中。[0043] 其中，本步骤中的场景坐标用于描述地图要素的位置与形状，而绘制信息主要用于描述地图要素的颜色或纹理，其中，由于WebGL不支持中文绘图，因此，对于文字或图标就需要通过纹理贴图的方式实现，而纹理数据则是通过预置的图形或文字图像中截取的纹理贴图。[0044] 此外，需要说明的是，绘制数据存储对象是针对每一个地图要素单独创建的。本步骤将每一个地图要素的场景坐标和绘制信息存储至对应的绘制数据存储对象中，以便后续绘制地图时，由GPU中的着色器从这些绘制数据存储对象内提取绘制地图所需的信息。[0045] 步骤104、基于预置场景坐标系，得到目标图像变换矩阵。[0046] 由于本实施例是将指定范围内(由待绘制地图的中心点、缩放级别和宽高尺寸等参数确定的区域范围)的地图要素绘制到地图图像中，而场景坐标系的原点与待绘制地图所在的区域范围的中心点存在偏移量。对此，需要根据两个坐标系原点之间的坐标差值确定图像平移矩阵；以及根据待绘制地图的地图缩放级别与地理平面像素坐标系中参考地图的缩放级别的差值确定图像缩放矩阵，其中，地理平面像素坐标系中参考地图的缩放级别在初始化绘制时为指定的缩放级别，而在用户执行地图缩放操作过程中，该缩放级别则是指当前帧所绘制地图的缩放级别。[0047] 此外，由于在场景坐标系内所绘制的地图要素还需要展示在屏幕中，即将所绘制的地图投影到屏幕上的展示范围内，因此，还需要根据场景坐标系与屏幕像素坐标系的对应关系确定视口变换矩阵，以便将所绘制的地图地展示在屏幕指定的显示区域内。[0048] 对于上述的图像平移矩阵、图像缩放矩阵以及视口变换矩阵构成了待绘制地图的目标图像变换矩阵，其具体计算方式与现有地图绘制以及展示所应用的图像变换矩阵的计算方式相同，此处不再展开说明。[0049] 步骤105、利用目标图像变换矩阵将所有地图要素对应的绘制数据存储对象中存储的数据通过图形处理器中的预置着色器绘制出待绘制地图。[0050] 本步骤是在对待绘制地图中所含有的所有地图要素经过上述步骤102与103的处理后，由GPU中的预置着色器逐一提取每个地图要素所对应的绘制数据存储对象中的数据，利用目标图像变换矩阵在场景坐标系内进行绘制，即通过图像平移矩阵和图像缩放矩阵将地图要素绘制到地图中，并通过视口变换矩阵将场景坐标系内的图像投影到屏幕中，以供用户查看。[0051] 需要说明的是，本步骤中的预置着色器在处理地图要素所对应的绘图数据时，预置有不同的处理程序，根据地图要素的不同类型而选择对应的程序进行绘制，其中，预置的处理程序是基于WebGL绘制不同类型地图要素的需求而编写的程序。在本实施例中，地图要素的类型主要包括：区域面要素、道路要素、建筑物要素和标注要素。[0052] 通过上述实施例中各步骤的具体实现方式可以看出，本发明提出的地图绘制方法，是针对WEB地图所展示的一帧地图图像进行绘制的过程，该绘制过程是将所有的地图要素整体绘制为一幅矢量图像，从而使得用户在操作地图时，其图像的大小不会随着用户缩放地图的操作而失真。同时，本发明是基于WebGL绘图接口，利用GPU中的预置着色器进行图像绘制，如此，相对现有的使用CPU绘制地图的方式，其节省了对CPU处理资源的占用，使得CPU能够有足够的资源来处理用户操作所导致的地图变化所对应每一帧图像的相关数据，再由GPU进行高效地绘制、展示，从而提升用户操作地图的展示流畅性。[0053] 基于上述图1所示的对单帧地图图像的绘制过程，本发明实施例通过图2进一步说明在用户对地图执行移动或缩放操作时，如何高效地对每一帧地图的图像进行绘制的，具体步骤还包括：[0054] 步骤106、监测用户是否对已绘制地图进行移动或缩放操作，若监测到，则判断已绘制地图的下一帧待绘制地图中所含有的地图要素是否存在对应的绘制数据存储对象。[0055] 地图在根据用户操作显示地图图像变化的过程中，需要逐帧地绘制图像，以展示用户操作的流畅性。因此，本步骤就是监测用户是否对已绘制地图进行移动或缩放操作，若存在相应的操作，说明地图图像需要重新绘制，以响应用户的操作。在该过程中，基于用户的操作，在已绘制地图(当前一帧图像)的基础上，获取下一帧待绘制地图中所含有的地图要素，该获取过程与步骤101的内容相同，即获取下一帧待绘制地图中所含有的地图要素切片。进而，对比当前一帧图像所应用的地图要素切片是否存在新增的地图要素切片。[0056] 若不存在新增的地图要素切片，则说明下一帧图像中的地图要素在当前一帧图像中已做处理，即该地图要素已经过步骤102和103的处理，存在对应的绘制数据存储对象。此时，在绘制下一帧图像时，只需从图1所示实施例中的步骤104执行，根据用户的平移或缩放操作计算新的图像变换矩阵，将新的图像变换矩阵作为目标图像变换矩阵，结合已有的绘制数据存储对象重新绘制下一帧图像。[0057] 若存在新增的地图要素切片，则需要对该地图要素切片中的地图要素进行处理，即重新执行图1所述的步骤101‑105的操作，绘制出下一帧图像。[0058] 通过该步骤106的执行，在绘制连续多帧地图图像的过程中，能够大量减少对已处理地图要素的重复处理，包括坐标转换的计算以及绘制数据存储对象的创建和数据存储的操作，以此降低了CPU的数据计算量，节省出的处理资源可以更高效地处理用户操作导致的地图变化，进一步提升地图展示的流畅性。[0059] 为了进一步详细的阐明上述地图绘制方法中步骤103至步骤105的具体实现，特别是基于WebGL绘制图像的方式对不同类型的地图要素进行绘制时所采用的具体处理方式。其具体步骤如图3所示，包括：[0060] 步骤201、根据地图要素的分类为每个地图要素创建对应的绘制数据存储对象。[0061] 步骤202、调用基于WebGL的数据缓存接口将场景坐标以及对应的颜色信息或纹理信息注入绘制数据存储对象。[0062] 具体的，本实施例中关于地图要素的分类主要包括：区域面要素、道路要素、建筑物要素、标注要素四种。不同类型的地图要素可以通过对应的标识进行区分，该标识则是在采集地图要素时对应标注到各个地图要素中的。[0063] 首先，对于一个区域面要素，创建的绘制数据存储对象主要为两个对象，分别为顶点数据对象和颜色数据对象，之后，将该区域面要素中的区域面拆分为多个三角形，用所有三角形顶点的场景坐标表示该区域面，调用基于WebGL的数据缓存接口(如调用WebGL上下文的bufferData方法)将场景坐标存存储至顶点数据对象，将对应于所有顶点的颜色信息存储至颜色数据对象。[0064] 将区域面拆分为多个三角形是因为WebGL在绘制图形时只支持基本的三角形、线段、点这三种基本图元，为此，可以将构成区域面的多边形通过多边形拆分算法，如三角化算法，拆分为多个三角形，通过记录每个三角形的顶点坐标来表示该区域面的位置以及形状。而对于颜色数据对象，其存储的是对应顶点数据对象中各个三角形顶点的颜色信息，以此确定不同三角形的具体颜色，一般情况下，区域面要素在地图上展示的多为单色，因此，在颜色数据对象中各顶点的颜色信息都是相同的。[0065] 其次，对于一个道路要素，创建的绘制数据存储对象同样为顶点数据对象和颜色数据对象，将该道路要素中的道路线段拓宽为预置宽度的区域面后，再拆分为多个三角形的所有顶点的场景坐标，调用基于WebGL的数据缓存接口将场景坐标存储至顶点数据对象，将对应于所有顶点的颜色信息存储至颜色数据对象。[0066] 对于道路要素，其在平面展示时一般会表示为一条线段，而对于WebGL一般是不支持线宽属性处理的，因此，本发明实施例中就需要将该线段在平面中拓宽为一个区域面，比如矩形，预置宽度的值为预设的经验值。进而通过上述对区域面要素的处理方式得到多个三角形的所有顶点，并将顶点的坐标存储到顶点数据对象中。[0067] 第三，对于一个建筑物要素，所创建的绘制数据存储对象同样为顶点数据对象和颜色数据对象，将该建筑物要素中建筑物的各个平面拆分为多个三角形的所有顶点的场景坐标，调用基于WebGL的数据缓存接口将场景坐标存储至顶点数据对象，将对应于所有顶点的颜色信息存储至颜色数据对象。[0068] 其中，当该建筑物要素进行平面展示时，对该建筑物要素的处理可以等同于上述对区域面要素的处理，而当该建筑物要素进行三维立体展示时，则该建筑物可以视为在场景坐标系中由多个平面内的多边形所构成，进而将这些平面中的多边形逐一进行拆分，此时，顶点数据对象中所存储的是构成建筑物所有平面中多边形的三角形顶点的坐标。颜色数据对象存储的是对应所有顶点的颜色信息。[0069] 最后，对于一个标注要素，创建的绘制数据存储对象主要为顶点数据对象和纹理数据对象，调用基于WebGL的数据缓存接口将显示该标注要素的矩形区域的所有顶点的场景坐标存储至顶点数据对象，将预置图片中指定位置的纹理贴图对应的纹理信息存储至纹理数据对象。[0070] 由于WebGL不支持中文绘图，而对于一个标注要素的内容主要是道路或POI的文字或图标，因此，对于标注要素的绘制是通过从预置图片中截取文字或图标的纹理贴图实现绘制的。其中，预置图片中记录有所有标注要素所用到的文字或图标，在本实施例中，文字的预置图片和图标的预置图片可以是分别设置的，文字的预置图片是基于地图要素切片，即每个地图要素切片会对应设置一幅文字的预置图片；而图标的预置图片是基于所有的地图要素切片设置的一幅图标的预置图片。这是因为，对于图标而言，其通用性较高，因此所有切片中标注要素所使用的图标种类要远小于文字，所以，如此设置也可以优化纹理贴图占用的资源，提高处理效率。[0071] 具体的，对于仅含有文字的标注要素，需要为该文字创建一个顶点数据对象和一个纹理数据对象，顶点数据对象用于存储文字在场景坐标系中展示的位置坐标，纹理数据对象用于存储从文字的预置图片中截取纹理贴图的坐标。而对于即含有图标，又含有文字的标注要素，还需要再为图标单独创建一个顶点数据对象和一个纹理数据对象，该顶点数据对象用于存储图标在场景坐标系中展示的位置坐标，纹理数据对象用于存储从图标的预置图片中截取纹理贴图的坐标。[0072] 需要指出的是，上述四种类型的地图要素中，顶点数据对象所存储的坐标为场景坐标，为此，如果所获取的地图要素中记录的顶点坐标为其他坐标系的坐标时，就需要将其转换为场景坐标。[0073] 步骤203、基于预置场景坐标系，得到目标图像变换矩阵。[0074] 具体的，该图像变换矩阵包括图像平移矩阵、图像缩放矩阵和视口变换矩阵。[0075] 图像平移矩阵是根据预置场景坐标系的原点在地理坐标系中的平移量和待绘制地图中心点的场景坐标共同确定的。其具体计算过程是将待绘制地图的中心点在地理坐标系中的坐标转换在预置场景坐标系在当前缩放级别下的场景坐标，计算该场景坐标与预置场景坐标系原点的地理平面坐标的差值为平移量。[0076] 图像缩放矩阵是根据待绘制地图与前一帧图像的地图缩放级别的差值确定的。具体的，假设该差值为n，那么通过计算2的n次方得到图像缩放矩阵。[0077] 视口变换矩阵是根据地图的显示参数和屏幕上的显示窗口参数确定的。具体的，是根据屏幕上的显示窗口的大小或宽高比确定的正投影矩阵或透视投影矩阵。[0078] 步骤204、利用目标图像变换矩阵将所有地图要素对应的绘制数据存储对象中存储的数据通过图形处理器中的预置着色器绘制出待绘制地图。[0079] 在实际应用中，是将上述得到的图像平移矩阵、图像缩放矩阵和视口变换矩阵输入预置着色器中，在预置着色器中计算三者的乘积。之后，对每个地图要素先提取该地图要素所对应的数据存储对象中的场景坐标，该场景坐标是调用预置代码所提取的，而该预置代码则是根据地图要素的分类对应编写的代码。将场景坐标乘以目标图像变换矩阵通过预置着色器计算出的乘积，确定待绘制地图中的地图要素所对应的屏幕像素坐标系内的像素点。通过调用WebGL的drawElements接口启动WebGL绘制管线，将地图要素的绘制信息绘制到对应的像素点中，完成该地图要素的绘制，最终绘制出待绘制地图。[0080] 需要说明的是，图形处理器中的预置着色器一般分为顶点着色器与片元着色器两种。其中，顶点着色器用于提取顶点数据对象中的顶点坐标数据，确定地图要素的位置、形状以及对应的像素点；而片元着色器则用于提取颜色数据对象或纹理数据对象中的数据，为地图要素所对应的像素点进行颜色或纹理的填充绘制。[0081] 结合上述图1至图3所提供的方法实施例，进一步举例说明对一帧图像的绘制过程：[0082] 假设需要绘制一个400x400px大小的一个地图图像，地图使用Web墨卡托投影，每张切片的宽高是256像素，初始的时候地图级别为18级，图像中心点的地理坐标为(E116.389，N39.9)。[0083] 根据上述实施例的说明，首先要创建一个三维场景，用于绘制该地图图像，为此，先创建三维场景坐标系，以地理坐标系中的B点(E105，N30)为该场景坐标系的基准点，选择缩放级别20级为基准级别。将该B点的地理坐标转换为20级的地理平面像素坐标B0(212511403,110749815)，以B0的坐标作为场景坐标系的原点，坐标系的x轴正方向为正东方向，y轴正方向为正北方向，z轴正方向为上方向，坐标系的单位与投影后的20级地理平面像素坐标的单位一致。之后所获取的地图要素的坐标都将转换为该场景坐标系下的坐标。[0084] 在确定场景坐标系后，按照地图图像的中心点(E116.389，N39.9)确定缩放级别为18级且绘制400x400px大小地图图像所需加载的地图要素切片，比如所确定的切片有四个，每个切片对应的切片号分别为：TileA(215824,99432,18)、TileB(215824,99431,18)、TileC(215823,99432,18)和TileD(215823,99431,18)。据此向地图数据服务请求这四个切片的矢量数据，该矢量数据主要包括区域面、道路、建筑、POI标注和道路标注等地图要素数据。以下以TileA的数据为例说明绘制地图要素的过程：[0085] 假设TileA中的数据如图4所示，包括：[0086] 区域面要素A、道路要素B、建筑要素C、POI标注要素D和道路标注要素E，各个要素的具体数据内容如下：[0087] {[0088] region:[{coords:[50,50,30,150,200,150,180,150],fillColor:’#04F’}],//区域面要素[0089] road:[{coords:[40,200,220,200],strokeColor:’#F80’,width:10}],//道路要素[0090] building:[{coords:[80,100,80,130,120,130,120,100],height:36,fillColor:’#CCC’}],//建筑要素[0091] poilabel:[{coord:[125,90],text:’动物园’,iconPos:[32,0,32,32],textPos:[0,0,48,16]}],//POI标注要素[0092] roadlabel:[{coord:[125,200],text:’某某路’,textPos:[48,0,48,16]}]//道路标注要素[0093] }[0094] 其中，这些地图要素中的坐标为TileA切片中的切片内坐标，需要将其转换为场景坐标系下的坐标。具体的，根据TileA的切片号(215824,99432,18)可以算出该切片的原点20‑18 20‑18在20级的地理平面像素坐标为：(215824×256×2 ,99432×256×2 )＝(221003776,101818368),记为T0。对于一个缩放级别为18级切片的切片内像素坐标(x,y)转换为场景坐20‑18标系下的坐标的转换关系为：T0+(x,y)×2 ‑B0。据此，将TileA切片中的的地图要素中的坐标转换为场景坐标后为：[0095] {[0096] region:[{coords:[8492573,‑8931247,8492493,‑8930847,8493173,‑8930847,8493093,[0097] ‑8930847],fillColor:’#04F’}],[0098] road:[{coords:[8492533,‑8930647,8493253,‑8930647],strokeColor:’#F80’,width:10}],[0099] building:[{coords[8492693,‑8931047,8492693,‑8930927,8492853,‑8930927,8492853,[0100] ‑8931047],height:36,fillColor:’#CCC’}],[0101] poilabel:[{coord:[8492873,‑8931087],text:’动物园’,iconPos:[32,0,32,32],[0102] textPos:[0,0,48,16]}],[0103] roadlabel:[{coord:[8492873,‑8930647],text:’某某路’,textPos:[48,0,48,16]}][0104] }[0105] 在完成坐标转换后，再为每个地图要素根据WebGL的绘制过程为其创建对应的绘制数据存储对象。在该实例中先为每个地图要素至少创建一个顶点数组和一个颜色数组，其中，对于标注要素而言，颜色数组中的数据为纹理贴图的纹理坐标。之后，将数组中的数据对应存储到创建的顶点Buffer和颜色Buffer或纹理Buffer中，即绘制数据存储对象中。具体数据处理过程如图5所示：[0106] 1、对于区域面要素A，将该区域面进行三角拆分后，得到两个三角形△ABC和△ACD，将对应的六个顶点的坐标以顶点数组表示为[8492573，‑8931247,0,8492493,‑8930847,0,8493173,‑8930847,0,8492573,‑8931247,0,8493173,‑8930847，0，8493093，‑8930847，0]，颜色数据组为[0，0.25，1，0，0.25，1，0，0.25，1，0，0.25，1，0,0.25,1,0,0.25,1]。由于该区域面的颜色是相同的，因此该颜色数组中各个顶点的颜色也是一样的。之后，再将这两个数组中的数据转换为类型化数组(TypedArray)的数据，在将其存储至为该区域面要素所创建的顶点Buffer和颜色Buffer中。[0107] 2、对于道路要素B，将线型的道路AB扩展为一个区域面AA`B`B，将该区域面进行三角拆分后，得到的顶点数组为[8492533,‑8930647,0,8492533,‑8930647,0,8493253,‑8930647,0,8492533,‑8930647,0,8493253,‑8930647,0,8493253,‑8930647,0]，颜色数组为[1，0.5，0，1，0.5，0，1，0.5，0，1，0.5，0，1，0.5，0，1，0.5，0]。之后，同样将数组中的数据进行转换后存储至为该道路要素所创建的顶点Buffer和颜色Buffer中。其中，道路扩展的宽度是基于道路要素数据中的“width:10”。[0108] 3、对于建筑要素C，其平面展示时与区域面要素A的处理方式相同，而要对其进行立体展示时，需要对其各个平面进行三角拆分，该示例中假设该建筑为一立方体，因此，该建筑要素需要对其四侧面和顶面进行三角拆分并将拆分后的顶点记录到定点数组中，处理后得到的顶点数组：[0109] [8492693,‑8931047,0,8492693,‑8930927,0,8492693,‑8931047,36,//ABA’8492693,‑8930927,0,8492693,‑8930927,36,8492693,‑8931047,36,//BB’A’8492693,‑8930927,0,8492853,‑8930927,0,8492693,‑8930927,36,//BCB’8492853,‑8930927,0,8492853,‑8930927,36,8492693,‑8930927,36,//CC’B’8492853,‑8930927,0,8492853,‑8931047,0,8492853,‑8930927,36,//CDC’8492853,‑8931047,0,8492853,‑8931047,36,8492853,‑8930927,36,//DD’C’8492853,‑8931047,0,8492693,‑8931047,0,8492853,‑8931047,36,//DAD’8492693,‑8931047,0,8492693,‑8931047,36,8492853,‑8931047,36,//AA’D’8492693,‑8931047,36,8492693,‑8930927,36,8492853,‑8930927,36,//A’B’C’8492693,‑8931047,36,8492853,‑8930927,36,8492853,‑8931047,36，//A’C’D’]。[0110] 对应与各个顶点的颜色值，得到颜色数组：[0111] [0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.75,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8]。[0112] 其中，颜色数组中的最后六个顶点的颜色数据表示的是建筑顶面的颜色，为了与侧面进行区分而设置的不同颜色。将这两个数组的数据进行格式转换后，存储至为该建筑要素创建的顶点Buffer和颜色Buffer中。[0113] 4、对于POI标注要素D，在处理此类地图要素时，由于该标注的位置为一个点坐标，因此，需要基于该点分别确定所要绘制的文字和图标两部分所在的区域。其中，对于文字部分，是将“动物园”显示在一个矩形区域中，该矩形区域对应的顶点数组同样是经过三角拆分后的得到的，为：[8492873,‑8931087,0,8492873,‑8931087,0,8492873,‑8931087,0,8492873,‑8931087,0,8492873,‑8931087,0,8492873,‑8931087,0,]，颜色数组中的数据为该文字在预置文字图片中的纹理贴图的顶点位置，一般地，该预置文字图片是针对每个地图要素切片而单独设置的，假设该图片的像素为256像素，那么得到该纹理贴图对应的顶点坐标数组为[0,0,0,0.0625,0.1875,0.0625,0.1875,0]；对于图标部分，其显示区域对应的顶点数组的处理方式与文字部分相同，此处不再赘述，而对于图标的颜色数组，其纹理贴图一般是截取自另一幅图片，该图片中记录有所有图标的纹理贴图，假设该图片的大小为1024像素，那么该图标的纹理贴图的顶点坐标数组为[0.03125,0,0.03125,0.03125,0.0625,0.03125,0.03125,0,0.0625,0.03125,0.0625,0]。进而，将该POI标注要素中文字和图标所对应的顶点数组和颜色数组经格式转换后分别存储至所创建的对应顶点Buffer和纹理Buffer中。[0114] 5、对于道路标注要素E，该类要素中主要为文字，其处理方式与上述POI标注要素中对文字的处理方式相同，将展示文字的区域经三角拆分后，得到顶点数组为[8492773,‑8930567,0,8492773,‑8930567,0,8492773,‑8930567,0,8492773,‑8930567,0,8492773,‑8930567,0,8492773,‑8930567,0]，纹理坐标为[0.1875,0,0.1875,0.0625,0.25,0.0625,0.1875,0,0.25,0.0625,0.25,0]。之后，将得到的数组经格式转换后存储至为该道路标注要素创建的顶点Buffer和纹理Buffer中。[0115] 经过上述对不同类型地图要素的数据处理后，在进行图像绘制之前，还需要根据所绘制图像的地图缩放级别和中心点计算图像变换矩阵。该图像变换矩阵包括：图像平移矩阵、图像缩放矩阵和视口变换矩阵。[0116] 图像平移矩阵是将图像中心点(E116.389，N39.9)转换为20级地理平面像素坐标C0[221003656.57884443,101721335.90549469]，计算出B0(212511403,110749815)‑C0得到的结果(‑8492253.578844428,9028479.09450531)为图像的平移量，该平移矩阵为：[0117][0118] 图像缩放矩阵，由于场景坐标系中的设置的地图缩放级别为20级，而绘制图像的缩放级别为18级，计算该缩放比为218‑20＝0.25，对应得到的图像缩放矩阵为：[0119][0120] 视口变换矩阵是将图像投放到400x400px大小屏幕上对坐标进行的变换，得到的对应视口变换矩阵为：[0121][0122] 经过图像变换矩阵的计算，将得到的图像变换矩阵传入图形处理器中的预置着色器，由预置着色器根据所绘制地图要素的类型调用对应的绘制代码，在场景坐标系中根据顶点Buffer确定地图要素的位置，根据颜色Buffer或者纹理Buffer对该地图要素进行着色绘制。[0123] 如此，在完成TileA、TileB、TileC、TileD四个切片的绘制后，就完成了对待绘制地图的绘制，即绘制完一帧图像。[0124] 假设根据用户操作在下一帧图像中所绘制的图像所包括的内容为切片TileC、TileD、TileE和TileF中的地图要素，其中TileE和TileF为新增的切片，对此，在绘制下一帧图像时，只需要将TileE和TileF中的地图要素进行上述的处理流程，而TileC和TileD只需要根据新计算出的图像变换矩阵再次绘制即可。可见，通过本发明绘制的地图图像针对用户操作而逐帧绘制时，可以大量减少对于重复地图要素的坐标转换和创建绘制数据存储对象，因此，可以大幅减轻CPU的数据计算压力，提高图像的绘制效率，确保图像显示与用户操作同步。[0125] 进一步的，作为对上述图1与图2所示方法的实现，本发明实施例提供了一种地图绘制装置，主要用于高效地绘制WEB地图中所展示的地图要素，同时确保图像的地图要素在执行缩放操作时不失真。为便于阅读，本装置实施例不再对前述方法实施例中的细节内容进行逐一赘述，但应当明确，本实施例中的装置能够对应实现前述方法实施例中的全部内容。该装置如图6所示，具体包括：[0126] 切片获取单元31，用于根据待绘制地图的图像参数，获取地图要素切片；[0127] 坐标转换单元32，用于将所述切片获取单元31获取的地图要素切片中记录的每个地图要素的切片内坐标转换为预置场景坐标系内的场景坐标，所述预置场景坐标系是基于地图投影后的平面坐标系建立的三维坐标系；[0128] 数据存储单元33，用于将所述坐标转换单元32将地图要素切片中记录的每个地图要素转换的场景坐标和绘制信息存储至绘制数据存储对象中，所述绘制数据存储对象是对应所述地图要素预先创建的；[0129] 矩阵计算单元34，用于基于所述预置场景坐标系，得到目标图像变换矩阵；[0130] 地图绘制单元35，用于利用所述矩阵计算单元34得到的目标图像变换矩阵将所述数据存储单元33将所有地图要素对应的所述绘制数据存储对象中存储的数据通过图形处理器中的预置着色器绘制出待绘制地图。[0131] 进一步的，如图7所示，所述装置还包括：[0132] 监测单元36，用于监测用户是否对已绘制地图进行移动或缩放操作，若监测到，则判断已绘制地图的下一帧待绘制地图中所含有的地图要素是否存在对应的绘制数据存储对象；[0133] 若监测单元36判断存在对应的绘制数据存储对象，由矩阵计算单元34根据移动或缩放操作计算新的图像变换矩阵，并以新的图像变换矩阵作为目标图像变换矩阵，执行所述地图绘制单元35利用所述目标图像变换矩阵将所有地图要素对应的所述绘制数据存储对象中存储的数据通过图形处理器中的预置着色器绘制出待绘制地图的步骤；[0134] 若监测单元36判断不存在对应的绘制数据存储对象，返回至所述切片获取单元31，执行根据待绘制地图的图像参数，获取地图要素切片的步骤。[0135] 进一步的，如图7所示，所述绘制信息至少包括：颜色信息和/或纹理信息，则所述数据存储单元33包括：[0136] 创建模块331，用于根据所述地图要素的分类为每个地图要素创建对应的绘制数据存储对象；[0137] 数据存储模块332，用于调用基于WebGL的数据缓存接口将所述场景坐标以及对应的颜色信息或纹理信息注入所述创建模块331建立的绘制数据存储对象。[0138] 进一步的，所述数据存储单元33具体包括：[0139] 如果地图要素为区域面要素，则所述创建模块331创建包括顶点数据对象和颜色数据对象的绘制数据存储对象，将所述区域面要素中的区域面拆分为多个三角形的所有顶点的场景坐标，所述数据存储模块332调用基于WebGL的数据缓存接口将所述场景坐标存存储至顶点数据对象，将对应于所述所有顶点的颜色信息存储至颜色数据对象；[0140] 如果地图要素为道路要素，则所述创建模块331创建包括顶点数据对象和颜色数据对象的绘制数据存储对象，将所述道路要素中的道路线段拓宽为预置宽度的区域面后，再拆分为多个三角形的所有顶点的场景坐标，所述数据存储模块332调用基于WebGL的数据缓存接口将所述场景坐标存储至顶点数据对象，将对应于所述所有顶点的颜色信息存储至颜色数据对象；[0141] 如果地图要素为建筑物要素，则所述创建模块331创建包括顶点数据对象和颜色数据对象的绘制数据存储对象，将所述建筑物要素中建筑物的各个平面拆分为多个三角形的所有顶点的场景坐标，所述数据存储模块332调用基于WebGL的数据缓存接口将所述场景坐标存储至顶点数据对象，将对应于所述所有顶点的颜色信息存储至颜色数据对象；[0142] 如果地图要素为标注要素，则所述创建模块331创建包括顶点数据对象和纹理数据对象的绘制数据存储对象，所述数据存储模块332调用基于WebGL的数据缓存接口将显示所述标注要素的矩形区域的所有顶点的场景坐标存储至顶点数据对象，将预置图片中指定位置的纹理贴图对应的纹理信息存储至纹理数据对象。[0143] 进一步的，如图7所示，所述目标图像变换矩阵包括：图像平移矩阵、图像缩放矩阵和视口变换矩阵，则所述地图绘制单元35包括：[0144] 矩阵处理模块351，用于获取所述图像平移矩阵、图像缩放矩阵和视口变换矩阵的乘积；[0145] 场景坐标提取模块352，用于由预置着色器通过预置代码提取绘制数据存储对象中的场景坐标，所述预置代码是根据地图要素的分类对应编写的代码；[0146] 像素点确定模块353，用于将所述矩阵处理模块351得到的乘积乘以所述场景坐标提取模块352提取的场景坐标，确定所述待绘制地图中的地图要素所对应的屏幕像素坐标系内的像素点；[0147] 地图绘制模块354，用于由预置着色器调用WebGL的drawElements接口启动WebGL绘制管线，将所述绘制数据存储对象中的绘制信息绘制在所述像素点确定模块353确定的像素点上。[0148] 综上所述，本发明实施例所采用的地图绘制方法及装置，是应用WebGL绘图接口替代了现有使用CanvasRenderingContext2d绘图接口进行地图绘制，因此，基于WebGL的图像绘制要求，本发明实施例在预置的场景坐标系下针对不同类型地图要素的信息进行分别处理，并将对应的信息如场景坐标、颜色信息、纹理信息等保存至各个地图要素所对应绘制数据存储对象中，在对所有地图要素都处理完成后，再统一由GPU中的预置着色器逐一地对每个地图要素进行绘制，完成一帧图像的绘制。该绘制过程由于采用GPU绘制图像，因此，对于单帧图像的绘制效率要远大于使用CPU绘制的图像，这就使得在需要对连续多帧地图图像进行绘制时，本发明可以针对每一帧的变化都进行图像实时绘制并展示给用户，从而使得用户在操作过程中不会出现图像加载的卡顿现象，带给用户更为流畅的操作体验。[0149] 进一步的，本发明实施例还提供了一种存储介质，该存储介质用于存储计算机程序，其中，所述计算机程序运行时控制所述存储介质所在设备执行上述的地图绘制方法。[0150] 另外，本发明实施例还提供了一种处理器，所述处理器用于运行计算机程序，其中，所述计算机程序运行时执行上述的地图绘制方法。[0151] 在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。[0152] 可以理解的是，上述方法及装置中的相关特征可以相互参考。另外，上述实施例中的“第一”、“第二”等是用于区分各实施例，而并不代表各实施例的优劣。[0153] 所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。[0154] 在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。[0155] 此外，存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存[0156] (flashRAM)，存储器包括至少一个存储芯片。[0157] 本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD‑ROM、光学存储器等)上实施的计算机程序产品的形式。[0158] 本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。[0159] 这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。[0160] 这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。[0161] 在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。[0162] 存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flashRAM)。存储器是计算机可读介质的示例。[0163] 计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD‑ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。[0164] 还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。[0165] 本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD‑ROM、光学存储器等)上实施的计算机程序产品的形式。[0166] 以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

专利地区：北京

专利申请日期：2018-09-26

专利公开日期：2024-06-18

专利公告号：CN110956673B