基于Html5的Web Map矢量渲染技术研究

丁立国，周 斌，熊 伟

(1．信息工程大学，河南 郑州 450000; 2．68029部队，甘肃 兰州 730000)

基于Html5的Web Map矢量渲染技术研究

丁立国1，周 斌2，熊 伟1

(1．信息工程大学，河南 郑州 450000; 2．68029部队，甘肃 兰州 730000)

当下主流平台(即桌面PC，Android,IOS等)上Web浏览器都支持Html5标准。Html5的到来让Web应用的性能和易用性明显提升，其中Canvas元素是Html5标准中新增的技术之一，被JavaScript用来进行图形图像的绘制和矢量渲染。针对传统切片式Web Map存在的不足，文中以Web地图矢量渲染为研究切入点，分析一种基于JSON的地理信息数据传输格式，并使用Html5 Canvas构建矢量Web Map，即在浏览器中地理数据矢量渲染的设计和实现，兼具自定义渲染风格而无需重新请求加载图层，减少瓦片请求所需的带宽，改善Web Map实时显示的性能，探索进一步直接实现Web Map空间分析能力的可行性。

Html5 Canvas；Web Map；矢量数据渲染

随着互联大数据的快速发展，地图服务与应用愈发普遍。在线地图服务不仅成为实时交互、动态环境中的一种重要工具，而且地图也开始成为人们研究地理空间数据及与其相联接的应用平台数据的桥梁，如轨迹服务、出行服务，商业地理分析等。Web环境下地图数据通常以两种形式呈现：栅格形式和矢量形式。传统Web页面不能直接支持矢量图形渲染，只有通过安装第三方插件来完成客户端矢量数据的可视化与操作，在网络上传递地图数据的方式通常是以瓦片形式的栅格图像格式(PNG或JPEG图像)绘制的传统方法[1]，矢量数据在后台服务器上渲染成分级的瓦片图像，当用户进行Web请求时将这些图像数据提供给终端访问浏览。这项技术已被众多Web地图应用服务所使用，它可以通过预设渲染样式创建固化的底图，如百度地图、天地图、高德、OpenStreetMap、谷歌地图等。

现在智能硬件设备与网络高速发展，推动了Web新技术的普及应用，越来越多的桌面应用转到Web平台或者移动APP，其中移动APP大都也采用了基于Web服务模式开发的，属于Hybrid App(混动)类型。新一代的Html5标准已正式定稿，Html5为Web应用增加Canvas API、WebSocket和本地数据存储等各种新的特性，其中全新的Canvas API绘图方法就是为Web浏览器端矢量图形绘制而设计的，利用该API可以实现无插件的矢量数据绘制与渲染[2]。将Html5技术运用到在线地图(Web Map)服务，将为实现地图数据的矢量渲染提供了技术基础，WebSocket技术能解决Http协议下图形数据信息的网络传输瓶颈，这些Web新技术将会使在线地图服务与应用在性能和功能方面获得极大地改善，其跨平台优势将在移动互联网时代得到进一步显现。

1 Html5新特性Canvas简介

作为Html的新一代技术标准，Html5引入了一套全新的元素和属性，其中Canvas元素是专门为在绘制矢量图形而设置的绘图元素，Canvas为浏览器提供了一个绘图的API接口，JavaScript语言调用这个接口获得浏览器的绘图上下文环境(context)，将想要绘制的内容绘制到这块画布上显示在浏览器中，可动态实时绘制点、线、面、文字和栅格图像等内容，有部分浏览器甚至可支持3D绘制显示[3]。就Web Map而言，Html5的新功能在于可以在浏览器中实时矢量绘图，通过使用这种绘图方式数据渲染在客户端直接完成，而不需要在服务器上预加工，极大的减轻服务器的运算负担；通过Html标签属性和几十种内置事件响应，还支持定义JavaScript监听函数实现多种复杂操作[4]，这种操作方式将浏览器在脱离第三方插件且不需要服务器端API的支持下实现桌面客户端程序所有指令操作。

Canvas在Web页面上进行的绘图操作时，单独的一个Canvas标记只是在页面中定义了一块矩形区域，并无特别之处，只有配合使用JavaScript脚本，才能够完成各种图形、线条、以及复杂的图形变换操作。它的工作过程：首先创建一个指定大小的Canvas，并为其指定一个id，方便在JavaScript脚本中获取该DOM实例对象。声明一个Canvas节点的方式：。通过Canvas id获得对应的DOM对象，该对象调用getContext()方法获得渲染上下文。Canvas元素与渲染上下文一一对应，同一个Canvas id不管何时调用getContext()方法都只返回唯一的上下文对象。Canvas原生图形绘制只支持一种图形，就是矩形，至于所有其他的图形绘制则都是通过绘制路径的方法实现的，路径是一系列的点连接组成的，这样绘制的多条路径就构成了各种图形。如图1所示为Canvas基本要素及多种图形绘制方法。

