WebGIS经典例子 - 图文

由天下分享时间：2025/1/9 12:52:50 加入收藏我要投稿点赞

2.在上面的界面中点击Library path然后点击Add SWC找到上面解压到目录中的agslib-1.0-beta-2008-07-31.swc文件点击ok，在这里就把ArcGIS API for Flex library的开发包引入到工程中来，就可以在工程中使用Esri提供的Flex组件了。

3.这里要显示2种地图数据一种是瓦块图、一种是动态图，这样就需要ArcGISTiledMapServiceLayer和ArcGISDynamicMapServiceLayer支持，关于这个可以看第一篇了有讲到，在这里瓦块图是作为底图显示首先要先添加ArcGISTiledMapServiceLayer，具体代码如下：

Code

1 23

xmlns:mx=”http://www.adobe.com/2006/mxml”

layout=”absolute”

backgroundColor=”white” xmlns:esri=”http://www.esri.com/2008/ags”>

4 5” />

url=”http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer

7 8

4.上面的代码非常简单，首先是在页面上添加了一个Canvas控件用来作为地图的框，然后是在Canvas控件内添加了一个Map控件同时设置好了ArcGISTiledMapServiceLayer这样运行起来就可以浏览世界地图了。

5.接下来要在底图上显示上面在ArcGIS.Server.9.3发布一个叫USA的动态数据，添加ArcGISDynamicMapServiceLayer并且设置，具体的代码如下： 1 2 3

xmlns:mx=”http://www.adobe.com/2006/mxml”

layout=”absolute”

backgroundColor=”white” xmlns:esri=”http://www.esri.com/2008/ags”>

4 5” /> 6

url=”http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer” > 7 8 9 10

11 12

上

面

的

代

码

中

添

加

了

url=”http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer” >

，这个url地址就是发布的USA的rest地址，安装好Ags9.3后可以有ArcGIS Services Directory菜单可以浏览自己发布的所有的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:Application内添加一个esri:Extent标签如下代码： 1

url=”http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer

xmax=”-61.4068547410964″ ymax=”74.0304580085983″/>

8.然后给esri:Map添加一个extent=”{allUsa}”属性，这样就设置了Map控件的默认视图范围为ID为allUsa的ectent,这样就完成了这个练习。

9.其他的还可以设置MapServiceLayer中选择自己需要显示部分的图层，比如USA的地图数据中有4个图层分别为Cities、Highways、States、Counties，现在只想显示States和Counties图层，可以加入如下代码：

Code 1

2 3 4 2 5 3 6 7

url=”http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer” >

（三）ArcGIS.Server.9.3和ArcGIS API for Flex实现自己的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控件用来地图切换显示。具体代码如下：

1 2

xmlns:mx=”http://www.adobe.com/2006/mxml”

layout=”absolute”

backgroundColor=”white” xmlns:esri=”http://www.esri.com/2008/ags” > 3 4 5

label=”USA” label=”USA_2D”

data=”http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer” />

data=”http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer” /> 6 7

9 10

id=”myDynamicService”

url=”{myURL.selectedItem.data}” load=”myDynamicService.defaultVisibleLayers()”/> 11 12

3.对上面的代码做一下解释，首先添加了一个id为arr的对象数组作为ComboBox的数

据源，arr的对象数组包含2个对象：一个是上面发布的USA得rest地址，一个是Esri提供的在线的rest地址。然后在Map控件的ArcGISDynamicMapServiceLayer的url属性绑定ComboBox的选择值，这样当ComboBox选择发生变化时地图也会根据rest地址进行切换显示。

4.接下来做Toc控件了，首先在src目录下新添加一个叫uc的目录，然后在uc下新建TreeToc.mxml文件这个就是用来实现Toc功能的。Toc控件这里是用Flex提供的Tree控件的基础上实现的，具体代码如下： 1

2 3 4

5 import mx.collections.ArrayCollection;

6 import com.esri.ags.layers.ArcIMSMapServiceLayer;

7 import com.esri.ags.layers.ArcGISDynamicMapServiceLayer; 8 import com.esri.ags.events.LayerEvent; 9 import com.esri.ags.layers.Layer; 10 import com.esri.ags.layers.LayerInfo; 11 import mx.utils.ObjectUtil; 12

13 private var layerInfos:Array; 14 //图层

15 private var _layer:Layer; 16 //图层是否更新标识

17 private var _layerChanged:Boolean; 18 //获取图层

19 public function get layer():Layer 20 {

21 return _layer; 22 }

23 //设置图层

24 public function set layer(value:Layer):void 25 {

26 _layer = value; 27 _layerChanged=true; 28 invalidateProperties(); 29 }

30 //设置组件属性

31 override protected function commitProperties():void 32 {

33 if (_layerChanged)