关于造型和外观导航
首先贴上一张我修改后的导航条截图:
导航滑块用于显示层在预定义的尺度。它包括一个滑块,放大和缩小按钮。本主题说明如何您可以更改的默认外观的导航控制,以满足您的项目。
下表列出了各种方法来改变滑块导航:
不同方式的改变滑块导航
改变使用层叠样式表(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
- 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>
更改的位图图像作为图标图像显示放大按钮。该图像文件,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>