基于地图制图脚本的交互式图例动态生成方法

蔡苑彬，刘 露，陈 荦，熊 伟，陈宏盛

（1.国防科技大学 电子科学与工程学院 信息工程系， 湖南 长沙410073）

基于地图制图脚本的交互式图例动态生成方法

蔡苑彬1，刘 露1，陈 荦1，熊 伟1，陈宏盛1

（1.国防科技大学 电子科学与工程学院 信息工程系， 湖南 长沙410073）

现有图例生成方法依靠人工编辑生成静态图例，无法根据地图视口内容的变化而动态改变，给图层丰富、样式复杂的地图交互带来了不便。针对上述问题，提出一种基于地图制图脚本的交互式动态图例生成方法，通过解析脚本，筛选内容、生成图例等步骤，根据地图视口内容自动生成图例。

脚本制图；图例；自动图例；移动互联网；互联网GIS

互联网GIS中图层信息量不断增加，内容动态性不断增强，相对于传统的静态地图而言，如何动态生成互联网地图的图例成为一个重要问题。

OpenStreetMap开放了全球的街道数据，降低了大众制图的门槛；MapBox采用脚本化的地图制图模式，探索出网页制图的最佳方式。随之，脚本化地图制图模式在移动互联网时代逐渐兴起，成为互联网GIS富有前景的技术之一。但是，目前主要的移动互联网GIS中，已有的图例存在动态性不足的问题。ArcGIS Online的图例是静态的，它无法根据地图视口内容的变化而变化；MapBox的图例依赖人工编辑代码，无法自动生成；OpenStreetMap制作的图例具有很好的动态特性，但是没有提供生成图例的接口。

针对上述问题，提出了一种基于地图制图脚本的交互式动态图例生成方法，并通过在某交互式Web地理信息系统中的应用实例来验证方法的可行性。

1 研究现状

1.1 电子地图中的图例生成方法

在传统的GIS软件中（如ArcGIS），系统通过简单的人机交互后，可以自动生成地图图例。但是，生成的图例更多是为传统纸质地图服务的，无法根据地图视口不断变化而动态地改变自身内容。

OpenStreetMap为它的标准地图数据制作了动态图例——随着地图视口尺度的缩放，图例内容会相应地改变。但它并没有提供图例生成的接口，用户无法为自己的地图生成图例。

总之，传统的图例生成方法不能同时解决两种情况下的问题：①地图内容不断变化的情况，即地图中的图层有可能动态增删，图例也应该产生相应变化；②地图视口不断变化，图例应该根据视口中的地图内容动态变化。

1.2 脚本化制图

脚本化制图是指采用脚本描述语言来定义地图中各要素的制图样式，并通过脚本解释引擎软件将脚本描述转化为实际的制图命令。Open Geospatial Consortium（OGC）在2000年制定了Web Map Service（WMS）标准[1,2]，其中Styled Layer Descriptor（SLD）制定了描述地图样式的标准。在该标准中，地图被定义为由样式化图层按照一定的次序叠加形成的对象。一个样式化的图层则是由一个图层以及描述该图层绘制样式的信息组成。按照这种定义，一个地图可以表示为 ：其中，Layer为一个图层；Style为图层的样式。

Mapnik（开源的地图绘制引擎）的作者Michal Migurski，受SLD思想的启发，提出将地图的绘制信息表述为（Layer，Style)元组的集合，并用XML编码表示。地图绘制引擎通过读取xml文件进行地图绘制。但用xml文件描述地图样式仍然过于复杂，不利于用户编写。最后，Michal Migurski借鉴CSS的语法，编制了制图脚本语言CartoCSS，进一步简化了地图样式的描述。

随着脚本制图技术的发展，出现了若干基于脚本制图的系统，如采用Geo-graphic Style Sheets脚本的Cartagem[3]和使用MapCSS脚本的OpenStreetMap。

2 地图制图脚本语法建模

地图制图脚本有2种基本组成要素——选择器和声明语句。其中，选择器定义地图制图操作的主体对象，例如地图、图层、带过滤条件的对象集等；声明语句定义该主体对象的具体制图样式。语法结构可以用下面的代码描述。

Selector {

Declaration;

Selector {

Declaration;

}

}

