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

 

文by：MoMo（[e-mail]）
最近一直在看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页，在页面源代码中插入以下的引用：

view plaincopy to clipboardprint?

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

<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。

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

view plaincopy to clipboardprint?

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

<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这个类的属性控制代码：

view plaincopy to clipboardprint?

1. .mapStyle{  
2.   
3. navigation-Style-name:navigationStyle;  
4.   
5. }  
6.   
7. .navigationStyle{  
8.   
9. top:30;  
10.   
11. right:10;  
12.   
13. left:NaN;  
14.   
15. }  

.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文件中添加命名空间，代码如下：

view plaincopy to clipboardprint?

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

@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规则进行样式定制，代码如下：

view plaincopy to clipboardprint?

1. esri|Navigation  
2. {  
3.     top: 30;  
4.     right: 70;  
5.     left: NaN;  
6. }  

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

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

 

补充：

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

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

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

view plaincopy to clipboardprint?

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

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，依次加入放大按钮、滑块、缩小按钮，引用这三个组件的代码如下：

view plaincopy to clipboardprint?

1.    <s:Button id="zoomInButton"  
2.              enabled.disabled="false"  
3.              enabled.disabledWithSlider="false"  
4.              skinClass="com.esri.ags.skins.NavigationZoomInButtonSkin"  
5.              toolTip="{resourceManager.getString('ESRIMessages', 'zoomInTooltip')}"/>  
6.   
7.    <mx:VSlider id="slider"  
8.                dataTipFormatFunction="formatSliderDataTip"  
9.                dataTipPlacement="right"  
10.                enabled.disabled="false"  
11.                enabled.disabledWithSlider="false"  
12.                enabled.normalWithSlider="true"  
13.                height="160"  
14. dataTipStyleName="tooltipStyle"  
15.                includeIn="normalWithSlider,disabledWithSlider"  
16.                liveDragging="false"  
17.                maximum="{hostComponent.map.lods.length - 1}"  
18.                showDataTip="true"  
19.                snapInterval="1"  
20.                tickColor="#000000"  
21.                tickInterval="1"  
22.                tickLength="3"  
23.                tickOffset="-3"  
24.                tickThickness="1"  
25.                value="{hostComponent.map.level}"/>  
26.   
27.    <s:Button id="zoomOutButton"  
28.              enabled.disabled="false"  
29.              enabled.disabledWithSlider="false"  
30.              skinClass="com.esri.ags.skins.NavigationZoomOutButtonSkin"  
31.              toolTip="{resourceManager.getString('ESRIMessages', 'zoomOutTooltip')}"/>  

<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：

view plaincopy to clipboardprint?

1. <s:Rect bottom="0"  
2.         left="0"  
3.         radiusX="10"  
4.         radiusY="10"  
5.         right="0"  
6.         top="0">  
7.     <s:fill>  
8.         <s:SolidColor alpha="0.5" color="0x2B7EA7"/>  
9.     </s:fill>  
10. </s:Rect>  

<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