2. it
  3. 样式和外观导航 Navigation

样式和外观导航 Navigation

mac2022-06-30  37

关于造型和外观导航

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

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

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

不同方式的改变滑块导航

改变使用层叠样式表（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文件夹，然后重命名这些文件。请参阅以下内容：

 

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

修改的MyNavigationSkin.mxml的的皮肤类

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

 

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

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

private function formatSliderDataTip(value:Number):String  {      const lod:LOD = hostComponent.map.lods[value];      return lod ? (lod.level + 1).toString() : "Error";  }  执行下列步骤来修改提示的外观：  

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

<fx:Style>  

    .tooltipStyle      {          backgroundAlpha: 1.0;          backgroundColor: haloBlue;          fontWeight: bold;          color: white;      }  </fx:Style>

 

 

定义的样式类的滑块的dataTipStyleName属性设置为下面的代码所示 < mx:VSlider  id= "slider"                dataTipFormatFunction= "formatSliderDataTip"  

            ...  

dataTipStyleName="tooltipStyle"/>

下面为放大和缩小按钮来改变皮肤类：

设置新的皮肤类引用的放大和缩小按钮。新的皮肤的类更改图标的按钮。在后续步骤中，您将创建这些被引用的皮肤类。

<s:Button id="zoomInButton"  

            ...  

skinClass="MyNavigationZoomInButtonSkin"

            ... />

...  

<s:Button id="zoomOutButton"

            ...  

skinClass="MyNavigationZoomOutButtonSkin"

            ... />

 

修改后的MyNavigationSkin.mxml文件看起来像下面这样：  

<?xml version="1.0" encoding="utf-8"?>  

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Metadata>

    [HostComponent("com.esri.ags.components.Navigation")]  

</fx:Metadata>

<fx:Declarations>

<mx:NumberFormatter id="numberFormatter" rounding="nearest"/>

</fx:Declarations>

<fx:Script>

<![CDATA[

            import com.esri.ags.layers.supportClasses.LOD;

            private function formatSliderDataTip(value:Number):String

            {

                const lod:LOD = hostComponent.map.lods[value];

            return lod ? (lod.level + 1).toString() : "Error";

            }

        ]]>

</fx:Script>

<fx:Style>

        .tooltipStyle  

        {  

            backgroundAlpha: 1.0;  

            backgroundColor: haloBlue;  

            fontWeight: bold;  

            color: white;  

        }  

</fx:Style>

<s:states>

<s:State name="normal"/>

<s:State name="disabled"/>

<s:State name="normalWithSlider"/>

<s:State name="disabledWithSlider"/>

</s:states>

<s:Rect bottom="0"

left="0"

radiusX="10"

radiusY="10"

right="0"

top="0">

<s:fill>

<s:SolidColor alpha="0.5" color="0x000000"/>

</s:fill>

</s:Rect>

<s:VGroup gap="2"

horizontalAlign="center"

minHeight="34"

paddingBottom="5"

paddingLeft="3"

paddingRight="3"

paddingTop="4">

<s:Button id="zoomInButton"

enabled.disabled="false"

enabled.disabledWithSlider="false"

skinClass="MyNavigationZoomInButtonSkin"

toolTip="{resourceManager.getString('ESRIMessages', 'zoomInTooltip')}" />

<mx:VSlider id="slider"

dataTipFormatFunction="formatSliderDataTip"

dataTipPlacement="left"

enabled.disabled="false"

enabled.disabledWithSlider="false"

enabled.normalWithSlider="true"

height="160"

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}"

dataTipStyleName="tooltipStyle"/>

<s:Button id="zoomOutButton"

enabled.disabled="false"

enabled.disabledWithSlider="false"

skinClass="MyNavigationZoomOutButtonSkin"

toolTip="{resourceManager.getString('ESRIMessages', 'zoomOutTooltip')}"/>

</s:VGroup>

</s:Skin>

修改的MyNavigationZoomInButtonSkin.mxml的的皮肤类

