资源中心

Resource Centers

2022-09-29

矢量瓦片化技术在恒歌专业版二维地图中的应用

在科技水平的高速发展、GIS技术广泛应用的当下,用户从美观、响应速度、渲染效率等方面都对二维地图提出了全方位考验。单次处理的数据量增大,矢量数据作为二维地图的基石,如何解决数据解析渲染过程中出现的问题是个难题。本文将详细讲解恒歌科技采用的矢量瓦片化技术方案。


osgEarth是一个基于OpenSceneGraph (OSG)的开源可扩展地形渲染工具包,支持常见的栅格数据、矢量数据和模型数据加载。恒歌基础版二维地图是一款基于osgEarth 开发的基础二维地图平台,地图数据加载完全采用osgEarth 的加载方式。

在栅格数据的加载方面osgEarth采用栅格瓦片的形式加载,数据的加载速度和渲染效率都比较理想。矢量数据的加载,osgEarth采用的是一次性将整个矢量文件中的全部要素读取构建为场景节点的方式,对于较小的矢量文件加载与渲染可以高效完成,但是当矢量文件较大时一次性解析所有的矢量要素在场景中进行渲染会导致加载速度慢、内存激增、渲染效率低的问题。

在矢量样式配置方面基础版二维地图只提供了点、线、面的颜色、线宽、字体等基础配置,难以通过符号化的思想配置出一副精美的矢量地图。为了解决上述矢量数据加载速度、渲染效率和地图效果等问题,恒歌科技采用了矢量瓦片技术和全新的样式配置方式,打造了一款专业版二维地图。本文将深度解析关键技术的实现,包括:矢量数据切片、地图样式配置、矢量瓦片加载与渲染。

企业微信截图_16626289868793 (2).png

△ 恒歌专业版二维地图



 1 矢量数据切片 

随着地理信息系统(GIS)技术的不断发展与完善,地图服务技术得到快速提高,谷歌地图、百度地图、高德地图、腾讯地图等在线地图服务相继出现,这些服务均采用矢量数据栅格化分块处理的方式,利用金字塔模型在服务器端缓存多分辨率的栅格切片数据,通过客户端发送地图请求范围以及服务器端返回请求数据完成网络传输。但是由于栅格切片的本质是图片,客户端获取图片后无法对原始数据进行编辑分析,地图的交互式操作能力弱、地理空间分析的能力不足,难以满足复杂的地理空间信息分析需求。

矢量数据是利用点线面的形式来表达现实世界。矢量数据由给定坐标的点构成,点可以连接成线,线可以连接成多边形,通过这三种结构来表示任何一种地理特征。矢量数据可用于数据分析和可视化,矢量数据结构紧凑,图形显示的质量高,精度准确,但是大量的矢量直接加载就会存在加载慢、渲染效率低的问题,因此诞生了矢量切片的技术。

矢量切片原理是基于四叉树金字塔模型进行切分,切片后的结果使用高效的结构化数据存储格式protobuf进行存储。矢量瓦片是由矢量数据组成的数据块,包含了渲染所需要的几何信息,相比传统的栅格切片具有样式灵活、高清显示、方便数据二次投影和数据分析等诸多优点,同时也具备了栅格瓦片的只需要请求当前视野内的数据,具有快速加载和高效渲染的优点。

四叉树金字塔模型图.jpg

△ 四叉树金字塔模型图


瓦片数据虽然在加载速度和渲染效率上具有很大的优势,但是大量的瓦片碎文件导致存储与管理十分不便。FreeXGIS Tiles DataBase(简称:TDB)是恒歌科技自主研发的一种文件型数据库存储方式,也是一种高效的瓦片数据存储文件格式,通过将大量的瓦片数据按规则压缩到一个或多个数据文件中,具有读写快、管理便捷、占用空间小等特性。

因此,在专业版二维地图中,矢量瓦片数据采用TDB的方式进行组织存储,以减少数据存储空间和提升数据迁移的速度。


 2 地图样式配置 

随着GIS行业的不断发展完善、硬件条件的不断升级和审美的提升,想要呈现一副客户满意的电子地图,不仅需要高效的响应速度和流畅的渲染效率,也需要合理、丰富、美观的地图显示要素。恒歌专业版二维地图提供对各类要素进行丰富的样式配置能力,能够制作出任意风格的二维地图。

矢量要素的类型可分为点、线和面,在配置地图风格的过程中,仅仅配置要素的基础样式只能满足基本的显示需求,若在地图缩放过程中对一些要素的样式加以动态变化,可使地图显示更加清晰、生动、美观。



要素基础样式

点要素基础样式包括:文字的颜色、透明度、字体、排列方向以及文字避让,图标的名称、颜色、透明度、避让等。

以下对文字方向、文字避让、图标避让进行简要说明:文字方向,主要设置文字沿线显示效果,效果如图1文字沿线效果所示;文字、图标避让主要处理点标绘太密集、造成遮挡、显示效果杂乱的问题。点标记不同的文字颜色、不同图标以及避让的效果如图2点标记效果所示。

  

△ 点要素基础样式



线基础样式配置:线的宽度、颜色、线型、透明度,线的贴图、末端样式、节点连接样式等,效果如下图所示。


图 3线贴图效果.png  

  

  

△ 线的基础样式配置




面基础样式配置:面的填充颜色、透明度、填充图标等样式,效果如下图所示。


图 9颜色填充效果.png  

  


△ 面的基础样式配置





要素动态样式配置

动态样式主要处理要素地图缩放过程中渐变效果,使得渲染出的地图更加真实,呈现的效果更加精美。比如,道路数据在矢量存储中基本都以线的形式存储,但实际中不同的道路宽度是不同的,而且在地图放大过程中道路呈现的效果应该越来越宽,此时用线的基础属性设置就无法达到这种效果。动态样式配置主要处理线宽渐变、文字大小、点线面颜色和透明度渐变效果。

△ 动态样式效果




 3 矢量瓦片加载与渲染 

矢量切片和样式配置是为最终可即时响应、高效渲染出一副精美地图做的前置工作。在矢量瓦片数据与样式文件准备完成后,想要呈现地图,还有一个更重要的步骤就是矢量瓦片数据的加载与渲染

OSG是一个开放源码、跨平台的图形开发包,可快速、便捷地创建高性能、跨平台的交互式图形程序,完全是由标准C++程序和OpenGL编写,充分利用STL设计模式,可直接调用显卡资源,将图形渲染性能发挥到最好。因此,采取基于OSG来实现矢量瓦片的高性能渲染工作。

实现思路为采用OSG的渲染和数据调度流程,将矢量瓦片数据与配置的样式解析成OSG的场景节点,渲染出一副专业级的二维地图。



 4 效果案例展示 

通过本方案实现的矢量地图,不管是数据的加载、渲染还是地图的精美程度都有了质的提升。


性能说明

为了测试专业版二维地图效率,本文将以1GB、4GB、16GB和40GB的原始矢量数据作为测试数据,数据介绍如表1所示、测试结果如表2所示:

表1 测试地图数据介绍

表2 地图效率测试结果



效果展示

矢量瓦片技术加上丰富样式的配置,实现了大批矢量数据在二维地图中高效、美观的展示,效果如下所示:

△ 恒歌专业版二维地图效果



更多服务

More services