ArcGIS.Server.9.3和ArcGIS API for Flex实现MapTips（八）

发布时间：2020-12-15 04:12:25 所属栏目：百科来源：网络整理

导读：目的： 1.ArcGIS API for Flex 实现MapTips功能，在USA的地图上添加城市点，鼠标移上去的时候显示MapTips可以查看城市的详细信息。准备工作： 1. 在ArcGIS.Server.9.3发布一个叫usa的Map Service，并且把这个Service启动起来。 2.采用Esri在线数据http://

目的：
1.ArcGIS API for Flex实现MapTips功能，在USA的地图上添加城市点，鼠标移上去的时候显示MapTips可以查看城市的详细信息。
准备工作：
1.在ArcGIS.Server.9.3发布一个叫usa的Map Service，并且把这个Service启动起来。
2.采用Esri在线数据http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer
3.去Esri下载新的ArcGIS API for Flex library开发包，昨天发布了1.0正式版，以后的文章都是基于正式版写。
完成后的效果图：

开始：
1.启动Flex Builder3新建工程以及引入1.0正式版的ArcGIS API for Flex library的开发包。
2.新建showInfoWindow.mxml页面，?整个功能主要分2部分，第一部分功能实现从我们上面发的动态地图USA的数据中读取Cities图层的城市点数据显示到ArcGISTiledMapServiceLayer的NPS_Physical_World_2D的地图上面。第二部分功能实现当鼠标移动到哪些数据点上时显示城市详细信息，鼠标移开时隐藏信息显示。
3.首先添加Map控件以及用来显示的NPS_Physical_World_2D的ArcGISTiledMapServiceLayer，用来显示Cities图层的城市点数据的GraphicsLayer，具体代码如下：

 
1
<esri:Extent?id="usaExtent"?xmin="-158.176464137356"?ymin="19.702481852249"?xmax="-68.7830120908013"?ymax="64.8483018935526"?/>
2
????mx:Canvas?width="557"?height="411"?borderStyle="solid"?borderThickness="3"?horizontalCenter="-58"?verticalCenter="16">3esri:Map?="myMap"?extent="{usaExtent}"4
????????esri:ArcGISTiledMapServiceLayer?url="http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer"5esri:GraphicsLayer?="myGraphicsLayer"6</esri:Map7mx:Canvas>

4.上面的代码中添加了id为usaExtent的Extent用来设置当前地图的显示范围为USA。
5.在添加一个点样式的定义用来设置地图上城市点的显示样式：

esri:SimpleMarkerSymbol? ="defaultSymbol" ?color ="0x00FF00" ?style ="circle" ?size ="12" ?alpha ="0.5" esri:SimpleLineSymbol esri:SimpleMarkerSymbol >

6.接下来需要在地图初始化的时候读取 Cities图层的城市点数据显示到GraphicsLayer的功能。在mx:Application内添加mx:initialize标签实现：

?1 
 
<mx:initialize>
?2
????????<![CDATA[
?3
????????????//实例化QueryTask并且把图层0作为参数，图层0就是Cities图层
?4
????????????var?queryTask?:?QueryTask?=?new?QueryTask("http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer/0");
?5
????????????var?query?:?Query?=?new?Query();
?6
????????????//设置查询语句
?7
????????????query.where?=?"AREANAME?=?'Washington'";
?8
????????????//设置是否返回Geometry
?9
????????????query.returnGeometry?=?true;
10
????????????//设置查询需要返回的字段
11
????????????query.outFields?=?["AREANAME","POP2000","CLASS","ST","CAPITAL"];
12
????????????//进行查询
13
????????????queryTask.execute(query,?new?AsyncResponder(?onResult,?onFault?));
14
????????????
15
????????????//查询完成后调用方法
16
????????????function?onResult(?featureSet?:?FeatureSet,?token?:?Object?=?null?)?:?void
17
????????????{
18
???????????????for?each?(?var?myGraphic?:?Graphic?in?featureSet.features?)
19
???????????????{
20
?????????????????????//为城市点添加鼠标移动上去的事件监听
21
?????????????????????myGraphic.addEventListener(MouseEvent.ROLL_OVER,maouSEOverHandler);22
?????????????????????//为城市点添加鼠标移开的事件监听
23
?????????????????????myGraphic.addEventListener(MouseEvent.ROLL_OUT,maouSEOutHandler);
24
??????????????????//显示城市点的样式
25
??????????????????myGraphic.symbol?=?defaultSymbol;
26
??????????????????//添加到GraphicsLayer进行显示
27
??????????????????myGraphicsLayer.add(?myGraphic?);
28
???????????????}29
????????????}
30
????????????//查询错误后调用方法，显示错误信息
31
????????????function?onFault(?info?:?Object,128); line-height:1.5; font-family:'Courier New'; font-size:12px">32
????????????33
???????????????Alert.show(?info.toString()?);
34
????????????35

36
????????]]>
37
????</mx:initialize> 
 