更改使用的图标图像显示放大按钮的位图图像。下面的代码显示了一个图像文件名 ​​为home_icon.png作为位图图像显示按钮的源代码：

<s:BitmapImage  

    bottom="0"  

    ...  

    source="@Embed(source='/assets/home_icon.png')"  

    source.disabled="@Embed(source='/assets/home_icon.png')"  

    source.down="@Embed(source='/assets/home_icon.png')"  

    source.over="@Embed(source='/assets/home_icon.png')"  

/>

修改后的MyNavigationZoomInButtonSkin.mxml文件看起来像下面这样：  

<?xml version="1.0" encoding="utf-8"?>  

  

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"  

        xmlns:s="library://ns.adobe.com/flex/spark"  

        xmlns:mx="library://ns.adobe.com/flex/mx"  

        minHeight="10"  

        minWidth="10">  

  

    <fx:Metadata>  

        [HostComponent("spark.components.Button")]  

    </fx:Metadata>  

  

    <s:states>  

        <s:State name="disabled"/>  

        <s:State name="down"/>  

        <s:State name="over"/>  

        <s:State name="up"/>  

    </s:states>  

  

    <s:BitmapImage  

        bottom="0"  

        left="0"  

        right="0"  

        source="@Embed(source='/assets/home_icon.png')"  

        source.disabled="@Embed(source='/assets/home_icon.png')"  

        source.down="@Embed(source='/assets/home_icon.png')"  

        source.over="@Embed(source='/assets/home_icon.png')"  

        top="0"  

    />  

</s:Skin>

修改的MyNavigationZoomOutButtonSkin.mxml的的皮肤类

更改的位图图像作为图标图像显示放大按钮。该图像文件，globe_icon.png，被用作用于显示的按钮的位图图像的源。

<s:BitmapImage  

    bottom="0"  

    ...  

    source="@Embed(source='/assets/globe_icon.png')"  

    source.disabled="@Embed(source='/assets/globe_icon.png')"  

    source.down="@Embed(source='/assets/globe_icon.png')"  

    source.over="@Embed(source='/assets/globe_icon.png')"  

/>

修改后的MyNavigationZoomOutButtonSkin.mxml文件看起来像下面这样：  

<?xml version="1.0" encoding="utf-8"?>  

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"  

        xmlns:s="library://ns.adobe.com/flex/spark"  

        xmlns:mx="library://ns.adobe.com/flex/mx"  

        minHeight="10"  

        minWidth="10">  

  

    <fx:Metadata>  

        [HostComponent("spark.components.Button")]  

    </fx:Metadata>  

  

    <s:states>  

        <s:State name="disabled"/>  

        <s:State name="down"/>  

        <s:State name="over"/>  

        <s:State name="up"/>  

    </s:states>  

  

    <s:BitmapImage  

        bottom="0"  

        left="0"  

        right="0"  

        source="@Embed(source='/assets/globe_icon.png')"  

        source.disabled="@Embed(source='/assets/globe_icon.png')"  

        source.down="@Embed(source='/assets/globe_icon.png')"  

        source.over="@Embed(source='/assets/globe_icon.png')"  

        top="0"  

    />  

</s:Skin>

在你的应用程序中引用的导航皮肤类

修改后的皮肤类，现在可以用来在应用程序中通过设置皮肤中的类属性的参考。下面的代码显示了修改后的皮肤类应用程序中引用：

<?xml version="1.0" encoding="utf-8"?>  

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  

xmlns:s="library://ns.adobe.com/flex/spark"  xmlns:esri="http://www.esri.com/2008/ags">  

  

<fx:Style>  

        @namespace esri "http://www.esri.com/2008/ags";  

        esri|Navigation  

        {  

            skin-class: ClassReference("MyNavigationSkin");  

        }  

    </fx:Style>  

  

    <esri:Map >  

        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" />  

    </esri:Map>  

</s:Application>

 

 

转载于:https://www.cnblogs.com/x38160/p/3191307.html

相关资源：JAVA上百实例源码以及开源项目
最新回复(0)