WebGIS经典例子

1、（一）ArcGIS.Server.9.3和ArcGIS API for Flex实现基本的地图浏览1（二）ArcGIS.Server.9.3和ArcGIS API for Flex实现动态图层和瓦片图层叠加显示5（三）ArcGIS.Server.9.3和ArcGIS API for Flex实现自己的Toc控件8（四）ArcGIS.Server.9.3和ArcGIS API for Flex实现Toolbar功能16（五）ArcGIS.Server.9.3和ArcGIS API for Flex实现GraphicsLayer上画点、线、面20(六)ArcGIS.Server.9.3和ArcGI

2、S API for Flex实现Identify的功能图查属性25（七）ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能30（八）ArcGIS.Server.9.3和ArcGIS API for Flex实现MapTips37（九）ArcGIS.Server.9.3和ArcGIS API for Flex在MapTips显示饼图数据统计42（十）ArcGIS.Server.9.3和ArcGIS API for Flex的GeometryService和buffer分析49（十三）ArcGIS.Server.9.3和ArcGIS API f

3、or Flex的GeoprocessingServices和最短路径分析65（一）ArcGIS.Server.9.3和ArcGIS API for Flex实现基本的地图浏览目的：1.ArcGIS API for Flex实现在Flex程序中浏览自己的ArcGIS.Server.9.3中发布的地图，一个最基本的入门例子。准备工作：1.在ArcGIS.Server.9.3发布一个叫usa的Map Service，并且把这个Service启动起来。2.安装Flex Builder3。3.下载ArcGIS API for Flex library的开发包arcgis_flex_api_1.0-bet

4、a然后解压缩到文件夹中，地址：完成后的效果图： 开始：1.启动Flex Builder3，点击菜单File-New-Flex Project，然后输入项目名称Project Name:flexMapApp接着点击Next选择输出文件夹（不用修改默认就行）继续Next然后出现如下界面：2.在上面的界面中点击Library path然后点击Add SWC找到上面解压到目录中的agslib-1.0-beta-2008-07-31.swc文件点击ok，在这里就把ArcGIS API for Flex library的开发包引入到工程中来，就可以在工程中使用Esri提供的Flex组件了。3.然后点击Fi

5、nish按钮后就完成了工程的建立工作，工程建立后有会默认建立一个flexMapApp.mxml的文件，这个就是Flex的页面文件，查看一下代码：123 454.是一个空的页面了接下来在这个页面中添加Map控件了，Flex下的Map控件支持ArcGISDynamicMapServiceLayer 、ArcGISImageServiceLayer、ArcGISTiledMapServiceLayer、ArcIMSMapServiceLayer 、GraphicsLayer等几种类型的layer，这些类型的layer区别其实看名字就能知道区别了，比如ArcGISDynamicMapServiceLa

6、yer就是支持ArcGIS Server发布的普通的地图服务，ArcGISTiledMapServiceLayer支持ArcGIS.Server发布的切片缓存地图。5.在这里采用ArcGISDynamicMapServiceLayer，因为上面在ArcGIS Server中发布的USA的Map Service是普通的动态生成的地图，添加Map控件可以输入代码。代码输入可以在标签内输入代码，具体如下：1mx:Application xmlns:mx=” layout=”absolute” xmlns:esri=”2 3 4 5上面的代码中属性url就是上面发布的USA的Map Service的r

7、est服务地址。这样就可以直接运行查看地图效果了，很简单。6.接下来可以对Map控件的属性做一些设置，常用属性解释如下：clickRecenterEnabled：true/false 是否开启按shift键点击地图定位中心的功能。crosshairVisible：true/false 是否在地图的中心显示十字。doubleClickZoomEnabled：true/false 是否开启双击地图放大的功能。keyboardNavigationEnabled ：true/false 是否开启键盘进行地图导航放大缩小的功能。mapNavigationEnabled ：true/false 是否开启地

8、图导航的功能。panArrowsVisible：true/false 是否在地图的四边以及4个角显示移动地图箭头按钮的功能。panEnabled：true/false 是否开启拖拽地图移动的功能。rubberBandZoomEnabled：true/false 是否开启按shift+拉框放大地图的功能。scaleBarVisible：true/false 是否显示放大缩小功能按钮条。scrollWheelZoomEnabled：true/false 是否开启鼠标滚轮放大缩小的功能。logoVisible：true/false 是否地图上显示logo图标。7：本例完成后的所有代码如下：123 4

9、 5 6（二）ArcGIS.Server.9.3和ArcGIS API for Flex实现动态图层和瓦片图层叠加显示2009年09月11日 6:59 上午 | 分类：Flex目的：1.ArcGIS.Server.9.3和ArcGIS API for Flex实现动态图层和瓦片图层叠加显示，在瓦片基图上显示动态图层。准备工作：1.在ArcGIS.Server.9.3发布一个叫USA的Map Service，并且把这个Service启动起来，这个作为动态图层数据。2.瓦片数据我这里没有现成的就采用Esri提供的rest世界地图数据服务，地址如下：完成后的效果图： 开始：1.启动Flex Buil

10、der3，点击菜单File-New-Flex Project，然后输入项目名称Project Name:flexMapApp接着点击Next选择输出文件夹（不用修改默认就行）继续Next然后出现如下界面：2.在上面的界面中点击Library path然后点击Add SWC找到上面解压到目录中的agslib-1.0-beta-2008-07-31.swc文件点击ok，在这里就把ArcGIS API for Flex library的开发包引入到工程中来，就可以在工程中使用Esri提供的Flex组件了。3.这里要显示2种地图数据一种是瓦块图、一种是动态图，这样就需要ArcGISTiledMapSe

