样式和外观导航 Navigation

关于造型和外观导航

首先贴上一张我修改后的导航条截图：

导航滑块用于显示层在预定义的尺度。它包括一个滑块，放大和缩小按钮。本主题说明如何您可以更改的默认外观的导航控制，以满足您的项目。

下表列出了各种方法来改变滑块导航：

不同方式的改变滑块导航

改变使用层叠样式表（CSS）的导航滑块的位置

水平导航滑块，使用的是备用的皮肤：

不同的放大和缩小按钮使用自定义

使用样式的导航滑块改变位置

CSS样式属性的距离为30像素的顶部和右边距在地图上的滑块。由于左边的属性是默认属性，你必须使用的不是数字（NaN）值，左边的属性值不使用。

需要注意的命名空间指令和限定引用ESRI |网站导航比例尺。组件改变其属性需要被唯一标识，以避免类名冲突。

<fx:Style>
    @namespace esri "http://www.esri.com/2008/ags";
    esri|Navigation
    {
        top: 30;
        right: 30;
        left: NaN;
    }
</fx:Style>

改变方向的导航滑块使用替代皮肤

导航滑块的默认方向是垂直的。根据您的应用程序的要求，你可以改变方向的导航滑块水平。一个备用的皮肤中提供的应用程序编程接口（API），它可以用于此目的。这个备用的皮肤类，如下面的代码所示：

<fx:Style>
@namespace esri "http://www.esri.com/2008/ags";
esri|Navigation
{
skin-class: ClassReference("com.esri.ags.skins.NavigationHorizontalSkin");
}
</fx:Style>

更改放大和缩小按钮，使用蒙皮

创建一个自定义皮肤，可以进一步提高导航滑盖的外观。在下面的屏幕截图中，用于替代图像的放大和缩小按钮，自定义工具提示显示瓦级（而不是地图的比例尺）。

您可以修改默认的导航控件皮肤类来创建一个备用的外观。在下面的章节中做的步骤来创建这个新的外观：

复制到你的项目中使用的默认外观的导航控制

默认情况下，导航控制使用NavigationSkin.mxml的，NavigationZoominButtonSkin.mxml，并NavigationZoomoutButtonSkin.mxml的皮肤类。复制这三个文件从<Extracted_API_Download_Location> /皮肤/ / src文件夹到你的Flex项目的src文件夹，然后重命名这些文件。请参阅以下内容：

1. 将重命名NavigationSkin.mxml MyNavigationSkin.mxml
2. 将重命名NavigationZoominButtonSkin.mxml MyNavigationZoominButtonSkin.mxml
3. 将重命名NavigationZoomoutButtonSkin.mxml MyNavigationZoomoutButtonSkin.mxml

修改的MyNavigationSkin.mxml的的皮肤类

这是默认的皮肤类包含的滑块，和按钮，用于放大和缩小的地图。修改皮肤提供了新的工具提示格式和改变皮肤的放大和缩小按钮。

1. 下面的修改工具提示价值：

   请参阅功能formatSliderDataTip。此功能是用来计算的值的工具提示是可见的，当拇指按压滑块。缺省情况下，工具提示被设置到的地图的比例尺。作如下修改以显示瓷砖水平：

private function formatSliderDataTip(value:Number):String
{
    const lod:LOD = hostComponent.map.lods[value];
    return lod ? (lod.level + 1).toString() : "Error";
}

1. 执行下列步骤来修改提示的外观：

    

2. CSS属性是用来改变工具提示外观。修改后的工具提示，有一个蓝色的背景搭配是大胆的字体类型。CSS类选择器看起来像下面这样：

    .tooltipStyle
    {
        backgroundAlpha: 1.0;
        backgroundColor: haloBlue;
        fontWeight: bold;
        color: white;
    }
</fx:Style>
定义的样式类的滑块的dataTipStyleName属性设置为下面的代码所示
<mx:VSlider id="slider"  
            dataTipFormatFunction="formatSliderDataTip"

dataTipStyleName="tooltipStyle"/>
下面为放大和缩小按钮来改变皮肤类：
设置新的皮肤类引用的放大和缩小按钮。新的皮肤的类更改图标的按钮。在后续步骤中，您将创建这些被引用的皮肤类。