7.通过上面的代码实现了把城市点数据读取到地图上显示的功能并且为城市点数据添加了鼠标移动上去的事件监听和鼠标移开的事件监听的2个事件方法，显示城市相信信息和隐藏信息显示就在这个2个方法中实现的，显示信息用Map控件的infoWindow功能实现，这里要对 infoWindow做一些我们自己的设置，首先添加cityInfo.mxml文件用来作为 infoWindow的content内容用，实现非常的简单了不作具体解释了，代码如下：

?1 
 
<?xml?version="1.0"?encoding="utf-8"?>?2
mx:VBox?xmlns:mx="http://www.adobe.com/2006/mxml"?3mx:String?="AREANAME"></mx:String?4="CLASS"?5="ST"?6="CAPITAL"?7="POP2000"?8mx:Label?text="AREANAME:?{AREANAME}"?9="CLASS:?{CLASS}"10="ST:?{ST}"11="CAPITAL:?{CAPITAL}"12="POP2000:?{POP2000}"13mx:VBox

8.回到 showInfoWindow.mxml页面添加mx:Script标签，然后在标签中首先添加对infowindow进行设置的代码：

// 
 实例化cityInfo.mxml????????????private?const?m_content:cityInfo=new?cityInfo();
????????????覆写createChildren方法，对infoWindow进行设置????????????override?protected?function?createChildren():void
????????????{
?6
????????????????super.createChildren();
?7
????????????????//不显示标题头?8
????????????????myMap.infoWindow.labelVisible?=?false;
?9设置显示内容10????????????????myMap.infoWindow.content??m_content;
11不显示关闭按钮12????????????????myMap.infoWindow.closeButtonVisible?13
????????????} 
 

9.最后就是编写鼠标移动上去的事件监听和鼠标移开的事件监听的2个事件方法：

鼠标移上去事件显示infoWindow 
 ????????????private? 
 ?maouSEOverHandler(event:MouseEvent): 
 
???????????? 
 ?4获取当前鼠标移动上去的点对象?5????????????????var?graphic:GraphicGraphic(event.target);
转换成MapPoint?mapPoint:MapPointMapPoint(graphic.geometry);
设置cityInfo.mxml的AREANAME????????????????m_content.AREANAME??graphic.attributes.AREANAME;
设置cityInfo.mxml的CLASS????????????????m_content.CLASS??graphic.attributes.CLASS;
设置cityInfo.mxml的CAPITAL????????????????m_content.CAPITAL??graphic.attributes.CAPITAL;
14设置cityInfo.mxml的ST15????????????????m_content.ST??graphic.attributes.ST;
16设置cityInfo.mxml的POP200017????????????????m_content.POP2000??graphic.attributes.POP2000;
18显示infoWindow????????????????myMap.infoWindow.show(mapPoint);
????????????} 
 21 
 22 
 鼠标移开事件隐藏infoWindow 
 23 
 ?maouSEOutHandler(event:MouseEvent): 
 24 
 
???????????? 
 25
????????????????myMap.infoWindow.hide();
26 
 

10.完成所有的功能运行测试效果。

（编辑：李大同）

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