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>