图1 Canvas基本要素及绘制方法

要使用Canvas绘制Web Map中的地理要素时，就要使用其提供的路径绘制函数。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状点的集合，这个合集包含在一个路径列表中。本质上，路径是由很多子路径构成，所有的子路径(直线、圆弧或圆、贝塞尔曲线等)构成图形。绘制路径时使用beginPath()新建一条路径，图形绘制命令被指向到该路径上，然后可以使用moveTo()、lineTo()绘制直线、arc()绘制圆弧或者圆、bezierCurveTo()等绘制曲线等等，完毕后调用closePath()结束图形绘制,最后调用fill()、stroke()进行填充或者设置边框等完成图形属性绘制。Canvas在图形绘制方面是像素级管理，Canvas的路径绘制方法能充分满足矢量数据中的点要素、线要素、面要素以及符号的表达要求。

2 地理要素数据格式编码

地理实体对象根据OGC的要素规范和一般性地理要素研究通常分为：点状要素、线状要素、面状要素、标注要素[5]。矢量化地图就是由这一系列的点线面对象构成的，因此在Web传输与客户端解析矢量数据时，需要使用地理要素的数据模型或数据结构来描述这些点、线、面(多边形)对象。这些对象由一系列有顺序的坐标描述，这些对象具有地理要素属性。在Web应用中，常用的数据传输格式有：二进制，文本，JSON，XML等。考虑数据格式规范性、地理要素编码以及客户端解析等因素，二进制、文本无法满足数据表达以及规范性要求，不予以考虑。JSON与XML都是为Web应用开发提供的一种数据交换格式[6]，JSON与XML都可以编码地理信息数据，两者之间的差异是JSON数据能被客户端脚本JavaScript操作直接解析成可识别的地理信息数据，不需要设计专门的解析方法进行解码，而XML则需要针对编码设计专门的解码操作。因此，本文选择JSON格式作为Html5 Canvas展现地理信息的数据格式。

JSON在地理数据表达方面有特定的子类格式为GeoJSON，GeoJSON是结合各种地理要素数据特点而设计的一种JSON编码。它支持以下几何类型：Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon和GeometryCollection[7]。GeoJSON不仅具有JavaScript原生支持、表达地理数据语义完整等特点，而且可读性高、可扩展性强，可以根据原有数据语义进行自定义要素。GeoJSON数据编码格式中没有对图层进行描述，而在地图设计中通常采用以图层为单位的对不同的地理要素分层分类组织，因此在原有编码格式的基础上增加了图层元素的描述，既便于对每一层地理要素绘制设计具有共性的绘图方法，也便于数据渲染后对不同的要素层进行显示控制。图2展示了文中基于GeoJSON表达线状地理要素的数据结构，图中描述了包含边界范围、要素序号、所在图层、连续的坐标值等多种属性信息。

图2 GeoJSON表达地理要素数据结构

3 Web Map矢量渲染方法

Canvas在客户端地图渲染是实时的，因此在显示速度上明显的优势；展现地理数据可以分层显示具有一定的灵活性；客户端数据是原始矢量文件，基于数据分析互操作性高。客户端实时绘图的流程：从服务器获取GeoJSON数据，客户端对数据格式进行解析，将矢量实体的地理要素从GeoJSON解析为JavaScript对象，根据该对象中包含的数据信息，调用坐标转换对象，将地理坐标转换成Canvas显示区域里的屏幕坐标，最后调用Canvas API以及设计的符号类库函数实现地图的绘制与显示。

3.1 Canvas地理坐标转换

坐标转换原理，将要显示的地理区域的中心点和浏览器中视图中心点进行配对，绘图时先计算地理要素坐标与地理中心点的偏移差值，将该差值换算到对应显示比例尺的距离，根据该距离计算实际的屏幕坐标，最后将屏幕坐标交给Canvas进行绘制。据上所述得到地理坐标转换到屏幕坐标公式：

ptWnd.x=View_center.x+(long)((ptGeo.x-geo_center.x)/scale);

ptWnd.y=View_center.y-(long)((ptGeo.y-geo_center.y)/scale );

