ArcGIS API for Flex的Navigation slider的风格样式及定位

?

文by：MoMo（cymoe@163.com）
最近一直在看ArcGIS API for Flex的相关资料，下了ESRI的sample在机器上跑的时候，突然很想动手改改UI风格和元素在界面中的定位，却被那个Navigation slider弄得有些郁闷（主要是不知该如何下手）。说起Navigation slider，其实它就是GIS界面上那个可以拖动滑块实现放大缩小功能的导航条——它主要由三个UI元素组成：滑块（slider）、缩小按钮（zoom-in button）、放大按钮（zoom-out button）。
查了些资料，总结了两种在flex builder4中修改Navigation slider样式风格和定位的方法：

首先，在flex中可通过引用地图代码的方式先实现地图加载（前提：你的电脑已连在因特网上），在Flash builder4中新建工程，并新建“MXML 应用程序”型的mxml页，在页面源代码中插入以下的引用：

<esri:Map id="map" logoVisible="false"> <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/> </esri:Map>

编译运行后可看到ESRI的地图界面，那个Navigation slider默认状态下是位于界面的左上角，呈半透明黑色的垂直条状。
为方便讲解，我在截图中将它着色为红色半透明状态以示区别，并在<esri:Map中添加了logoVisible="false"控制，让右下角的ESRI LOGO处于不显示状态，贴图如下：

?

下面开始进入正题——接下来要做的事情是：将左上角的这个Navigation Slider移动到右上角。

?

方法一：

1. 在mxml文件中给<esri:Map id="map"这个标签添加styleName，可暂时先将这个css类名定义为mapStyle。

于是上文提到的那段代码，现在可写成如下形式：

<esri:Map id="map" logoVisible="false" styleName="mapStyle"> <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/> </esri:Map>

?

2. 接下来，需要在.css文件中添加对mapStyle这个类的属性控制代码：

.mapStyle{ navigation-Style-name:navigationStyle; } .navigationStyle{ top:30; right:10; left:NaN; }

?

这样我们就实现了把Navigation Slider做了界面重定位，通过在CSS的mapStyle类中再添加一个新类名的定制，给navigation slier定义了navigationStyle类来控制上、左、右的距离，实现定位。

?

实际上，修改Navigation Slider内部的的背景色和放大缩小按钮外观，也同样是通过这种方式，添加相关css类名进行属性，实现对外观的控制（例如在navigationStyle内部添加navigation-slider-style-name:navigationSlider;这样便可进一步针对.navigationSlider这个类进行相关属性定制）。

?

备注：

关于这种方式的UI定制可参考《ArcGIS+Flex+API的地图应用》一文，其中的“ArcGIS Flex API –设置控件的样式”章节的表述较为详细，文中的Navigation Toolbar即Navigation Slider，并针对滑块、放大按钮、缩小按钮、导航条的工具提示样式分别设定了css类名分别为：NavigationSlider,NavigationMinusButton,NavigationPlusButton,ToolTip。

?

方法二：

上文中的“方法一”实际上是针对flex3开发环境时用的比较多的经典办法，从ESRI过去的一些旧资料中就可以略知一二。但自从esri发布FLEX API2.0之后，在flex4的开发环境下可直接在css新版语法中通过添加命名空间的方式进行定制，具体步骤如下：

?

1、在css文件中添加命名空间，代码如下：

@namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @namespace esri "http://www.esri.com/2008/ags";??

?

2、按照flex4的css规则进行样式定制，代码如下：

esri|Navigation { top: 30; right: 70; left: NaN; }

这就实现了对Navigation Slider这个工具条的定位控制。

?

补充：

关于Navigation slider内部元素的UI定制

在flex4中，要实现定制内部的滑块和放大缩小按钮的UI，主要步骤如下：

1、在css文件中实现对Navigation类的类引用（classReference）定义，即：用styleName属性引用NavigationSkin：

esri|Navigation { skin-class: ClassReference("UIcomponents.NavigationSkin"); }

?

2、在src文件夹下新建UIcomponents文件夹，在该文件内新建几个spark组件皮肤（即内部代码是<s:Skin开头的的mxml页），分别命名为NavigationSkin.mxml，NavigationZoomInButtonSkin.mxml，NavigationZoomOutButtonSkin.mxml（注：这几张页面可通过ESRI官网的sample下载到）。

这几张页面之间的关系不言而喻——NavigationSkin.mxml页通过设定skinClass的方式包含了NavigationZoomInButtonSkin和NavigationZoomOutButtonSkin。

在NavigationSkin.mxml中建立一个VGroup，依次加入放大按钮、滑块、缩小按钮，引用这三个组件的代码如下：

<s:Button id="zoomInButton" enabled.disabled="false" enabled.disabledWithSlider="false" skinClass="com.esri.ags.skins.NavigationZoomInButtonSkin" toolTip="{resourceManager.getString('ESRIMessages','zoomInTooltip')}"/> <mx:VSlider id="slider" dataTipFormatFunction="formatSliderDataTip" dataTipPlacement="right" enabled.disabled="false" enabled.disabledWithSlider="false" enabled.normalWithSlider="true" height="160" dataTipStyleName="tooltipStyle" includeIn="normalWithSlider,disabledWithSlider" liveDragging="false" maximum="{hostComponent.map.lods.length - 1}" showDataTip="true" snapInterval="1" tickColor="#000000" tickInterval="1" tickLength="3" tickOffset="-3" tickThickness="1" value="{hostComponent.map.level}"/> <s:Button id="zoomOutButton" enabled.disabled="false" enabled.disabledWithSlider="false" skinClass="com.esri.ags.skins.NavigationZoomOutButtonSkin" toolTip="{resourceManager.getString('ESRIMessages','zoomOutTooltip')}"/>

?

此外，要改变Navigation Slider的背景色和透明度，则只需在spark皮肤中进行相关更改即可，本例中是直接修改NavigationSkin.mxml的这一行<s:SolidColor alpha="0.5" color="0x2B7EA7"/>，alpha代表透明度，0x2B7EA7代表颜色为#2B7EA7：

<s:Rect bottom="0" left="0" radiusX="10" radiusY="10" right="0" top="0"> <s:fill> <s:SolidColor alpha="0.5" color="0x2B7EA7"/> </s:fill> </s:Rect>

?

如此更改后的界面截图如下：

?

备注：

要进一步定制Navigation Slider的放大缩小按钮的外观风格，可进入NavigationZoomInButtonSkin.mxml和NavigationZoomOutButtonSkin.mxml做进一步的UI定制，例如替换掉图标，只需修改"@Embed(source=”的图片引用路径即可。

?

最后附上：在线参考的Concepts - ArcGIS API for Flex，网址是http://help.arcgis.com/en/webapi/flex/help/index.html

在该页找到如下图所示的目录选项，即可实现对的Navigation Slider风格样式定制方法：

http://blog.csdn.net/cymoe/article/details/5766142