ArcGIS WEB端图层分级渲染的组件化与应用1

ArcGIS WEB端图层分级渲染的组件化与应用1

ArcGIS,WEB端图层分级渲染的组件化与应用

高翔

常州市新北自然资源和规划技术保障中心，江苏常州  213022

摘  要基于当下高速发展的WebGIS技术，使用Esri官方Javascript API及dojo框架结合项目实际设计开发了根据指定字段按值进行分级渲染的组件。该组件致力于实现分级渲染的通用性，复用性以及易用性，专注于这一类地图展示的需求，通过简单的配置展示需要的效果。开放的可视化配置可按想要的颜色及层级等实现更美观更贴合实际的实时需求。

关键词WebGIS；Esri；dojo；分级渲染

0引言

随着互联网越来越成为我们生活的一部分，搭着互联网的快车，GIS（地理信息系统）适应时代的发展，使用轻便化的WebGIS（网络地理信息系统）[1]作为当前的主要发展方向尤为受到青睐。这当中ArcGIS地图服务这一地理信息交互窗口对于地理测绘来说显得非常重要，如何更好地利用它开发Web地图是我们在互联网时代努力的方向。组件化在Web开发中是一种流行且实用的方案，通过平时的项目总结实现一些地图组件是非常必要的。Web地图是一种视觉化的交互性很强的承载大量地理信息的图形，按照特定的规则展示地图能让使用者更加直观的了解到需要的信息，一目了然。分级渲染作为WebGIS中一个重要的功能，帮助我们按照特定的分级手段分成不同等级并展示不同颜色，能够直接告知用户各级分布情况等。如环境污染方面可以不同颜色展示不同污染程度等。

当前已经有了多种分级渲染的解决方案，并在多种语言基础上实现了，如基于C#和MapObjects组件实现的多字段渲染[2]，但是WebGIS端由于轻便性深入研究较少。本文紧跟互联网前端WebGIS地图开发趋势，基于Esri公司ArcGIS API for Javascript提供的2D版本地图开发接口进行二次开发[3]，探索地图分级渲染可视化的通用化解决方案和组件化的前端开发方法，将更多的处理过程放置在组件内部，使仅通过简单的设置和界面交互即可实现特定的分级渲染需求，为相关开发提供一定的借鉴和思路。

1图层分级渲染原理

GIS的功能非常强大，包含了众多地理信息，但信息的查询与分析结果往往需要人的视觉来感知，因此信息的语义化与可视化是首选功能。地理信息可视化常用的方法是直接利用地图的符号化同类不同级分图层添加展示，大大增加了图层的数目，影响渲染效率[4]。以往的方法大部分是制图人员使用分级瓦片地图自动渲染技术制图生成需要的分级效果[5]。

在实际使用中我们往往需要根据某一关键字段的值分成不同的等级展示，这就需要用到ArcGIS API for Javascript中的ClassBreaksRenderer图层分级渲染功能来实现。图层分级渲染应用非常广泛，尤其用在同类数据不同值或区间范围对应级别的时候，如环境污染中根据pm2.5值划分空气污染等级，水质状况中根据氨氮含量确定水质良好情况，经济发展中根据税收确定年度发展情况等等，涉及了地理信息中的多维数据。

在图层属性数据中，有一部分是与地理几何数据的表示密切相关的，决定了几何图形的形状、色彩等[4]。已知图层所有字段的名称及值，根据指定的字段名和颜色、类别来对图层进行分级渲染显示，分级首先需要有一个基准，依据设定的关键字段，再采取规则化的手段分成需要的等级，可以等值分割，区间分割，也可以等数量分割，然后给每个等级分配不同的对应渲染颜色，使地图中的地理要素根据自身的值去匹配对应等级渲染成对应颜色。具体可简述为：

（1）获取图层所有的字段名，用于匹配对应字段。

（2）按照分类的类别数和指定的颜色来生成对应级别颜色数组。

（3）将指定字段的值按等间隔分成n份，并赋予对应的颜色。

（4）最后还要将渲染器设置给图层让图层实行渲染。

2渲染组件化

2.1组件UI等设计

好的视觉UI能够增强信息的语义化，更加通俗易懂，让软件变得有个性有品位，还让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。分级渲染组件涉及到等级划分及配色等，因此图例化的功能配置UI能够更好的显示出分级情况，同时为了兼顾变化的分级需求，隐藏添加了分级配色和分割等级数量界面。具体组件界面如图1、图2所示。

图1 图例

图2 展开设置

2.2组件开发

2.2.1组件基于ClassBreaksRenderer API

ClassBreaksRenderer类中断渲染器是Esri官方API中提供的根据某些数字属性的值来符号化每个图形以达到数据可视化的地图能力。本组件基于此ClassBreaksRenderer API进行二次开发达到通过设置多个级别,每个级别给一个范围,设置一种符号颜色或者用唯一值渲染方法完成数据可视化。

要定义类中断渲染器，必须添加中断，也就是一个级别。每个中断指定要使用的符号以及将用于该符号的最小值和最大值。这些都是官方接口对应方法addBreak所必须的参数，伪代码为：addBreak(最小值，最大值，指定符号)。这也是实现分级的关键。

2.2.2组件可配参数设置

