加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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.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.启动Flex Builder3新建工程以及引入ArcGIS API for Flex library的开发包,这个过程前面几篇都讲过了这里就不啰嗦了。
2.新建ToolBar.mxml页面,然后在页面上添加Map控件以及设置ArcGISTiledMapServiceLayer,具体代码如下:

1

<? xml?version="1.0"?encoding="utf-8" ?>
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

3.接下来要实现地图浏览控制就需要添加esri:Navigation控件,这个控件提供了放大、缩小、漫游、前一视图、后一视图等功能方法,在mx:Canvas标签前面添加如下代码:


esri:Navigation? ="navToolbar" ?map ="{myMap}" ?

4.首先先来引入按钮图标图片,在src目录下新建assets目录,然后放6张图片在这个文件夹里分别用于6个功能按钮,然后添加如下代码:
?1

mx:Script ?2 <![CDATA[
?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 >
5.接下啦在Map控件的上方位置添加一个mx: ToggleButtonBar控件,这个控件就是切换按钮组工具条,它可以添加子按钮然后各个子按钮点击时能进行显示等切换。具体代码如下:
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的初始化选择以及子按钮点击功能,具体代码如下:
// 初始化toolbar1选中项为Pan ????????????private? function ?initToolbar1(): void

????????????
{
?4

????????????????toolbar1.selectedIndex?
=?2;
?5

????????????}

????????????
ToggleButtonBar的子按钮点击事件 ?itemClickHandler(event:ItemClickEvent):

????????????
?9

????????????????
switch(event.index)
10

????????????????
11

????????????????????
case0://选择为zoomin
12

????????????????????13

????????????????????????
激活navToolbar的ZOOM_IN14

????????????????????????navToolbar.activate(Navigation.ZOOM_IN);
15break16

????????????????????}
171选择为zoomout18

????????????????????19激活navToolbar的ZOOM_OUT20????????????????????????navToolbar.activate(Navigation.ZOOM_OUT);
212223选择为pan24

????????????????????25激活navToolbar的PAN26????????????????????????navToolbar.activate(Navigation.PAN);27????????????????????????navToolbar.deactivate();
282930

????????????????}
31

????????????}
7.接下在在页面上在添加3个按钮用来显示前一视图、后一视图、全图显示,具体代码如下:
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();
9.这样就完成了toolbar的功能,可以运行测试效果。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读