webgis开发教程

【实例简介】
一步一步详细教你开发webgis。适合新人学习使用
Name: flex MapApp按着点击Next选择输出文件夹(不用修改默认就行)继续Next然后岀现 下界面: New Flex Project Create a Flex project. Set the buld paths for the hew Flex project iB Souce path B. Lbrary path Framework iniage: Merged into code Ruld path Braies: 4-E Flex 3. 1-D: Flex Bulder 3\sds\3.1.0 Add project. 国ks Add SwC Older Add sw d月x E p Yerfy RSl digests (recommended for production) Main source folder: sre Browse. 替 n apeiron file: FiendMapappmxm Rowse , Output folder URLt < Rack toxt? Nish Cancel 2在上面的界面中点击 Library path然后点击 Add swc找到上面解压到目录中的 aglia-1.0-bcta-200807-31.swc文件点击ok,在这里就把 ArcGIS API for Flex library的开发包 引入到工程中来,就可以在工程中使用Esri提供的Flex组件了。 3.然后点 Finish按钮后就完成了工程的建立工作,工程建立后有会默认建立一个 flexMap.App. mxml的文件,这个就是Flex的页面文件,查看一下代码: 1<? xml version-”1.0″ encoding-" utf-8"?> 2<imx:Applicationxmins:Imxhtlp://www.adobe.com/2006/mxml"layout=absolute 4 </mx: Application 4是一个空的页面了接下米在这个页面中添加Map控件了,lex下的Map控件支持 ArcGISDynamicMap Service Layer ArcGISImage ServiceLayer, ArcGISTiledMap Layer ArcIMSMap Layer、 GraphicsLayer等几种类型的 layer,这些类型的 laver区别其实看 名字就能知道区别了,比如 ArcGISDynamicMap ServiceLayer就是支持 ArcGIs Server发布的 普通的地图服务, ArcGISTilcdMap scrviccLaycr支持Arc(S. Server发布的切片缓存地图。 5在这里采用 ArcGISDynamicMapServicelayer,因为上面在 ArcGIS Server中发布的USA的 Map service是普通的动态生成的地图,添加Map控件可以输入代码。 代码输入可以在<mx: Appliection>标签内输入代码,具体如下 <mx:Applicationxmins:mxhttp://www.adobe.com/2006/mxml"layoutabsolute nins:esri-htlp:/www.esri.com/2008/ags' KesrI: Map <esri: Arc GISDvnamic Map servicelaver url="http://jh-53a435fbc0e8/arcgis/rest/services/usa/mapserVer"7> 4 esri: m 5</mx: Application 上面的代码中< esri: ArcGISDynamicMapServiceLayer>属性url就是上面发布的USA的 Map service的rest服务地址。 这样就可以直接运行查看地图效果了,很简单。 6接下来可以对Map控件的属性做一些设置,常用属性解释如下 clickRecenterEnabled:true/ false是否开启按 shift键点击地图定位中心的功能 crosshair visible:tue/ false是否在地图的中心显示十字 double click Zoom Enabled: true/false是否开启双击地图放大的功能 keyboardNavigation Enabled: true/false是否开启键盘进行地图导航放大缩小的功能。 mapNavigation Enabled: true/ false是否开启地图导航的功能。 pan Arrows visible: true/false是否在地图的四边以及4个角显示移动地图箭头按钮的功能。 pan Enabled: true/false是开启拖拽地图移动的功能 rubberBandZoomEnabled:true/ false是否开启按shit+拉框放大地图的功能。 scalc barvisible:truc/ falsc是否显示放大缩小功能按钮条。 scrollwheelzoom Enabled: true/ false是否开启鼠标滚轮放大缩小的功能。 logoⅤ isible: true/false是否地图上显示logo图标。 本例完成后的所有代码如下 1<? xml version=”l.0″ encoding=”utfg"?> mx:Applicationminsmxhttp://www.adobe.com/2006/mxmllayoutabsolute xmins:esri-http:/www.esri.com/2008/ags"backgroundcolor=white> <esri: Map horizontalCenter=”-34 verticalcenter-”1" width=”400″ height=250″ logo visible false " border Style-solid'crosshair Visible-true""pan Arrows Visible"true". 4 esri: Arc GISDynamicMap Service Layer url=http://jh-53a435fbcoe8/arcgis/rest/services/usA/mapsserver7> </csri: Map 6 </mx: Application> (二) Arcgis server93和 arcgis api for Flex实现动态图层和瓦片图层叠加显示 2009年09月11日6:59上午|分类:Flex 日的: ArcGis. serve93和 Arcgis aPi for flex实现动态图层和瓦片图层叠加显示,在瓦片基图上 显示动态图层。 准备工作: 1在 ArcGIS. Server.9.3发布一个叫USA的 Map service,并且把这个 Service启动起来,这个 作为动态图层数据。 2.瓦片数据我这里没有现成的就采用Fsri提供的rest世界地图数据服务,地址如下: http://server.arcgisonline.com/arcgis/reSt/servicEs/esRiStreetmapWorld2d/MapservEro 完成后的效果图 Alaska Canada Edmonton Vancouver Wonga North eYdt acific ocean Die 01000km Mexico Hwai 1000 mi Monterrey Guadalajara HivaN 开始 1.启动 Flex Builder.,点击菜单Filc->Ncw> Flex Projcct,然后输入项目名称 Project Name: flex MapApp接着点击Next选择输出文件夹(不用修改默认就行)继续Next然后出现 如下界面: a New Flex Project Create a Flex project Set the buld paths for the new Flex project ②5 uce path B. Ubrary path Framework iniage: Merged into code Buld path Bares: e-e Flex 3.1.D: \Flex Budder sds(3.1.0 Add Project. Add swC Edlder. Add swc Add月ex9s ReOve Yerfy RS digests(recommended for production) Main source folder: sre Browde,, 替 in applcation file: FiedMapApp.mxm Output fo der URLt Nish Cancel 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 <? xml version,1.0"encoding,?> 2<imx:ApplicationxminsImxhtlp://www.adobe.com/2006/mxmllayout=absolute backgroundcolor=white"xmlns:esri=http://www.esri.com/2008/ags <mx: Canvas width-”500″ height”300″ horizontalcenter”-63″ verticalcenters=”-13″ borderStvle= solid” border-=”2" border Color=”#439AD7" Esri: Map logo Visible=false panArrows Visible=true> <csri: ArcGISTiledMap Service Layer urlhttp://server.arcgisonline.com/arcgis/resT/serviceS/esrIStreetmapWorld2d/MapserVer 6 </esri: Map> </mx: Canvas> 8 9 </mx: Application 4.上面的代码非常简单,首先是在页面上添加了一个 Canvas控件用米作为地图的框, 然后是在 Canvas控件内添加了一个Map控件同时设置好了 ArcGISTilcdMapScrvicclaycr这 样运行起来就可以浏览世界地图了。 5.接下来要在底图上显示上面在 ArcGIs. Server.9.3发布一个叫USA的动态数据,添加 ArcGISDynamicMapService Layer并且设置,具体的代码如下: I <?xml version=1.0"encoding=utf-8?> <mx:Applicationxminsmx-http://www.adobe.com/2006/mxml"layout-absolute backgroundcolor-white"xmlns:esri=http://www.esri.com/2008/ags <mx: Canvas width=”500″ height=”300″ horizontalcenter=”-63″ yerticalcenter-”-13″ borderstvle- solid” borderthickness-”2" bordercolor”#439AD7” Kesri: Map logo Visible="false" panArrows Visible=true esri: Arc GISTiledMapServiceLayer url=http:/server.arcgisonline.com/arcgis/rest/services/esriStreetmapWorld2d/mApservEr Kesri: ArcGISDynamic Map service layer url=http:/jh-53a435fbcoe8/arcgis/rest/services/uSa/mapserver"> 789 </esri: ArcGISDynamicMapservice Layer> /esri: Map> /mx: Canvas> 10 11 </mx: Application> 12 6.上面的代码中添加了<csi: ArcGISDynamicMap ScrviccLaycr urlhttp:/jh-53a435fbc0e8/arcgis/rest/services/usa/mapserver <esr: ArcGISDynamicMapService Layer>,这个ur地址就是发布的USA的rest地址,安 装好Ag9.3后可以有 ArcGIS Scrviccs Directory菜单可以浏览自己发布的所有的rest服务 这样就完成了2种地图类型的叠加显示可以运行查看一下效果。 7通过浏览效果可以发地图显示范围很大不是以UA为显示范围,这样可以Map控件的 extent属性设置一下地图的显示视图范围,这里设置以USA的数据范围为地图默认显示范 围,可以在 ArcGIS Services Directory浏览USA的 MapServer查找到USA数据的最多视图 范围为XMin:-127.968857954995、YMin:25.5778580720472、XMax:-65.0742781827045、 YMax:51.2983251993735,根据这些参数在mx: Application内添加一个esri: xtent标签如下 代码 esri: Extent id' allura”xmin-”-183.780014745329″wmin-”16.2975638854873″ xmax=”-61.4068547410964″ymax=”74.0304580085983/ 8.然后给esri:Map添加个 extent-"{ allura}属性,这样就设置了Map控件的默认视图 范围为I为 allura的 ectent,这样就完成了这个练习 9其他的还可以设置 MapService layer中选择自己需要显示部分的图层,比如USA的地图数 据中有4个图层分别为 Cities、 Highways、 States、 Counties,现在只想显小 States和 Counties 图层,可以加入如下代码 由Codc <esri: ArcGISDynamicMap Service Layer url-http://jh-53a435fbcoe8/arcgis/rest/services/usA/mapserver> <esri: visible Layers> <mx: Array Collection> 4 <mx: Number>2</mx. Number> <mx: Number>3</mx. Number> </mx: Array Collection> 7 </esri: visibleLayers: </esri: Arc ISDynamic Map ServiceLayer> (三) Arcgis server93和 Arcgis api for Flex实现自己的Toc控件 目的: 1.Δ rcGis api for flex没有提供现成的Toc控件,这里来实现自己的Toc控件。 准备工作: 1在 ArcGIs. Serve9.3发布一个叫USA的 Map service,并且把这个 Service启动起米。 完成后的效果图: USA 口每Cies 凶经 Highways Wortarnatot M g States uemontvay V E Counties a Ciconia ina/ryland brta Carolina anzona South carokina 1000k 开始 启动 Flex builder3新建工程以及引入 ArcGIS API for Flex library的开发包,这个过程前面2 篇都讲过了这里就不啰嗦了。 2.新建 Lavers mxml页面,然后在页面上添加Map控件以及设置 Arc GISDynamicMap Service Layer,添加一个 Combo Box控件用来地图切换显小。具体代码如 1 <?xml version=1.0"encoding=utf-8?> <mx:Applicationxminsmxhttp://www.adobe.com/2006/mxml"layout"absolute backgroundcolor=whitexmins:esri-http://www.esri.com/2008/ags:> <mx: Array id=arr"> Kmx: Object label=”USA datahttp:/jh-53a435fbcoe8/arcgis/rest/services/uSa/mapserveR"i> ≤mX Object label=USA2D” n World/MapServer”'f∞ data=http://sampleserverl.arcgisonline.com/arcgis/rest/services/demographics/esriPopulatio </mx: arra 7 <mx: ComboBox id=” mvURL selectedIndex=”0″ horizontalcenter=”-329″ ataProvidcr=”{ary”y”10″> 8 /mx: Combo Box> esri: Map logo visible- false’ panArrows Visible=true” width=463″ height”288 x=”33″y=40′ borderStyle=' solid' borderthickness=”3"> 10 esri: ArcGISDynamic Map Service Layer id="my DynamicService' url-imyURL. Selectedltern data) "load=my Dynamic Service. default VisibleLayers(/ </esri: Map> 12 </mx: Application> 3.对上面的代码做一下解释,首先添加了一个id为arr的对象数组作为 ComboBox的数 据源,ar的对象数组包含2个对象:一个是上面发布的USA得rest地址,一个是Esi提供 的在线的rest地址。然后在Map控件的 ArcGISDynamic Map ServiceLayer的url属性绑定 ComboBox的选择值,这样当 Combobox选择发生变化时地图也会根据rest地址进行切换显 4接下米做Toc控件了,首先在src目录下新添加一个叫uc的目录,然后在uc下新建 TreeToc mxml文件这个就是用来实现Toc功能的。Toc控件这里是用Flex提供的Tree控件 的基础上实现的,具体代码如下: 1 <?xml version=1.0"encoding=utf-8"?> 2<mx:treexmins:mxhttp:/www.adobe.com/2006/mxmlwidth-=7100%height=7100% fontsize=”12 3 <mx: Script> <[CDATAL 45678 import mx collections. array collection import com. esri ags layers. ArcIMSMap Layer import com. esri ags layers. ArcGISDynamicMapServiceLayer import com.esri ags events. LayerEvent import com. csri ags layers. Laycr 10 import com. esri ags layers. LayerInfo; import mx utils. ObjectUtil; 12 13 private var layerInfos: Array; 14 ∥图层 15 private var layer: Layer 16 /图层是否史新标识 17 private var layer Changed: Boolean 获取图层 public function gct laycr(: Laycr 20 21 return layer 22 23 ∥设置图层 24 public function set layer( value: Layer): void 25 26 layer-value 27 layer Changed=true 28 invalidateProperties( 30 ∥设置组件属性 override protected function commitProperties(: void 33 if( layer Changed) 【实例截图】
【核心代码】