Flex arcgis中的Navigation样式

 

我可以自己添加Navigation的外观样式，如下为我自己添加的外观样式：

<?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>
		@namespace mx "library://ns.adobe.com/flex/mx";
		.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="0xFF7E27"/>
		</s:fill>
	</s:Rect>
	
	<s:VGroup gap="2"
			  horizontalAlign="center"
			  paddingBottom="5"
			  paddingLeft="3"
			  paddingRight="3"
			  paddingTop="4">
		
		<s:Button id="zoomInButton"
				  enabled.disabled="false"
				  enabled.disabledWithSlider="false"
				  fontSize="12"
				  skinClass="com.esri.ags.skins.NavigationZoomInButtonSkin"
				  toolTip="放大" />
		
		<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}"
					/>
		
		<s:Button id="zoomOutButton"
				  enabled.disabled="false"
				  enabled.disabledWithSlider="false"
				  fontSize="12"
				  skinClass="com.esri.ags.skins.NavigationZoomOutButtonSkin"
				  toolTip="缩小"/>
	</s:VGroup>
	
</s:Skin>

其中 Button 标签的的skinClass样式设置的是api中的样式也可以自己定义Button 的外观样式。