11、rviceLayer和ArcGISDynamicMapServiceLayer支持，关于这个可以看第一篇了有讲到，在这里瓦块图是作为底图显示首先要先添加ArcGISTiledMapServiceLayer，具体代码如下：Code12mx:Application xmlns:mx=” layout=”absolute” backgroundColor=”white” xmlns:esri=”3 4 5 6 7 8 9 4.上面的代码非常简单，首先是在页面上添加了一个Canvas控件用来作为地图的框，然后是在Canvas控件内添加了一个Map控件同时设置好了ArcGISTiledMapServic

12、eLayer这样运行起来就可以浏览世界地图了。5.接下来要在底图上显示上面在ArcGIS.Server.9.3发布一个叫USA的动态数据，添加ArcGISDynamicMapServiceLayer并且设置，具体的代码如下： 1 2mx:Application xmlns:mx=” layout=”absolute” backgroundColor=”white” xmlns:esri=” 3 4 5 6 7 8 9 10 11126. 上面的代码中添加了 ，这个url地址就是发布的USA的rest地址，安装好Ags9.3后可以有ArcGIS Services Directory菜单可以浏览自

13、己发布的所有的rest服务。这样就完成了2种地图类型的叠加显示可以运行查看一下效果。7.通过浏览效果可以发现地图显示范围很大不是以USA为显示范围，这样可以Map控件的extent属性设置一下地图的显示视图范围，这里设置以USA的数据范围为地图默认显示范围，可以在ArcGIS Services Directory浏览USA的MapServer查找到USA数据的最多视图范围为XMin: -127.968857954995、YMin: 25.5778580720472、XMax: -65.0742781827045、YMax: 51.2983251993735，根据这些参数在mx:Applicat

14、ion内添加一个esri:Extent标签如下代码：7. 8. 然后给esri:Map添加一个extent=”allUsa”属性，这样就设置了Map控件的默认视图范围为ID为allUsa的ectent,这样就完成了这个练习。9.其他的还可以设置MapServiceLayer中选择自己需要显示部分的图层，比如USA的地图数据中有4个图层分别为Cities、Highways、States、Counties，现在只想显示States和Counties图层，可以加入如下代码：Code12 3 4 25 36 7 8（三）ArcGIS.Server.9.3和ArcGIS API for Flex实现自己

15、的Toc控件目的：1.ArcGIS API for Flex没有提供现成的Toc控件，这里来实现自己的Toc控件。准备工作：1.在ArcGIS.Server.9.3发布一个叫USA的Map Service，并且把这个Service启动起来。完成后的效果图： 开始：1.启动Flex Builder3新建工程以及引入ArcGIS API for Flex library的开发包，这个过程前面2篇都讲过了这里就不啰嗦了。2.新建LayersOnAndOff.mxml页面，然后在页面上添加Map控件以及设置ArcGISDynamicMapServiceLayer，添加一个ComboBox控件用来地图切

16、换显示。具体代码如下： 1 2 3 4 5 6 7 8 9 10 11 123.对上面的代码做一下解释，首先添加了一个id为arr的对象数组作为ComboBox的数据源，arr的对象数组包含2个对象：一个是上面发布的USA得rest地址，一个是Esri提供的在线的rest地址。然后在Map控件的ArcGISDynamicMapServiceLayer的url属性绑定ComboBox的选择值，这样当ComboBox选择发生变化时地图也会根据rest地址进行切换显示。4.接下来做Toc控件了，首先在src目录下新添加一个叫uc的目录，然后在uc下新建TreeToc.mxml文件这个就是用来实现To

17、c功能的。Toc控件这里是用Flex提供的Tree控件的基础上实现的，具体代码如下： 1 2 3 4 145146147 uc.TreeRenderer1481491505.对上面的代码做一下解释，首先Toc控件是在Tree控件的基础上实现的，这个Tree控件获取Layers数据作为数据源进行绑定显示，同时提供了显示图层隐藏图层等方法。最后这个Tree添加了一个叫uc.TreeRenderer的itemRenderer（项渲染器），也就是说Tree的每一个节点都是由这个itemRenderer来负责显示。那也就是说还需要实现uc.TreeRenderer的功能。6.在uc目录下新增加TreeR

18、enderer.mxml的文件，这个因为是itemRenderer所以需要implements=”mx.controls.listClasses.IDropInListItemRenderer”，具体代码如下： 1 2 3 4 43 44 45 46 47 48497.上面的代码中主要是在HBox控件中放了一个CheckBox、一个Image、一个Label，并且为CheckBok添加了点击事件可以控制图层的隐藏显示。8.这样完成了Toc控件的开发，接下来是要在LayersOnAndOff.mxml页面使用这个控件，增加如下代码（红色部分）： 1 2 3 4 5 6 7 8 9 10 11 12 13 149.上面代码的红色部分添加了TreeToc，并且设置了一个layer的属性值是绑定myDynamicService。这样完成了所有功能就可以运行查询效果了。（四）ArcGIS.Server.9.3和ArcGIS API for Flex实现Toolbar功能目的：1.ArcGIS API for Flex实现Toolbar功能，包括ZoomIn、ZoomOut、Pan、PrevExtent、NextExtent、FullExtent功能。准备工作：1.这次地图数据就用Esri提供的完成后的效果图： 开始：