上述公式中ptWnd代表屏幕坐标，View_center代表屏幕中心点坐标，ptGeo代表地理要素的坐标，geo_center是地理中心的坐标，scale是当前比例尺。当要显示的地理范围和窗口的比例不一致时，需要分别计算水平和垂直的比例尺，然后数值较大的作为比例尺，也就是说比例尺的调整向着地理区域更小的方向进行调整，让地理区域和绘图视口的比例一致。经过上述计算，可以将任意一点的地理数据编码中的地理坐标转换为视口的屏幕坐标，再调用下文所述的绘图类库函数进行绘制。

3.2 Canvas实现地图绘制API设计

针对自定义的GeoJSON地理数据格式编码结构设计了地图绘制类库，以实现对GeoJSON文件在浏览器端的快速绘制与显示，核心设计包括两部分，图层、地图类(mapLayer)与地理要素绘制类，图3为Canvas实现地图绘制类库设计图，其中图层与地图类(mapLayer)构造地图显示区域，是地图渲染与绘制的基础，主要功能：设置画布尺寸与绘图比例、图层控制，调整控制地理要素叠置顺序等。mapLayer类中实现多个绘制函数，如管理和控制图层、坐标转换、重绘视口刷新等，当对地图进行了缩放、平移等操作时引起地图需要重绘时，就调用图层中绘制函数drawGraphic()将实体重新渲染在地图显示区域中。

地理要素绘制类设计根据地理要素进行分类设计，以适应不同的地理要素绘制方法，主要包括点状实体类、线状实体类、面状实体类和标注实体类，采用面向对象设计方法。抽象实体类主要用于表示地理要素四类实体的公共属性与方法，不能实例化但可以被实体类继承。在抽象实体类设计时为每一个实体声明了渲染样式，用于地图风格配置称为MCSS文件，该样式文件参照Html页面的CSS文件结构以及定义方式，读取该自定义的样式用于初始化各个地理要素的配色风格。该样式文件内定义：道路线型的颜色(RGB)、粗细(lineWidth)、透明度(opacity)，内部填充样式(fillStyle)等。点状实体类绘制对象为点状要素，其绘制过程只需根据点状符号的基本属性信息将其变换为地图显示所需要的大小、方向和位置即可，调用Canvas函数进行绘制显示。线状实体类用来绘制具有方向性延伸的线状地理要素，线状要素的坐标是经过合理的抽象而得到的离散坐标点的合集。在地图应用中通过使用不同线型来表达各种线状要素，因此，在线状实体类中增加数组(dashArray)，用于描述按照数组中定义的规律将要素绘制成不同的线形。各段线型绘制的连接部需要进行接头处理，为保证整条线状的光滑度接头处采用的方法是，先算出接头处两个点的中点，然后将该中点分别与两个连接点计算中点，将两个中点分别与两个连接点交叉连接，计算两条线段的延长线的交点，将该交点作为控制点，使用Canvas贝塞尔曲线函数绘制曲线，这样就实现了接头处的光滑处理。线状实体类的绘制函数drawLines()是主要实现是由Canvas路径绘制函数组成，其他属性以及绘制样式都是继承于抽象实体类。面状实体类是绘制地理空间上占用一部分区域的实体。在Canvas中面状实体和线状实体的实现方法有部分相似，线状要素类在线型绘制完毕后只是调用stroke()函数进行描边，而面状实体则需要对线型包含的区域调用fill()函数进行样式填充。填充分为单色填充、渐变填充、图案填充。单色填充在fillStyle属性设定颜色值调用函数直接填充；图案填充与渐变填充相似，先使用linearGradient()函数创建线性渐变对象或者图案填充对象，然后将创建的对象作为过渡属性设定到样式文件中，调用fill()函数填充。标注实体类是使用的文字或者数字标示地图要素的名称和属性特征，标注实体类也是从抽象实体类中继承而来的，除了通用属性和操作之外，增设了字体font、字号fontSize、对齐方式textAlign等属性信息。标注实体类和点状实体绘制实现步骤基本相同，在图层类上增加标注图层，调用drawFonts()函数向图层上增加标注，该函数对实现增设的属性信息进行了封装，文本描边使用strokeTexts()函数，文本填充使用fillTexts()函数。

3.3 系统设计与实现

