arcgis api for flex 開發入門（三）地圖浏覽控件的使用

arcgis api for flex 開發入門（三）地圖浏覽控件的使用

地圖浏覽包括放大，縮小，漫遊，複位，上級視窗，下級視窗等

在arcgis api for flex中，esri 已經封裝好了一個地圖浏覽，我們在程式中可

以直接使用，隻需要幾十行代碼，就可以完成複雜的任務。

首先在上一講的基礎上建立一個Navigation 控件。使用<esri:Navigation>标簽

就可以了。

<esri:Navigation id="navToolbar" map="{myMap}"/>

将<esri:Navigation>标簽的map屬性設定為你要控制的map，也就是說把控件綁到

map上。

然後我們建立一個工具條，用來做對map 浏覽的控制

     <mx:ControlBar horiz paddingBottom="0" paddingTop="0"> 

     <mx:Button label="放大"   click="navToolbar.activate

(Navigation.ZOOM_IN)"  />

     <mx:Button label="縮小"   click="navToolbar.activate

(Navigation.ZOOM_OUT)"  />  

     <mx:Button label="漫遊"   click="navToolbar.activate

(Navigation.PAN)"  />          

      <mx:Button label="上級視窗"   click="navToolbar.zoomToPrevExtent

()"    enabled="{!navToolbar.isFirstExtent}"/>           

       <mx:Button label="下級視窗"      

click="navToolbar.zoomToNextExtent()"    enabled="{!

navToolbar.isLastExtent}"/>        

      <mx:Button label="複位" click="navToolbar.zoomToFullExtent()"/>

button 的click 消息響應函數直接調用<esri:Navigation>控件的函數就可以了

。放大，縮小，漫遊調用的都是激活工具的函數。剩餘3個button的響應函數分别

調用<esri:Navigation>控件zoomToPrevExtent，zoomToNextExtent，

zoomToFullExtent函數就ok了。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:esri="http://www.esri.com/2008/ags"
    pageTitle="Using ArcGIS API for Flex to connect to a cached ArcGIS 
Online service"
    styleName="plain">
    <esri:Navigation id="navToolbar" map="{myMap}"/>
    <esri:SpatialReference id="sr" wkid="4326"/>
     <mx:ControlBar horizontalGap="0" paddingBottom="0" paddingTop="0"> 
     <mx:Button label="放大"   click="navToolbar.activate
(Navigation.ZOOM_IN)"  />
     <mx:Button label="縮小"   click="navToolbar.activate
(Navigation.ZOOM_OUT)"  />  
     <mx:Button label="漫遊"   click="navToolbar.activate
(Navigation.PAN)"  />          
      <mx:Button label="上級視窗"   click="navToolbar.zoomToPrevExtent
()"    enabled="{!navToolbar.isFirstExtent}"/>           
       <mx:Button label="下級視窗"      
click="navToolbar.zoomToNextExtent()"    enabled="{!
navToolbar.isLastExtent}"/>        
      <mx:Button label="複位" click="navToolbar.zoomToFullExtent()"/>
      </mx:ControlBar>
    <esri:Map crosshairVisible="true" id = "myMap">
        <esri:extent>
  <esri:Extent  id = "esriMapExtent" xmin="116" 
ymin="39.5" xmax="116.5" ymax="40.5"/>
  </esri:extent>
        <esri:ArcGISTiledMapServiceLayer
            
url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap
_World_2D/MapServer" />
     <esri:GraphicsLayer id="myGraphicsLayer" 
spatialReference="{sr}"/>
    </esri:Map>
</mx:Application>