WebGL在线动态地图服务框架设计

， ， ，维庆

(国家测绘地理信息局第三地理信息制图院，四川 成都 610101)

近年来，随着无线通信、计算机技术和地理空间信息技术等的快速发展，地图的承载媒介、表达形式和数据来源越来越多样化[1]。在传统地图的形式上，衍生出数字地图、网络电子地图、导航地图、VGI众源地图、机器人地图等多种形式[2-4]。其中网络电子地图得到了越来越广泛的开发和应用，为人们在现实生活中提供了极大的便利。目前网络电子地图已经不局限于地图的浏览、查询、检索等基本要求，而是面向各机关、团体和企业及大众等提供海量数据快速显示、动态更新、样式可定制等更高级的制图需求[5-6]。

目前行业内成熟的GIS产品中，为实现上述的高级地图需求，大都采用了基于金字塔的矢量切片技术[7-8]。然而，MapBox没有开放服务器端数据切片软件，用户在使用时必须将数据上传到它提供的国外服务器上，考虑数据的安全性，无法广泛地应用于国内相关GIS领域。ArcGIS作为商用软件，提供了完善的矢量切片发布功能，但其软件体系庞大、售价昂贵，大幅增加了GIS系统项目的研发成本。

为此，本文从海量数据可视化与动态更新需求角度研究基于WebGL的在线动态地图服务技术。针对矢量数据的存储、传输、渲染效率低下的问题，设计出矢量瓦片数据结构，用于提高数据存储与传输效率。在此基础上，采用基于WebGL的GPU加速技术[9-10]，研发了地图要素点、线、面绘制的着色器，提高矢量切片地图的渲染效率；同时，提出数据缓存与显示帧缓存相结合的优化策略，提升在线动态地图平台的稳定性。

1 在线动态地图平台关键技术

1.1 矢量瓦片数据的组织结构设计

在线动态地图平台具有交互性强、制图过程灵活、数据复杂多样和面向大量非专业用户的特点[11-12]，根据在线地图平台的特点和对制图数据的需求，本文采用矢量瓦片组织方式设计了在线矢量地图数据模型。矢量瓦片组织方式与传统的栅格瓦片组织原理相似[13]，首先选择等间隔格网来实现按行索引的矢量瓦片模型构建，将投影好的矢量数据按照2的基数划分成了等间隔的格网，采用网络行号和列号进行编码，赋予矢量瓦片唯一的标识，方便对矢量瓦片进行调度和信息检索。其构建过程如图1所示。

将等间隔格网与原始矢量数据进行切割处理，形成以等间隔格网为基本结构存储单元。如图1所示，与格网相交的矢量数据采用完全的数据裁切方式，把这些要素切碎，同时记录每个矢量要素被格网裁切的行列索引号，防止在客户端形成矢量的重复请求与重复绘制，降低单个矢量数据的传输压力。对于面状矢量数据，还需要将切碎形成的“冗余边”进行标示一下，如BC边，这些“冗余边”在线客户端拼接显示时不予绘制出来。同时为了提高客户端的渲染效率，考虑WebGL的渲染方式是基于三角面片的，对于面状矢量要素，将要素三角化在矢量数据裁切时完成。

基于上述表述，本文的矢量瓦片的数据组织结构如图2所示。

1.2 基于WebGL的地图要素绘制

目前常用的矢量数据渲染工具(如SVG、Canvas 2D)效率低下、地图浏览体验较差[14]。WebGL充分利用计算机硬件资源，采用GPU加速技术进行图形绘制，降低CPU消耗，提高了矢量数据渲染效率。

WebGL渲染几何图形依赖于运行在浏览器中的JavaScript和运行在WebGL系统的着色器程序[15]。其中着色器程序包括顶点着色器和片元着色器，顶点着色器用于设置图形顶点的位置，片元着色器用于设置图形绘制的颜色。在顶点着色器和片元着色器之间，还存在着图形装配过程和光栅化过程。图形装配过程将传入的顶点坐标根据需要装配成特定的几何图形，光栅化过程将装配好的几何图形转化成(内插)片元(像素)，其绘制图形的基本过程原理如图3所示。

片元着色器根据光栅化后的像素个数，逐个确定像素的颜色，最终绘制出来可见的图形。

根据WebGL渲染的原理以及地图要素展示的需要，本文研究并设计了几种基本的地图要素及符号化样式，用于进行地图展示。

(1) 方点：WebGL中默认采用绘制点形式，无需任何处理。

(2) 圆点：在片元着色器中采用内置的函数distance计算圆点中心到边缘的像元坐标距离，保留距离内的像素。