其中，Selector为选择器，Declaration为声明语句。

以CartoCSS制图脚本为例，以下是一个将“highway”线图层中class为1的线对象绘制为红色的脚本示例。其中，选择器有两个：一为highway图层，用#highway表示，二为属性class为1的线对象，用[class=1]表示；声明语句为“line-color=#ff0000”，表示颜色为红色的线样式。

# highway {

[ class=1] {

line-color = #ff0000;

}

}

通过总结分析，制图脚本的语法特征可以用下面的式子来建模：

其中，Style表示一个绘制样式——描述对象的某种绘制属性。StyleSet（样式集）定义为一个选择器及其内部所有声明语句组成的集合。声明语句可以是一个样式，也可以是一个样式集。

3 图例生成方法

方法的总体思路是为每个地图符号生成一个图例单元，再将所有的图例单元组成最后的图例。图例单元是一个地图符号的注解，它由一个地图符号以及描述该符号的文字组成。具体由下面四个步骤实现。

3.1 脚本的解析

从脚本的第一个样式集开始，把它的选择器及其内部的非样式集的声明语句归到一起，形成元组：

它代表一个制图对象以及制图对象的制图样式。它在语义上表示一个地图符号，包含了生成一个图例单元所需的信息。因此，解析脚本的目的就是从脚本中提取所有这样的元组。

对于样式集里面的选择器，它表示的制图对象是其所有父选择器与自身的交集，因此为：

其中n为父选择器个数。用式（4）替代式（3）中的Selector，可以得到：

显然，式（3）是n=1时式（4）的一种特殊情况，可以一并表示为式（4）。为了方便表达，我们把式（4）定义的元组称为 “基本样式集”。

3.2 图例单元的筛选

经过§3．1得到的基本样式集包含了整幅地图的图例单元。但是，从交互友好性的角度出发，最好只显示与当前地图内容相匹配的图例单元。为此，需要将不属于当前地图视口的图例单元筛选掉。文章提出以下3种图例单元的筛选方法。

1）利用地图视口的缩放尺度筛选。在基本样式集中，选择器可以是带有尺度筛选条件的制图对象，其尺度筛选条件表示为[min,max]。min为图例单元生效的最小尺度；max为最大尺度，满足0≤min＜max＜∞。如果当前尺度cur满足（max-cur）*（min-cur）＜0，则保留。

2）利用地图视口范围筛选。为了减少计算复杂度，这里以图层为单元进行筛选。如果一个图层与当前地图视口没有交集，则隶属于该图层的图例单元都不予保留，否则全部保留。

3）利用样式类型筛选。遍历基本样式集中的样式，如果其中包含有非空间数据的样式（没有图例单元与之对应），就筛选掉该基本样式集，否则保留。

3.3 图例单元的生成

图例单元由一个地图符号以及描述该符号的文字组成。因此，它可以表示为下面的数据结构：

struct legendItem {

img symbol;

string note;

int type;

}

其中symbol是符号的图像；note是说明符号含义的文字；type表示图例单元的类型，0表示图例单元的符号是图层的默认符号，1表示其他情况。type字段用于排版，它可以根据排版需求设定更多的类型。

这一步要为§3．2筛选出来的基本样式集生成图例单元结构（legendItem），也即生成地图符号（symbol）、符号注解（note）和类型（type）3个字段。

矢量数据有点线面3种类型，分别需要“点、线、面”3个模板来绘制其符号；栅格数据的图例只包含色彩信息，可以用面模板绘制。因此，绘制地图符号，需要点线面三个模板（其中点模板为只包含一个点的矢量数据）。

生成地图符号图像的过程为：从基本样式的选择器中获取它所在的图层。然后根据图层的数据类型，将对应的数据模板以及样式交给制图引擎，由制图引擎绘制符号图像。过程如图1所示。

图 1 符号图像生成流程图

生成符号注解和类型的过程为：遍历基本样式集的所有选择器。如果其中包含带属性过滤条件的对象，说明图例单元描述的是图层中符合某种属性特征的空间对象，其符号注解表示为所有属性过滤条件的交，类型标记为1；否则，说明图例单元描述的是图层的默认符号，其符号注解用图层名表示，类型标记为0。

