ArcGIS Flex API 中缩放控件样式设计（转帖）

原文转自http://tm.arcgisonline.cn/2011/0817/102.html

一、引言       

常常使用ArcGIS Server Flex API开发应用系统的用户会发现，在客户端浏览地图时，左侧都会有一个默认缩放推拉杆。但由于Flex开发的应用系统界面风格很炫，这样一个中规中矩的缩放推拉杆一定程度上制约了整体的风格。若能对默认缩放推拉杆进行自定义的样式设计，将会大大增强整个应用系统的客户体验。      

二、方法步骤         

ESRI资源网站上对缩放推拉杆的样式设计提供有相应的文件。我们可通过http://resources.esri.com/help/9.3/arcgisserver/apis/flex/samples/index.html 链接地址下载Navigation CSS styling和NavigationStyling.css两个文件。如图1所示

下面将具体介绍如何进行缩放推拉杆样式的设计。   

1、新建一个工程文件，在此我们命名为NavigationStyle。如图2所示。

2、打开默认建立好的NavigationStyle.mxml文件，转换到代码视图，用前期从ESRI资源网站上下载的Navigation CSS Styling中的全部代码替换原始代码。如图3所示。

3、在src目录下，新建Images文件夹，将通过Photoshop设计好的各种皮肤状态拷贝至其内。如图4所示。

4、在src目录下新建一个目录，如assets，同时将下载的NavigationStyling.css文件拷入。如图5所示。

5、在NavigationStyle工程文件目录下，创建esri文件夹，将agslib-1.3-2009-10-31.swc文件拷贝至文件夹内，并将此swc文件添加入Flex Library中。如图6所示：  

6、更改Navigationstyling.css文件内的各个参数，代码如下：

1. .myMapStyle
2. {
3.     navigation-style-name: myNavigationStyle;
4. }
5. .myNavigationStyle /*控制缩放推拉杆在地图上的显示位置及背景样式*/
6. {
7.      top: 10; /*距地图顶端距离*/
8.      left: NaN; /*为使缩放推拉杆靠地图右侧显示，此属性值设为：NaN，如使缩放推拉杆靠地图左侧显示，则将其设置为具体数字，删除right属性*/
9.      right: 10; /*右边距*/
10.      navigation-minus-button-style-name: myNavigationMinusButton;
11.      navigation-plus-button-style-name: myNavigationPlusButton;
12.      navigation-slider-style-name: myNavigationSlider;
13.      backgroundColor: #4C6C00; /*控制缩放推拉杆背景颜色*/
14.      backgroundAlpha: 0.8; /*控制缩放推拉杆背景透明度*/
15.      borderStyle: solid; /*控制缩放推拉杆背景边框*/
16.      borderThickness: 1; /*控制缩放推拉杆背景边框粗细*/
17.      borderColor: #F2FFD2; /*控制缩放推拉杆背景边框颜色*/
18.      cornerRadius: 10; /*控制缩放推拉杆背景倒角*/
19.      backgroundSize: auto; /*控制缩放推拉杆背景尺寸*/
20.    }
21. .myNavigationMinusButton /*缩小按钮皮肤样式，链接Images目录*/
22. {
23.      disabledSkin: Embed(source="Images/zoomout_up.png");
24.      downSkin: Embed(source="Images/zoomout_over.png");
25.      overSkin: Embed(source="Images/zoomout_over.png");
26.      upSkin: Embed(source="Images/zoomout_up.png");
27. }
28. .myNavigationPlusButton /*放大按钮皮肤样式，链接Images目录*/
29. {
30.       disabledSkin: Embed(source="Images/zoomin_up.png");
31.       downSkin: Embed(source="Images/zoomin_over.png");
32.       overSkin: Embed(source="Images/zoomin_over.png");
33.       upSkin: Embed(source="Images/zoomin_up.png");
34. }
35. .myNavigationSlider /*滑杆及滑动按钮样式，同样可以设定其皮肤样式*/
36. {
37.       dataTipPlacement: "left";
38.       showScaleInDataTip: false;
39.       tickColor: #FFFFFF;
40.       tickLength: 4;
41.       tickOffset: 0;
42.       tickThickness: 1;
43.       borderColor: #f2ffd2;
44.       themeColor: #ffa800;
45.       invertThumbDirection:false;
46.       showTrackHighlight:true;
47. }         

7、运行NavigationStyle.mxml工程文件，效果如下：  

8、同样的，在任何Flex开发中，我们只需更改如下参数，就能达到我们想要的效果，还可以设计自己定义的皮肤样式，如图8。
              
               backgroundColor: #4C6C00; /*控制缩放推拉杆背景颜色*/           

               backgroundAlpha: 0.8; /*控制缩放推拉杆背景透明度*/           

               borderStyle: solid; /*控制缩放推拉杆背景边框*/           

               borderThickness: 1; /*控制缩放推拉杆背景边框粗细*/           

               borderColor: #F2FFD2; /*控制缩放推拉杆背景边框颜色*/           

               cornerRadius: 10; /*控制缩放推拉杆背景倒角*/           

               backgroundSize: auto; /*控制缩放推拉杆背景尺寸*/  

三、小结           

地图导航推拉杆的自定义样式满足了Flex开发用户在客户体验上的一致性需求，使得界面整体风格更加协调、统一