组件是对数据和方法的简单封装，能够提高质量，降低成本。为了达到组件的目标，组件需要支持定制化，可配置化以适应不同的需求，尽可能的考虑各种需求情况。因此组件对外暴露的参数显得尤为重要。依据图层分级渲染的原理，分级需要根据某些数字属性的值，所以设置一个关键字段的属性用于指定分级的地理属性，而实际使用过程中通常不仅仅使用数字属性，也可能是类别型的属性，因此开放了外部数据字段处理方法这一参数用于自定义。

分级渲染需要作用到指定图层，设置选项中包含了指定图层的参数。着色渲染对应开放了两端配色及分割层级参数用于分割着色。考虑到某些属性并未包含在地理信息中，需外部引用合并，陆续开放了合并属性等相关参数。通过以上主要参数即可实现组件的多样化，可定化。

2.2.3组件页面渲染

根据上述UI设计，首先通过initColorRamp方法初始化组件在页面中的DOM结构样式等。创建根节点盒子区域并新增子节点分左右两片区域，左侧初始化用于显示分割后的图例展示，直观表示各等级对应配色及值（区间）。右侧区域创建配置表单，主要是开始配色，结束配色以及分割层级，通过提交该表单可实时切换渲染展示，更贴合当前需求。

图例区域的图例列表需要根据分割生成。因此组件紧接着通过initQuery和initRender方法对图层进行分级，分级方法多种多样，组件默认采取的是值等距区间分级，根据所有数据遍历获取值的最大最小值得到总区间。相关关键代码主要为图3所示。

图3 值等距区间分级

这当中兼顾自定义，使用了concatAttributes向地理图形合并添加了外部数据，具体方法同样使用了遍历，找出与图形关联的数据进行绑定添加，然后通过getValue方法使用设定的值字段获取值。

值设置完成后进行分割操作，beginRenderer方法中按照配色和分割份数计算出各等级对应值（区间）和配色，有了这些，同步生成图例添加到UI展示中，并直接使用ClassBreaksRenderer API中的addBreak进行类中断渲染，实现分级渲染的目的。关键中断代码如图4。

图4 中断渲染

2.2.4组件交互事件

本组件功能重在渲染，用户参与交互的方式比较方便简单，按照需要的颜色和分割份数去展示需要的效果即可。组件内部首先让用户交互参与控制表单的显隐，让组件更轻便。从视觉上来看隐藏表单仅显示图例可以让用户专注于效果。而通过点击图例区域打开/关闭表单区域扩展控制功能，又增强用户参与感。内部添加了对图例区域点击事件和对组件外部点击事件得监听。具体交互流程如图5显示。

图5 组件交互流程

表单显示后，用户进一步交互可以按个人需求去定制化分级渲染。组件对于用户设置操作进行了监听，用户选择了起始颜色和分割层级后，点击设置按钮后，会触发内部点击事件监听，执行内部相应操作，重新进行值分级并计算颜色，最后重新初始化图层渲染，刷新图层展示给用户查看。这一过程响应十分迅速，用户可以多次设置以达到需要的效果。设置完成会同时隐藏表单，简化显示。

2.3应用实例

在农村土地确权项目中，根据土地出让状况等，为了更好的区分不同土地状态，应用这一图层分级渲染组件，同时由于土地状态属性非数值类型，因此自定义分级规则指定不同状态的值实现了需要的效果，同时在项目中多个地方根据不同需求完成了可视化。使用过程中发现大大减轻了工作量，并且效果也非常明显。

3结语

通过分层渲染的组件化，大大减轻了工作的复杂度，极大地提升了工作效率，增强了地图地理信息的可视化，也增加了用户的参与度，交互性更强，相较于固定的分级更灵活实用，贴合用户的需求。当然组件需要做的远远不止这些，还有很大的提升空间，后续将根据实用情况继续完善并紧跟官方的相关功能进行升级，希望更好的为用户服务。

随着社会的发展，地理信息都具有时间和空间属性，如何体现这些并通过图层分级渲染呈现视觉化效果将是下一阶段的研究方向，结合时空属性，实现区域等分级信息的随时空变化效果。

参考文献

[1]徐立钧. 基于WEB2.0的网络地理信息系统(WebGIS)的研究与应用[D]. 贵州大学.

[2]吴宪, 刘钊, 莫南明. 基于C#语言和MapObjects组件的多字段渲染问题的研究[C]// Arcgis暨erdas中国用户大会. 2006.

[3]侯姗姗. GIS及大气传输模型在核应急管理中的研究与系统实现%Research of Geographic Information System and Atmospheric Transmission Model for Nuclear Emergency Management and Realization of Software System[J]. 北京测绘, 2016, 000(006):76-82.

[4]褚永彬, 唐斌, 张飞. MapObjects中同层同类地理实体分级渲染显示的实现[J]. 科技资讯, 2006, 000(008):195-196.王丽英，徐成林.农用地确权问题及对策研究[J].湖北经济学院学报（人文社会科学版），2020,17(4):82-84.

[5]杨帆, 张令奎, 梁发宏,等. 分级瓦片地图自动渲染制图规则设计与实现[J]. 测绘通报, 2015(S2):35-40+46.

- 1 -