矢量瓦片地图关键技术研究

地理空间信息GEOSPATIALINFORMATION2017年8月第15卷第8期Aug.,2017Vol.15,No.8doi:10.3969/j.issn.1672-4623.2017.08.收稿日期：2017-02-06。矢量瓦片地图关键技术研究陈举平1，丁建勋1（1.珠海市测绘院,广东珠海519015）摘 要：针对栅格瓦片地图在高清屏显示、数据更新、与用户互交等方面存在的性能瓶颈，引入能解决上述问题的矢量瓦片地图。介绍矢量瓦片地图技术实现原理、数据标准，对矢量瓦片的数据组织模型、数据编码规则和地图渲染引擎的关键技术进行阐述，提出天地图·珠海提供矢量瓦片地图服务的技术思路。关键词：矢量瓦片；地图；天地图；Mapbox；WebGL中图分类号：P208文献标志码：B文章编号：1672-4623（2017）08-0044-04013近几年计算机技术快速发展，特别是浏览器渲染技术（如WebGL）的出现，让浏览器可以借助系统显卡展示2D和3D地图，还能创建复杂的导航和数据视觉化效果，矢量瓦片地图逐渐被各地图服务平台采用[1]。1 矢量瓦片地图1.1 矢量瓦片地图服务的原理矢量瓦片类似于栅格瓦片，以多层次模型将矢量数据分割成为矢量要素描述性文件存储于服务器端，在客户端根据指定的样式进行渲染绘图。矢量瓦片与栅格瓦片的不同之处是单个矢量瓦片存储投影在一个四方形区域的几何信息和属性信息，而不是预先渲染的栅格图片。矢量瓦片地图的实现模型如图1所示。首先需要将矢量数据的几何信息和属性信息分割为一组矢量瓦片存储在服务器端，客户端根据地图显示范围和样式文件定义的数据源通过分布式网络获取矢量瓦片、地图标注字体、图标等数据源，然后根据样式文件定义的地图表达规则在客户端即时渲染输出地图。1.2 矢量瓦片数据标准目前矢量瓦片尚无统一数据标准，Mapbox基于Googleprotocolbuffers制定的开源矢量瓦片数据标准MAPBOXVECTORTILESPECIFICATION，是目前较为通用的矢量瓦片数据标准，已被多个公司和组织采用[2]。早期Mapnik也制定了矢量瓦片数据标准（mapnik-vector-tile）[3-4]。2 矢量瓦片地图关键技术2.1 矢量瓦片数据的组织矢量瓦片数据组织可分为两个层次：①地图表达范围内的瓦片数据集组织模型；②单个瓦片内要素的组织模型。2.1.1 瓦片数据集的组织模型矢量瓦片数据集的组织模型可参考栅格瓦片金字塔模型；可通过自定义矢量瓦片的大地坐标系、投影方式和瓦片编号方案实现任意精度、任意空间位置与矢量瓦片的对应关系[5]。为了与目前的栅格瓦片相关服务规范（如：OGCWMTS等）相兼容以及便于将矢量瓦片地图服务器客户端1.客户端请求显示范围内的数据源2.服务返回所请求的数据源3.客户端根据样式文件定义的表达规则在本地渲染输出地图定义矢量瓦片数据源和地图表达规则的样式文件矢量瓦片字体文件图标等数据源输出的矢量瓦片地图图1 矢量瓦片地图的实现模型·45·第15卷第8期矢量瓦片转换为栅格瓦片，矢量瓦片一般采用与栅格瓦片相同的投影方式和瓦片编号方式。以Mapbox矢量瓦片为例，其默认的大地坐标系为WGS-84，投影方式为球面墨卡托（WebMercator），瓦片编号采用Google瓦片方案[6]。因此，Mapbox矢量瓦片的大地坐标系、投影坐标系、像素坐标系和瓦片坐标系与栅格瓦片一致，如图2所示。各缩放级别下瓦片的数量和单个瓦片代表的空间大小如表1所示。XY(20037508.3427892,20037508.3427892)(-20037508.3427892,-20037508.3427892)XYXYZ=0,256×256Z=1,512×512Z=1,1024×1024Z=0Z=1大地坐标系单位：经纬度WGS84（EPSG:4326）投影坐标系单位：mEPSG：3785/EPSG:900913像素坐标系单位：像素瓦片坐标系X=列数，Y=行数，Z=层数图2 矢量瓦片地图的坐标系统表1 各缩放级别下瓦片的数量和单个瓦片的大小对照表                       缩放级别瓦片金字塔数量瓦片大小/°瓦片大小/m01×1=1360°×170.1022°40075016.6855784×40075016.685578412×2=4180°×85.0511°20037508.3427892×20037508.342789224×4=1690°×42.5256°10018754.1713946×10018754.1713946n2n×2n=22n360/2n°×170.1022/2n°40075016.6855784/2n×40075016.6855784/2n2.1.2 单个瓦片内要素的组织模型单个矢量瓦片在逻辑上可以通过图层组织要素信息。每个图层所包含要素的几何信息和属性信息在逻辑上分开存储。以Mapbox矢量瓦片为例，其逻辑存储结构如图3所示。几何要素分为点、线、面和未知要素类。其中未知要素类是Mapbox特意设置的一种要素类型，解码器可以尝试解码未知的要素类型，也可以选择忽略这种要素类型的要素。元数据信息又分为图层属性和要素属性。每块矢量瓦片至少包含一个图层，每个图层至少包含一个要素。矢量瓦片图层几何要素元数据信息点、多点线、多线面、多面未知要素图层属性要素属性图3 矢量瓦片的逻辑存储结构矢量瓦片的物理模型是瓦片属性信息和位置信息在存储过程中的具体表现形式[4]。描述矢量瓦片属性信息和几何位置信息的文件常有:GeoJson（.json）；TopoJSON（.topojson）和GoogleProtocolBuffers(PBF)。其中GeoJSON是一种基于Javascript对象表示法的地理空间信息数据交换格式，易于阅读，通用性强，大多数软件可以直接打开，但存储地理数据较多时易产生冗余信息。TopoJSON是在GeoJSON基础上对共享边界几何要素拓扑编码,减少冗余信息的一种优化数据格式，被Mapzen推荐作为矢量瓦片的存储格式。GoogleProtocolBuffers（PBF）是一种轻便高效的结构化数据存储格式，Mapbox矢量瓦片采用PBF格式组织单个瓦片内要素的信息。为了便于矢量瓦片数据集的网络传输和数据库存储，可以将矢量瓦片数据集打包生成矢量瓦片包，常用的有ArcGIS矢量瓦片包（VTPK格式）和可存储到SQLite数据库的MBTiles格式等。2.2 基于Google Protocol Buffers矢量瓦片的编码规则Mapbox矢量瓦片采用GoogleProtocolBuffers进行编码，相比GeoJSON格式的矢量瓦片文件体积更小，解析速度更快。2.2.1 几何信息编码GeoJSON格式的矢量瓦片文件纪录要素几何信息一般采用原始经纬度坐标。PBF格式的矢量瓦片存储几何信息所用坐标系定义为以瓦片左上角为原点，X方向向右为正，Y方向向下为正，坐标值以格网数为单位。单个矢量瓦片默认的格网数为4096×4096，即使4K（屏幕分辩率为4096px6为160px）的高清屏上只显示一张矢量瓦片也不会出现类似于栅格瓦片的锯齿效果。屏幕分辨率越高，可以提供相应的提高瓦片格网数量，以精确记录瓦片内要素的几何位置信息。陈举平等：矢量瓦片地图关键技术研究地理空间信息·46·第15卷第8期假定一张矢量瓦片格网数定义为20×20，瓦片的左上角是坐标原点（0,0），如图4所示。该瓦片内的一条红色线要素的3个顶点坐标分别为1（2，2）、2（2,10）、3（10,10）。首先将线要素的几何信息转换为指令集表达，然后再将指令存储为32位无符号整数存储到PBF文件中，如图4所示。X0,0123510152051015201MoveTo(+2,+2)2LineTo(+0,+8)3LineTo(+8,+0)指令集编码:[94418016160]====相对地LineTo(+8,+0)==连接到点(10,10)||====相对地LineTo(+0,+8)==连接到点(2,10)|`[00010010]=commandid2(LineTo),commandcount2|===相对地MoveTo(+2,+2)`[00001001]=commandid1(MoveTo),commandcount1瓦片坐标系指令集表达：Y图4 矢量瓦片的几何信息编码2.2.2 属性信息编码PBF格式的矢量瓦片要素属性被编码为tag字段中的一对整数。如图5所示，左侧为原始Geojson格式表达两个要素的属性信息格式，右侧为PBF格式。要素1的属性字段“hello”，属性值为“world”，在PBF格式中用一对整数“0,0”表示，第一个整数表示key在其所属图层的keys列表中的索引号（以0开始）；第二个整数表示value在其所属图层的values列表中的索引号（以0开始）。通过比较可以发现，存储大量的重复字段名称和属性值的要素信息时，PBF格式能够很好地避免重复信息的产生。2.3 矢量瓦片地图渲染引擎OpenGL、WebGL等客户端图形渲染技术的发展，推动了地图渲染引擎的快速发展。WebGL是一项可以在浏览器中流畅展示3D模型和场景的一种技术，它使用javascript作为编程语言，调用浏览器支持的3D绘制函数，来实现3D模型和场景的展现。因为浏览器实现了OpenGLES的规范，这套规范可以直接使用指令操作显卡，使显卡渲染的3D世界，直接反映到浏览器中。WebGL视觉成像原理如图6所示，客观世界的地物通过计算机能识别的编码规则定义为虚拟的3D模型，通过一组参数改变视点（Camera）位置实现不同角度虚拟的3D模型在显示屏上成像输出。图6 WebGL视觉成像原理OpenGL、WebGL是底层3D绘图技术标准，为了便于地图的渲染输出，Mapzen采用Tangram作为地图渲染引擎。Tangram是一个开源的3D渲染引擎，专门用于绘制地图，使用OpenGL图形API。它能够解析各种来源的矢量数据，然后在客户端实时渲染生成带有几何图形、文字标注、图示符号的3D场景地图[7]。Tangram提供了两种开发包：浏览器渲染引擎（Tangram-JS）和移动终端渲染引擎（Tangram-ES）。Mapbox采用MapboxGL作为地图渲染引擎，类似于Tangram，提供了浏览器渲染引擎（MapboxGLJS）和移动终端渲染引擎（MapboxGLNative）[8]。Mapbox样式文件是定义地图视觉效果的Json文件，它定义了绘制地图数据源、绘制顺序以及绘制样式等规则。根据样式文件的信息，利用MapboxGLJS可在浏览器中实时渲染出互动性强的3D场景地图。在HTML中插入如图7所示的Javascript代码，便可实现矢量瓦片地图实时渲染输出。Geojson格式PBF格式0120123图5 矢量瓦片的属性信息编码·47·第15卷第8期!DOCTYPEhtmlhtmlheadscriptsrc='='='stylesheet'//headbodydivid='map'style='width:400px;height:300px;'/scriptmapboxgl.accessToken='youraccesstokenhere';varmap=newmapboxgl.Map({container:'map',style:'mapbox://styles/mapbox/streets-v9'});/script/body/html{version:8,name:MapboxStreets,sprite:mapb