import com.esri.ags.components.Navigation; import com.esri.ags.events.MapMouseEvent; import com.esri.ags.tools.NavigationTool; import com.esri.ags.events.ExtentEvent; import flash.events.MouseEvent; import mx.controls.Button; public class MyNavigation extends Navigation { public function MyNavigation() { super(); } [Embed(source='image/nav_fullextent.png')] [Bindable] private var fullExtentImage:Class; private var fullButton:Button = new Button(); private var navTool:NavigationTool=new NavigationTool(); //navTool.map=map; override protected function createChildren():void { super.createChildren(); navTool.map=map; fullButton.width=12; fullButton.height=12; fullButton.toolTip="Zoom to full Map Extent"; fullButton.toggle=true; fullButton.setStyle('skin',null); fullButton.setStyle("icon", fullExtentImage); fullButton.addEventListener(MouseEvent.CLICK, fullExtentClickHandler); addChild(fullButton); //addElement(fullButton); } private function fullExtentClickHandler(event:MouseEvent):void { event.stopImmediatePropagation(); navTool.zoomToFullExtent(); } }
<?xml version="1.0" encoding="utf-8"?> <!-- Copyright (c) 2010 ESRI All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions. You may freely redistribute and use this sample code, with or without modification, provided you include the original copyright notice and use restrictions. See use restrictions in use_restrictions.txt. --> <!--- The default skin class for the Navigation component. --> <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" xmlns:esri="http://www.esri.com/2008/ags"> <fx:Metadata> /** * A strongly typed property that references the component to which this skin is applied. */ [HostComponent("com.esri.ags.components.Navigation")] </fx:Metadata> <fx:Declarations> <!--- @private --> <mx:NumberFormatter id="numberFormatter" rounding="nearest"/> <esri:NavigationTool id="navTool" map="{hostComponent.map}"/> </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 ? "1:" + numberFormatter.format(lod.scale) : "Error"; } ]]> </fx:Script> <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="com.esri.ags.skins.NavigationZoomInButtonSkin" toolTip="{resourceManager.getString('ESRIMessages', 'zoomInTooltip')}"/> <mx:VSlider id="slider" dataTipFormatFunction="formatSliderDataTip" dataTipPlacement="right" 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" skinClass="com.esri.ags.skins.NavigationZoomOutButtonSkin" toolTip="{resourceManager.getString('ESRIMessages', 'zoomOutTooltip')}"/> <s:Button click="navTool.zoomToFullExtent()" label="Full"/> </s:VGroup> </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:mx="library://ns.adobe.com/flex/mx" xmlns:esri="http://www.esri.com/2008/ags"> <fx:Style> @namespace esri "http://www.esri.com/2008/ags"; esri|Navigation { skin-class: ClassReference("skins.NavigationSkin"); } </fx:Style> <esri:Map> <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/> </esri:Map> </s:Application>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.