矢量地图渲染技术研究

刘 杰，魏 娟

（1.江苏省基础地理信息中心，江苏 南京 210013）

目前采用的地图数据主要是栅格切片。栅格切片具有更新周期长、图片无法交互、地图风格固定、无法检索查询要素等缺点[1-2]。矢量地图是对一种或多种地图要素进行矢量化而形成的矢量化数据文件，存储的是矢量数据的描述信息，具有支持快速标注和距离计算、支持实时无级缩放和漫游、可分层显示且易于控制、支持交互式编辑、传递速度快、易于更新等优点[3]。WebGL、OpenGL等地图渲染技术的发展，推动了矢量地图渲染引擎的快速发展[4-5]。本文研究了基于WebGL的矢量地图服务引擎，实现了矢量地图数据的实时加载和渲染绘制，提高了地图显示效率，降低了系统响应时间，提供了更多地图风格样式和更好的展示效果，并已在“天地图·江苏”移动端得到了很好的验证。

1 矢量地图数据组织与配置

1.1 数据组织存储

为了提升移动端地图加载效率、支持个性化展示风格的定制编辑，“天地图·江苏”移动端在建设中采用墨卡托瓦片技术进行地图数据的组织。墨卡托投影坐标系统的基准面为WGS84，在投影过程中将椭球体近似为正球体作投影变换，比例尺越大、地物越详细。其最大的特点是可保持地物的方向和相对位置的正确性，且能使等角航线表现为直线。墨卡托投影切片，即把投影后的世界地图按照层级进行四叉树等距离切分，这种切分在地图上显示均为规则的正方形[6-8]。采用墨卡托瓦片技术进行地图数据的组织，具有缓存高效、支持渐进加载、简单易用等特点，能满足移动端地图加载、地图渲染效率提升的需求。

基于对地图数据更新机制、查询效率的考虑，“天地图·江苏”移动端建设中还采用了数据库表分区技术。数据库表分区是把一个大的物理表分成若干个小的物理表，并使这些小物理表在逻辑上可被当作一张表来使用。其具有的优势包括：

1）在特定场景下，能极大提高查询性能，尤其是当大部分经常访问的数据记录在一个或少数几个分区表上时。表分区减小了索引的大小，并使经常访问的分区表的索引更容易保存于内存中。

2）当查询或更新访问一个或少数几个分区表中的大部分数据时，可通过顺序扫描该分区表而非使用大表索引来提高性能。

3）可通过添加或移除分区表来高效批量增删数据。例如，可通过Alter Table no Inherit将特定分区从主逻辑表中移除（该表依然存在，并可单独使用，只是与主表不再有继承关系且无法再通过主表访问该分区表），或利用Drop Table直接将该分区表删除。这 两种方式完全避免了使用Delete 时所需的Vacuum额外代价。

4）很少使用的数据可被迁移到成本低、效率要求不高的存储介质中。

1.2 数据在线配置

在线数据服务与配置工具将导入到PG库中的地图数据转换为PBF数据的服务，根据不同的层级和要素，将数据按照墨卡托瓦片数据组织结构读取到Redis数据库中，实现发布导入矢量地图数据功能，支持可视化的配图编辑以及移动端调用展示。

可视化的配图编辑实现了对点、线、面图层数据样式信息和数据信息的在线配置和编辑。样式信息主要包括点、线、面要素的图标、文本、颜色、宽度等信息；数据信息主要包括对该图层要素显示的比例尺级别、数据过滤条件等信息。通过配置数据的样式信息和数据信息，实现了不同风格的个性化地图样式。“天地图·江苏”移动端主要配置了标准地图、浅灰色地图、都市黑夜地图和极夜蓝地图4种风格的 地图。

完成地图展示样式编辑后，可生成所配置地图的URL链接，用于地图的在线发布，支持在Web、Android、iOS等平台上展示，能通过地图服务API或地图SDK进行地图应用系统的开发，满足各种应用场景的需求，能轻松、快捷地集成到应用项目开发中。

2 矢量地图服务引擎

WebGL是可在浏览器体现三维画面的技术，只要支持OpenGL ES平台即可采用WebGL。WebGL标准允许将Javascript与OpenGL ES结合在一起，通过增加OpenGL ES 2.0的一个Javascript绑定，可为HTML5 Canvas提供硬件三维加速渲染，以及在任何兼容的Web浏览器中渲染高性能的交互式三维和二维图形，无需使用插件[9]。WebGL能跨平台、跨浏览器，支持桌面端、移动端、嵌入式平台，实现了真正的动态数据可视化。

矢量地图渲染采用矢量地图服务引擎作为软件开发的核心引擎。矢量地图服务引擎基于WebGL矢量渲染技术，以矢量化数据为基础数据，支持地图数据的无级缩放、旋转、倾斜，提供了丰富的配色模板，支持个性化地图的自定义编辑，具有地图数据分层管理和分类显示、专题图叠加、地图标注编辑等功能；同时提供Android SDK和iOS SDK支持移动端的地图应用开发。

2.1 功能特性

矢量地图服务引擎的功能特性为：①可提供矢量地图，实现无级缩放，并支持无损高压缩传输；②地图高度定制化，可自定义选择地理位置相关的要素，配置要素渲染效果；③支持Web、Android、iOS、大屏等多种界面，适用于多种场景展示；④使用方式灵活，支持在线调用和本地部署，数据更安全。