本文构建了Web Map系统验证前述基于Html5矢量地图渲染技术，该实现平台采用Html+JavaScript编程实现，不依赖第三方插件。实验平台运行环境为LAN内网，在Windows 2008 Server上搭建服务，客户端的Http访问请求服务由IIS提供，主要实现了地理要素数据传输，客户端数据解析，矢量地图数据渲染。地理要素数据采用GeoJSON格式Unicode编码文件储存，测试数据为郑州地区局部数据，客户端对数据解析后，直接调用上述设计的API方法绘制，绘制后有明暗两种显示风格可以切换。与传统Web Map相比，实验系统的跨平台能力明显提高，能充分利用现在客户端硬件的优势，一次请求后再客户端实时绘制，在可视化效果相当的情况下，实验系统的客户端一些本地化操作，无需频繁发送数据请求直接在本地进行数据分析或提取，加载效率明显高于传统方法，同时减少了对网络带宽的占用，减轻了服务器的负载，具体性能指标还需进一步研究与分类对比测试。图4和图5所示，明暗配色两种风格矢量地图渲染效果。

图3 Web Map矢量绘制方法类结构

图4 Web Map矢量数据渲染明亮风格

图5 Web Map矢量数据渲染深色风格

4 结束语

本文对Html5 canvas技术进行分析的基础上，探讨了使用GeoJSON格式对地理要素数据进行分类与编码，根据点、线、面状、标注地理要素的特点，设计了客户端数据解析与渲染方法，实现了风格可配置的矢量Web Map实时绘制。通过基于Html5的Web Map的实现，验证了Html5技术在地理信息中的应用价值，无需依赖第三方插件便可以兼容多平台多系统，实时矢量数据传输与动态绘制技术将有效改善目前栅格在线地图的不足，为下一步实现在浏览器端进行地理空间分析提出了可行性，将会是浏览器或移动终端实现地理定位与导航的有效手段，丰富在线地图浏览器端的应用，这样技术的普及极有可能创造出改变现有网络地图的商业应用模式，具有一定的理论和实际研究价值。

基于Html5的Web Map进行了初步探讨和实验阶段，还有待于下一步继续深入研究，本文实验系统实现的矢量绘图区域范围较小，在地理要素选择上经过优化和精简，在线传输的矢量数据文件也相对较小。如果矢量数据文件较大时，会涉及到矢量数据渐进式传输，就需要分级、分块、分批次缓冲传输，系统渲染速度也会受到一定程度的影响，绘制效率将降低，如何提高大范围内的数据传输以及渲染绘制将是下一步研究的方向与内容。

[1] 徐卓揆.基于Html5、Ajax和Web Service的WebGIS研究[J].测绘科学,2012,37(1):145-147.

[2] 岳鹏磊,李连民,李昌清,等.基于Html5的网络地图研究与实现[J].无线互联科技,2015,1(2):38-40.

[3] 闵东龙.基于Html5的矢量电子海图服务研究[D].大连：大连海事大学,2013.

[4] 周玲芳,李长云,胡淑新,等.基于Html5的WebGIS实时客户端设计[J].微型机与应用,2015,34(16):66-69.

[5] 周爱武,于亚飞.基于WebSocket和GeoJSON的WebGIS的设计与实现[J].计算机技术与发展,2011,21(2):62-65.

[6] 吴磊,张福庆.基于Html canvas的WebGIS客户端技术研究[J].地理信息世界,2009,6(3):78-82.

[7] 张俊涛,王蜜蜂,李晓明,等.基于Html5的HeatMap Web专题地图研究[J].测绘与空间地理信息,2012,35(5):214-218

[责任编辑：李铭娜]

Research on vector data rendering of Web Map by using Html5

DING Liguo1，ZHOU Bin2，XIONG Wei1

(1.Information Engineering University, Zhengzhou 450000,China; 2.Troops 68029, Lanzhou 730000,China)

Now the web browsers ( such as PC, IOS, Android, etc.) support Html5, which promotes deeply the performance and the usability of web. The canvas element is one of the new technologies in Html5, which can be used to draw graphical images and render vector data by JavaScript. In view of the shortcomings of traditional title map, this paper takes the vector rendering technology of web map as the research point, analyzing JSON-formatted GIS data and using Html5 canvas to construct vector Web Map. The geographic vector data is real-time rendered in the browser, the customized style needs no reloaded map layers which can lighten the pressure on bandwidth and improve the real-time performance of Web Map. So the ability of spatial analysis of Web Map can be further achieved.

Html5 Canvas; Web Map; vector data rendering

2016-07-20

国家自然科学基金资助项目(41271393);地理信息工程国家重点实验室重点基金资助项目(SKLGIE2014-Z-4-1)

丁立国(1983-)，男，工程师，博士研究生.

著录：丁立国，周斌，熊伟.基于Html5的Web Map矢量渲染技术研究[J].测绘工程，2017，26(8)：62-67.

10.19349/j.cnki.issn1006-7949.2017.08.013

P231

A

1006-7949(2017)08-0062-06