一种客户端政区四色地图高效着色方法 | ![]() |
2. 同济大学环境科学与工程学院, 上海, 200092;
3. 武汉大学资源与环境科学学院, 湖北 武汉, 430079
2. College of Environmental Science and Engineering, Tongji University, Shanghai 200092, China;
3. School of Resource and Environmental Sciences, Wuhan University, Wuhan 430079, China
随着互联网信息技术的快速发展,地理信息服务的网络化将成为主流模式,自适应、个性化在线制图需求日渐扩大,地图制图学由重视地理信息源获取向面向用户的地理信息深加工转移已成为必然趋势[1]。相对于传统服务端静态瓦片地图,新型客户端地图制图将实际坐标、拓扑信息发送到客户端,有利于实现个性化定制、空间分析、业务聚合及用户交互制图。目前,国内多侧重于制图渲染效果可视化,而交互式、分层级专题地图制图才刚刚兴起。然而,国内主流网络地图仍然停留在服务端制图阶段,依赖专业制图软件,用户参与度低,地图应用模式简单,更多沿用传统专题地图样式,缺乏创新,不能体现时代特征[2]。随着HTML5技术的发展,越来越多专业人员开展客户端地图制图技术研究,客户端地图制图是未来WebGIS发展的主要方向。
当前,如何充分分析利用众源数据,如何交互式呈现,是实现大数据支撑下地图制图的未来发展趋势[3]。空间数据和空间信息技术在政府行政管理领域得到大规模应用[4]。政区统计数据多源化、多维化快速发展,为政区数据交互呈现和统计分析带来巨大挑战,政区地图作为索引窗口,可一体化集成图表、文本、图像、视频、符号等内容,有利于政务数据的综合分析和交互可视化[5]。
1 四色地图着色方法 1.1 存在问题在国内WebGIS(Web-based geographic information system)系统中,政区四色地图多为服务端静态瓦片,用户不能在客户端自定义配置[6],需要预先定制多套配色方案,只能有限改变四色地图风格。即使这样,客户端仍然无法根据用户喜好动态编辑多边形填充颜色、透明度及边界线宽样式。因此传统服务端渲染方法不能满足政区四色地图动态化、便捷化、个性化制图需要[7]。
客户端实时渲染四色地图可以实现用户个性化配置。但是,由于四色地图拓扑关系算法复杂,当多边形较多时,客户端实时计算会消耗浏览器大量存储和计算资源,导致四色地图客户端渲染延迟,所以在客户端进行四色图拓扑计算无法实现实时着色要求。本文提出了模板式客户端四色地图高效着色方法,在客户端避免计算四色地图拓扑关系,用四色模板方法将算法结果从服务端传递到客户端,为精细化、个性化的四色地图提供一种松耦合、轻量级的制图方法。
1.2 四色地图客户端高效着色策略结合多尺度矢量数据简化、四色地图着色模板、HTML5矢量渲染技术,提出一种客户端政区四色地图高效着色方法,将四色地图关联关系存储在四色地图着色模板中,实现四色政区地图客户端动态化、个性化、高效化制图。
1) 多尺度政区矢量数据简化。客户端地图制图具有实时渲染和动态加载数据特点。由于原始的全国政务矢量数据精度高、数据量大(全国政区地图中每个省份的原始多边形点高达数千个点坐标),在客户端制图时,若将所有点坐标传输到客户端,将影响动态制图效率。为了降低存储空间以及缩短网络传输时间,加快客户端渲染速度,对矢量数据进行不同尺度下分层组织,针对冗余坐标信息进行简化压缩。
2) 四色地图着色模板技术。目前,四色地图着色的算法比较多,但切实可行的较少[8]。在Appel和Haken采用顺序逼近方法解决和证明四色图着色问题后,出现了很多有关地图四色着色的算法[9],但这些算法都存在一定的缺陷,难以推广应用。如贪心算法解决的是某种意义上的局部最优解,甚至无法找到最优解;神经网络方法、遗传算法等逻辑复杂,难以用程序实现;回溯算法等则存在效率低下问题。深度优先搜索算法[10]对新产生的节点进行优先扩展,直到达到深度限制。本文在深度优先搜索算法基础上,在服务端实现地图着色算法,将四色地图关联关系存储在四色地图着色模板中,实现四色图算法从服务端传递到客户端。
3) HTML5矢量地图渲染技术。Flash、SVG(scalable vector graphics)、VML(vector markup language)和HTML5 Canvas是目前WebGIS矢量地图绘制的4种主要方案[11]。其中, Flash具有广泛的适用平台、强大的功能及高效的绘图等特点;基于SVG构建的WebGIS整体性能较为优化;在交互性方面,基于XML(extensible Markup language)的SVG与VML,具备XML操作数字正射影像图(digital orthophoto map, DOM)、数据表现分离等优点,因此具有最好的交互性和较优的性能[12, 13];HTML5 Canvas和Flash绘图效率较高,但Flash浏览器兼容性较差,客户端需安装Flash插件,Adobe公司已经宣布不再维护更新Flash体系,因此HTML5 Canvas是轻量级WebGIS矢量地图绘制最好的技术方案。
1.3 客户端政区四色地图动态配色流程与方法客户端政区四色地图动态配色流程分为服务端处理和客户端渲染两大环节。首先,在服务端进行政区地图压缩处理、四色地图编码及四色模板制作,将四色地图算法结果存储为着色模板传递到客户端;其次,在客户端完成地图渲染,实现政区四色地图动态配色;最后,结合基础瓦片地图底图,在客户端聚合各类业务数据,实现多源政区数据统计交互展示,主要流程如图 1所示。
![]() |
图 1 政区四色地图动态配色技术流程图 Figure 1 Technical Flow Chart of Dynamically Matching Color for Four-Color Map |
1) 政区地图服务端压缩处理。政区统计图制作中,通过省、市、县分层矢量数据的不同程度的简化,形成分层矢量数据集合存储在后台服务器,在不同尺度的统计地图客户端制作中,可通过HTTP请求获取后台分层简化的矢量数据,动态转化为Geo-Json格式数据到客户端。①将省、市、县3级行政区划边界数据通过拓扑检查以保证数据在空间上的一致性;②对于每一级别数据,基于Douglas-Peuker算法[14]按照指定参数将矢量数据简化。基于多比例尺地图数据的线状要素综合方法[15],提取不同比例尺边界要素同名点;③数据简化后,为提高政区地图整体可视效果,进行适度平滑处理,利用大比例尺政区边界要素同名点作为控制点确保政区边界精确度,通过调整简化算法实现政区边界坐标数量和精度的平衡;④利用第三方拓扑处理工具对各级政区多边形数据进一步拓扑检查,手动排除重叠、空隙,分省、市、县等层级存储为矢量数据集。
2) 政区地图服务端四色编码。客户端的统计图实时渲染可以实现动态加载数据、自定义符号配置样式,达到实时显示的效果。本文采用瓦片地图底图,客户端渲染四色地图的方式,基于行政区划编码的关联聚合技术,将政区地图和行政区划整合解析。在政务统计数据、地理数据融合处理中,主要有3种数据来源:政区统计数据、影像数据和矢量数据。基于这3类数据生成瓦片地图底图和政区统计地图两类可视化服务,通过服务聚合的方式形成多样式、多
图层的统计地图。①政区矢量数据增加四色标志(FourColorFlag)属性字段,利用深度优先搜索四色图算法,针对多边形进行颜色编码(例如A、B、C、D表示4种颜色),放在FourColorFlag属性字段中;②政区矢量数据服务,将不同尺度的政区矢量数据动态转化为GeoJson数据,用行政区划编码对各数据文件进行命名。
3) 四色地图客户端自定义配置渲染。基于GeoJson中存储的行政区划编码获取该行政区划内统计业务Json数据,利用Javascript函数进行解析,根据政务数据、着色模板确定政区地图符号化方式,实现政务统计图客户端渲染。①客户端发出地图初始化请求,将当前制图类型和窗口坐标传递到服务器;②客户端地图底图服务请求区域内瓦片地图,同时根据行政区划编码请求、解析该政区GeoJson数据;③设定颜色代码对应的颜色模板,实现GeoJson中着色代码与用户自定义颜色模板对应;④根据客户端配置的多边形填充颜色模板、透明度、线宽等样式,渲染四色图;⑤瓦片地图底图服务,矢量数据通过符号化、分层切片形成矢量瓦片地图,通过数据库或文件索引的方式存储在后台服务器上,并发布Web地图切片服务;⑥增加用户对四色地图交互操作接口,聚合多源数据服务,根据目标统计区域,集成HTTP协议下业务统计数据。
当数据量很大的时候(如全国3 000多个县级区划),客户端着色会存在传输和绘制效率问题。首先,通过客户端政区边界缓存解决网络传输压力;其次,利用政区分级绘制释放客户端实时绘制压力,即在全国状态绘制省级行政区,用户选择省份时只绘制该省份的下属市级行政区;不仅避免客户端一次性绘制过多的多边形,同时可实现全国、省、市、县逐级钻取和上卷一体化交互操作。
2 应用案例客户端政区四色地图高效着色方法在教育部“金教工程”业务系统中得到推广应用,实践表明,该方法充分利用浏览器矢量绘图能力,通过服务聚合,将不同业务数据进行图形化表达,通过客户端配色接口实现各业务系统对四色地图自定义配色需求(图 2),实现多个业务系统数据服务联动钻取与交互呈现(图 3)。
![]() |
图 2 不同颜色模板下的省级政区四色地图 Figure 2 Comparison of Provincial Level Four-Color Map Using Different Color Template |
![]() |
图 3 不同颜色模板下市级、县级政区客户端四色地图 Figure 3 City Level and County Level Four-Color Map Using Different Color Template |
3 结束语
政区四色地图作为地理索引,可以交互呈现统计指标,将业务统计信息进行集成整合,满足了统计地图通用性功能和个性化需求,广泛应用于统计地图系统。本文基于政区地图矢量数据压缩、平滑、四色编码处理算法,利用客户端模板渲染制图,解决了客户端四色地图动态配色问题。利用地图着色模板技术将四色地图关联关系存储在着色模板中,实现了四色图算法从服务端传递到客户端,为复杂地图制图算法在客户端制图表达提供了新的解决思路。
[1] |
王家耀. 地图制图学与地理信息工程学科发展趋势[J]. 测绘学报, 2010, 39(2): 115-119. |
[2] |
赵飞, 杜清运. 现代专题地图制图研究进展与趋势分析[J]. 测绘科学, 2016, 41(1): 80-84. |
[3] |
艾廷华. 大数据驱动下的地图学发展[J]. 测绘地理信息, 2016, 41(2): 1-7. |
[4] |
吴娟.地理要素的并发编辑研究[D].南京: 南京师范大学, 2008
|
[5] |
赵国成, 徐立, 阚映红. 面向规则聚合的地图制图模板设计与实现[J]. 测绘科学技术学报, 2014(2): 216-220. DOI:10.3969/j.issn.1673-6338.2014.02.025 |
[6] |
杨超, 程朋根, 陈静. 多尺度地图数据在Web服务中的组织与服务方法研究[J]. 东华理工大学学报(自然科学版), 2009, 32(4): 385-389. |
[7] |
章莉萍, 郭庆胜. 网络上分级统计地图制图软件的设计与开发[J]. 测绘信息与工程, 2006, 31(3): 47-49. DOI:10.3969/j.issn.1007-3817.2006.03.021 |
[8] |
杨名生. 四色图论——四色问题解的存在性及求解方法[J]. 大连理工大学学报, 2016, 56(6): 662-670. |
[9] |
张士庆, 张号. 四色问题的直观几何论证及单纯性地图四色定理[J]. 图学学报, 2013, 34(5): 46-50. DOI:10.3969/j.issn.2095-302X.2013.05.010 |
[10] |
乔永利, 王建强, 胥海滨. 深度优先搜索的地图着色算法[J]. 测绘科学, 2011(5): 175-176. |
[11] |
廖明, 潘媛芳. WebGIS矢量地图绘制方法的性能比较分析[C].华东六省一市测绘学会第十一次学术交流会, 福州, 2009
|
[12] |
杨瑞娟, 叶建栲. SVG、GML和WFS技术及其应用研究[J]. 微型机与应用, 2010, 29(24): 1-3. DOI:10.3969/j.issn.1674-7720.2010.24.001 |
[13] |
韩乐乐, 徐建华, 李治洪, 等. 基于SVG的WebGIS点符号库的设计与实现[J]. 地理科学研究, 2015, 4(4): 163-170. |
[14] |
Tian F M, Zhao Y X, Li L, et al. Method of Constructing Undersea TIN DEM Based on Vector Nautical Chart[J]. Journal of Harbin Engineering Uni-versity, 2009, 30(2): 142-147. |
[15] |
邹广黔, 李静, 吴孔江. 基于多比例尺地图数据的线状要素综合方法[J]. 测绘地理信息, 2014, 39(4): 62-64. |