3.4 图例的html表达

这一步先生成每个图例单元的html，再将它们合并到一个html中，形成最终成果。

1）生成图例单元的html。根据图例的设计方案编写图例单元的html模板，用特殊的符号标定symbol和note的位置。再用图例单元中对应的字段替代标定的符号，生成图例单元的html。举例如下：

template[0] =”＜div> ＜img src= ((symbol))> ((note))＜/div>”

template[1]=”  ＜div> ＜img src= ((symbol))> ((note))＜/div>”

如果图例单元的class为i，选择template[i]作为模板。先将图例单元的symbol图像转为base64字符串，并取代模板中的“((symbol))”；再用图例单元的note字符串替换模板中的“((note))”。

2）合并图例单元html。利用类似的方法，先设计图例的html模板，然后将图例单元的html添加到标记的位置，生成最终的html。

4 方法实现与验证

本文方法是根据高性能地理计算平台HiGIS[4]的需求提出来的。HiGIS提供了脚本地图制图的环境，用户通过编写CartoCSS脚本来设定地图样式。实验程序以后台服务的形式集成到HiGIS中，并向前端提供http接口。对于一幅制作好的地图，实验程序可以根据前端发送的地图视口范围和缩放尺度等信息生成地图图例，并返回给前端绘制。下面通过两个例子来说明方法的可行性。

图2的两幅图是在HiIGIS平台上利用OSM数据制作的中国街道地图的截图。两幅图分别对应于Tile Web Service （TMS）划分的第11、12层。从图a到图b，地图进行了放大操作。二级公路由原来的黄色变成了灰色，更低级的道路被绘制出来。同时，左侧的图例也发生相应变化，说明本方法能够根据地图视口的缩放尺度来筛选图例内容。

图2 不同尺度下的图例

图3的两幅图同为中国街道地图第14层的截图。从图a到图b,地图进行了平移操作。在图a中，地图视口内没有土地利用图层的内容，所以图例中也没有该图层的内容。在图b中，地图视口内出现了土地利用图层的内容，所以图例中也包含了该图层符号的注解（红色虚框标出）。这说明本方法可以根据地图视口的范围来筛选图例内容。

5 结 语

本文方法既可以在浏览地图时实时生成图例，也可以在制图中自动快速生成图例。由于方法具有快速和自动的优势，可以用于应急成图[5]和自动成图[6]中的图例生成。

本文方法并没有将图例的友好交互潜能挖掘完全，比如地图数据与图例符号之间的联动，通过图例改变地图样式，随鼠标事件改变图例状态等。这些交互特性在传统的GIS软件中较容易实现，但是在基于脚本制图的技术背景下，实现这些友好交互特性颇具挑战性，值得进一步探讨。

[1] ISO 19128．Geographic information - Web map server interface[S]．

[2] Gahegan M, Smart W, Masoud-Ansari S,etal． A Semantic Web Map Mediation Service: Interactive Redesign and Sharing of Map Legends[C]． 1st ACM SIGSPATIAL International Workshop on Spatial Semantics and Ontologies,2011

[3] Boulos M N, Warren J, Gong J, etal．Web GIS in Practice VIII: HTML5 and the Canvas Element for Interactive Online Mapping[J/OL]． International Journal of Health Geographics

[4] Liu L, Yang A, Chen L,etal． HiGIS -When GIS Meets HPC[C]．12th International Conference on GeoComputation,Wuhan,2013

[5] 和海霞,杨思全,黄河,等． 应急遥感快速制图技术研究[J]．国土资源遥感，2012(3)：159-164

[6] 刘光孟,汪云甲,刘万增,等． 地图制图模板自适应生成技术研究[EB/OL]． http://www．paper．edu．cn,2014-01-01

[7] 霍 佳，王英杰，王映辉,等． 基于Web 的统计电子地图发布系统设计[J]．计算机工程，2009，35(4)： 258-260

图3 不同视口范围下的图例

P208

B

1672-4623（2014）05-0154-04

10.3969/j.issn.1672-4623.2014.05.057

蔡苑彬，硕士,研究方向为地图制图学。

2014-03-14。

项目来源：国家863计划资助项目（2011AA120305，2011AA120306）。