2.2 功能实现

1）矢量地图渲染。引擎采用矢量地图数据和矢量化的地图渲染，地图展示效果可个性化定制。

2）点标记的添加编辑。点标记是用于显著体现 一个业务点位置信息的地图要素。引擎实现了批量添加Marker、使用GeoJSON生成、圆形扩散效果标记、自定义标记点和批量删除标记点等功能。

3）测量工具。引擎实现了距离、面积测量功能，支持不规则多边形的面积测量和折线的距离测量。

4）编辑功能。引擎实现了对点、线、面等地理要素的编辑功能，包括这些要素的增加和删除等。点编辑实现了自定义设置点边框的颜色、边框宽度以及点的半径、颜色等功能；线编辑可绘制直线、圆弧、弯曲线，可自定义线的颜色和宽度，实现了对线进行合并、拆分、添加形状点等编辑功能；面编辑可绘制矩形、三角形、圆形、扇形和椭圆，实现了面的合并、拆分、形状点添加等功能，支持对面的颜色、透明度以及面轮廓的颜色、宽度的自定义设置。

5）空间位置数据的可视化展示。引擎实现了多种位置大数据的可视化展示，包括海量数据散点图、聚合图、各种类型的热力图、柱状图、迁徙图、动态粒子效果图、车辆轨迹跟踪效果图等，支持基于地理空间位置大数据分析结果的多样性可视化展示。

3 矢量地图前端渲染技术

矢量地图渲染包括在个性化地图展示风格编辑工作台和移动端的矢量地图渲染，建设中采用的核心渲染库通过图层叠加的方式进行矢量地图的渲染，从而更好地支持个性化地图展示风格配图，移动端快速显示矢量地图，地图无级缩放以及平移、旋转、倾斜、点选、数据缓存等。

矢量地图核心渲染库的技术方案包括系统架构、渲染地图数据结构和整体渲染机制。技术核心是以较低的系统资源为代价，实现地图内容的高速渲染，以保证地图元素的美观性和可读性。

3.1 系统架构

系统以OpenGL ES为核心架构，在此基础上构建渲染系统。基于渲染机制系统形成了地图渲染模型机制，最上层则是标注或覆盖物/叠加物渲染。渲染地图系统架构如图1所示。

图1 渲染地图系统架构

3.2 渲染地图数据结构

地图数据结构包括3类：①点，POI、标注数据 等；②线，道路、行政边界、地铁线路等；③面，绿地、河流、湖泊等。

3.3 整体渲染机制

地图渲染引擎从服务器端或本地获取瓦片数据，并对这些数据进行分析，转换成OpenGL SE引擎模型能识别的三角顶点数据，再将这些数据导入OpenGL引擎进行处理[10]。地图渲染引擎包括提供数据线程、数据分析线程和渲染线程，如图2所示。

图2 矢量地图渲染引擎

1）提供数据线程。该线程负责加载从本地或服务器获取的矢量瓦片，数据通过网络或I/O通道方式获取。

2）数据分析线程。该线程负责检查矢量瓦片数据，并将这些数据抽取为线、面、建筑物等。在地图渲染引擎的帮助下，该线程会将数据分解成为多个三角形，并将这些数据存储为三角顶点缓存，数据分析会使CPU运行紧张，因此该过程将放置在一个专有的线程中。

3）渲染线程。该线程负责采集Protocol Buffer中数据和数据分析线程中的结构数据，并通过渲染流水线的方式绘制这些数据。

3.4 地图元素的渲染逻辑

“天地图·江苏”移动端建设中采用了将多边形转化为三角形的逻辑机制，利用三角化多边形算法进行多边形的分解。对于简单的多边形，分解完成后的各三角形之间不互相干扰；对于复杂的多边形，则采用稍慢但更强的算法实现由多边形到三角形的转化。

OpenGL多边形填充时默认为凸多边形，而对凹多边形、自交多边形、带孔的多边形等非凸多边形的绘制不太友好，因此利用OpenGL画图时，通常需先将凹多边形分解为多个凸多边形或一系列的三角形，再进行渲染。三角化多边形算法的具体步骤为[11]：

1）利用单向循环链表保存多边形顶点，并计算该链表中每个顶点的凸凹性。

2）在循环链表中顺序取3个结点P、Q、R，若Q为凸点、且三角形PQR不包含多边形上其他顶点，则计算△PQR的特征角（三角形内最小的角）；求取所有这样的三角形，再从中选择特征角最大的△PQR进行保存，并从链表中删去结点Q。

3）若链表中不存在3个以上的顶点，则转至步骤2）。

4）由链表中最后3个顶点构成一个三角形。

4 结 语

本文重点阐述了矢量地图数据组织与配置、矢量地图服务引擎和矢量地图前端渲染技术，并在“天地图·江苏”移动端矢量地图渲染展示中得到了很好的应用。“天地图·江苏”移动端为用户提供了不同风格的个性化地图样式展示，矢量地图加载基于WebGL矢量渲染技术支撑的矢量地图服务引擎，实现了矢量地图数据的实时加载、渲染绘制，支持无级缩放、旋转、倾斜，提高了移动端地图加载的效率，缩短了数据更新周期。然而，对于复杂要素的渲染机制研究还不够深入，三维场景下的矢量地图数据渲染尚未做深入研究，在今后的工作中将继续研究矢量地图数据的渲染机制，解决二三维矢量地图一体化的渲染 问题。