(3) 不带线宽的实线：WebGL中默认的绘制方式，线宽默认为1，线宽改变无效，无法适应Windows平台。

(4) 带线宽的实线：在WebGL中被看作为一个长条形的面，需要根据线条和线宽形成一个面，然后作三角化处理并进行可视化。

(5) 多边形面：利用数据中的顶点和三角化索引进行多边形面填充绘制，绘制多边形轮廓线时将“多余边”滤掉不绘。

(6) 图片：采用WebGL贴纹理的方式进行实现。

(7) 文本：由于WebGL没有直接绘制文本的接口，本文采取用Canvas 2D绘制成文本图片，以WebGL贴纹理的方式进行实现。

2 在线动态地图平台架构

2.1 地图平台架构设计

基于上述方案，采用B/S的三层体系结构搭建在线动态地图平台，包括应用层、渲染层和服务器层。平台体系结构框架如图4所示。在应用层，用户基于平台实现各自行业、各类业务且兼容各种显示终端的应用系统。渲染层将服务器层传输过来的矢量切片数据进行拼接并在前端进行绘制，同时为应用层个性化开发提供接口。服务器层在线动态地图平台的重要支撑，将矢量地图数据处理成矢量切片数据并发布成数据服务。

2.2 平台性能优化策略

在地图平台开发实现过程中，需要兼顾用户的操作体验，如果仅仅是简单地进行“请求-处理-渲染”，那么用户每一次平移，每一缩放都会产生大量的数据请求、处理和渲染工作量，给服务器、客户机带来庞大的运算压力，用户的操作体验极差，乃至于放弃使用。考虑平台的可用性，本文主要采取以下两种性能优化策略进行。

(1) 数据缓存策略：将每一次请求得到的矢量瓦片数据在内存中以行列号索引和层级索引为主键进行缓存并管理起来，然后根据缓存数据每次做增量请求，降低频繁操作导致的大量数据请求次数；增量请求回来的数据及时进行缓存，同时将当前显示的瓦片缓存位置置顶，超出缓存预设容量的瓦片，进行移除销毁，这样能保存内存数据不会太大的同时，用户关注范围的数据能够缓存起来，以提高平台的性能。

(2) 显示帧缓存策略：帧缓存即为WebGL的帧缓冲区对象和渲染缓冲区对象，在帧缓冲区进行绘制的过程称为离屏绘制。本文利用这一特性将地图渲染的每一帧离屏绘制成纹理图片，并及时缓存，然后以纹理贴图的方式显示给用户，原理如图5所示。

采用这种策略的目的在于优化用户在对地图进行平移、缩放时出现地图卡顿、不流畅等现象，用户在地图平移过程中尚未平移完成时，平台采用上一次的帧缓存进行绘制显示，不重新进行数据绘制，平移结束时，等待增量数据再重新绘制。

2.3 平台接口体系

本文在实现地图平台的过程中，采用面向对象的设计理念，构建Point、Polyline、Polygon、Layer、Map等对象，同时将地图的基本功能、结构封装成二次开发接口，为后续基于本平台的应用开发提供了开发接口，平台的二次开发结构如图6所示。

3 应用实例

3.1 系统设计

蒲江县“多规合一”规划信息平台是根据蒲江县发改委的需求，通过收集蒲江县发改、规划、国土、环保等部门各类规划数据，按照统一的空间基准改造后，发布成矢量切片数据服务，在上述平台总体架构设计基础上进行开发的，系统研发采用TypeScript、HTML5、CSS这3种语言。系统的体系结构如图7所示。

3.2 系统效果

通过支持WebGL的主流浏览器如Firefox、Chrome即可访问蒲江县“多规合一”规划信息系统，系统实现了各类规划数据在浏览器端的矛盾检测、冲突协调、在线编辑、动态更新，满足了多规领导小组、应用部门、运维管理部门集规划数据展示、分析、编辑与一体的Web端“一站式”业务需求。规划数据渲染如图8所示，规划数据在线编辑如图9所示。

4 结 语

电子地图在很多领域得到了广泛的应用，目前大多数电子地图的应用都是基于传统数据模型生成栅格切片来实现的，本文针对矢量数据的Web可视化场景，设计了一个基于WebGL的在线动态地图服务架构。

基于该架构设计并研发了蒲江县“多规合一”规划信息系统，结果表明该在线动态地图服务架构可以实现海量矢量数据的高效可视化及动态更新。在下一步的研究工作中，将引入矢量动态符号库，实现更为复杂的符号化矢量绘制效果，并进一步优化矢量切片技术，提高海量矢量数据的绘制效率。