ArcGIS.Server.9.3和ArcGIS API for Flex实现Toolbar功能(四)
发布时间:2020-12-15 04:12:39 所属栏目:百科 来源:网络整理
导读:目的: 1.ArcGIS API for Flex 实现Toolbar功能,包括ZoomIn、ZoomOut、Pan、PrevExtent、NextExtent、FullExtent功能 。 准备工作: 1.这次地图数据就用Esri提供的http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer
目的:
1
<?
xml?version="1.0"?encoding="utf-8"
?>
3.接下来要实现地图浏览控制就需要添加esri:Navigation控件,这个控件提供了放大、缩小、漫游、前一视图、后一视图等功能方法,在mx:Canvas标签前面添加如下代码:
2 < mx:Application? xmlns:mx ="http://www.adobe.com/2006/mxml" ?layout ="absolute" ?backgroundColor ="white" ?xmlns:esri ="http://www.esri.com/2008/ags" > 3 mx:Canvas? width ="446" ?height ="300" ?borderStyle ="solid" ?borderThickness ="3" ?borderColor ="#3691D1" ?horizontalCenter ="0" ?verticalCenter ="19" 4 ???? esri:Map? id ="myMap" ?width ="100%" ?panArrowsVisible ="true" ?logoVisible ="false" ? 5 ???????? esri:ArcGISTiledMapServiceLayer? url ="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" /> 6 </ esri:Map 7 mx:Canvas 8 mx:Application 9 esri:Navigation? ="navToolbar" ?map ="{myMap}" ? ?1
mx:Script
?2
<![CDATA[
5.接下啦在Map控件的上方位置添加一个mx:
ToggleButtonBar控件,这个控件就是切换按钮组工具条,它可以添加子按钮然后各个子按钮点击时能进行显示等切换。具体代码如下:
?3 ?4 ????????????//图标图片 ?5 ????????????[Bindable]? ?6 ????????????[Embed(source="assets/esriZoomIn.gif")] ?7 ????????????public?var?ZoomIn:Class;? ?8 ???????????? ?9 10 ????????????[Embed(source="assets/esriZoomOut.gif")] 11 ????????????public?var?ZoomOut:Class;? 12 13 14 ????????????[Embed(source="assets/esriPan.gif")] 15 ????????????public?var?Pan:Class;? 16 17 18 ????????????[Embed(source="assets/esriBack.gif")] 19 ????????????public?var?Back:Class;? 20 21 22 ????????????[Embed(source="assets/esriForward.gif")] 23 ????????????public?var?Forward:Class; 24 25 26 ????????????[Embed(source="assets/esriFullExt.gif")] 27 ????????????public?var?FullExt:Class;?? 28 29 ???????? ]]> 30 > mx:ToggleButtonBar?
="toolbar1"
?creationComplete
="initToolbar1()"
?itemClick
="itemClickHandler(event)"
??iconField
="icon"
="-163"
="-151"
mx:dataProvider
?3
mx:Array
?4
mx:Object?
icon
="{ZoomIn}"
?5
="{ZoomOut}"
?6
="{Pan}"
?7
?8
?9
mx:ToggleButtonBar
10
11
6.上面的代码中
ToggleButtonBar控件绑定了一个mx:Array数据源,这个数据源包含3条数据,icon分别对于3张图标用来按钮图标的显示,这3张图片由上的script中定义,
ToggleButtonBar控件定义了iconField属性就是用来显示图标,同时定义了creationComplete事件、itemClick事件,分别实现
ToggleButtonBar的初始化选择以及子按钮点击功能,具体代码如下:
7.接下在在页面上在添加3个按钮用来显示前一视图、后一视图、全图显示,具体代码如下:
9.这样就完成了toolbar的功能,可以运行测试效果。
mx:Button?
="{Back}"
?click
="navToolbarExtent('Prev')"
?enabled
="{!navToolbar.isFirstExtent}"
??horizontalCenter
="-82"
="{Forward}"
="navToolbarExtent('Next')"
="{!navToolbar.isLastExtent}"
="-41"
="{FullExt}"
="navToolbarExtent('Full')"
/>
8.上面代码中添加了3个button,然后设置的小图标、click事件、enabled属性,
enabled属性属性是针对前一视图和后一视图功能按钮了。
click事件代码如下:
private?
?navToolbarExtent(type:String):
????????????
?3if(type=="Prev)前一视图????????????????????????????????????navToolbar.zoomToPrevExtent();
?6?7elseNext后一视图?8????????????????????????????????????navToolbar.zoomToNextExtent(); Full// ????????????????????????????????????navToolbar.zoomToFullExtent(); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |