WebGIS应用开发框架

WebGis应用开发框架

前言

Web Gis顾名思义就是通过浏览器方式操作的地理系统。通过浏览器方式可以采用很多技术，主流的有 Html+Javascript、Flex、Silverlight。像大的公司谷歌百度既有技术又有人的，都是采用Html+Javascript.这样可以节约流量，提高载入速度，增加用户体验。而一般的企业级应用则采用Flex或Silverlight的居多。而我也属于小企业级的应用，没有很多用户访问，大多在局域网，面对的客户也都是傻瓜级的，使用的浏览球也都是IE6，所以我这个应用开发框架就是采用Flex，采用这个好处就是不用处理多浏览器兼容问题了。

开发框架

• 开发工具：Adobe® Flash® Builder™ 4
• 开发包：ArcGIS API for Flex 2.5
• 地图服务： arcgis、谷歌地图、geoserver

这个框架是经过实践得出的，特别是ArcGIS API for Flex这个包，以前也使用过其他的开源的包，谷歌地图也有 for flex 的包。但相比这个，这个功能齐全，文档丰富。开发一个GIS方面的应用是绝对没问题的。

搭建Demo

1. 打开Flash® Builder™ 4 新建一个名为FlexWebGis Web工成，把agslib-2.5-2011-11-30.swc包复制到lib下。
2. 增加一个flex.web.gis.layer包，下面建一个GoogleMapLayer.as类,代码如下：

   package flex.web.gis.layer
   {
       import com.esri.ags.SpatialReference;
       import com.esri.ags.geometry.Extent;
       import com.esri.ags.geometry.MapPoint;
       import com.esri.ags.layers.TiledMapServiceLayer;
       import com.esri.ags.layers.supportClasses.LOD;
       import com.esri.ags.layers.supportClasses.TileInfo;
   
       import flash.net.URLRequest;
   
       //扩展TiledMapServiceLayer图层实现加载google地图
       public class GoogleMapLayer extends TiledMapServiceLayer
       {
           private var _tileInfo:TileInfo=new TileInfo();
           public var _baseURL:String="t@128";
   
           public function GoogleMapLayer()
           {
               super();
               buildTileInfo();
               setLoaded(true);
           }
   
           override public function get fullExtent():Extent
           {
               return new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, new SpatialReference(102113));
           }
   
           override public function get initialExtent():Extent
           {
               return new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, new SpatialReference(102113));
           }
   
           override public function get spatialReference():SpatialReference
           {
               return new SpatialReference(102113);
           }
   
           override public function get tileInfo():TileInfo
           {
               return _tileInfo;
           }
   
           //获取矢量地图
           override protected function getTileURL(level:Number, row:Number, col:Number):URLRequest
           {
               var url:String="http://mt" + (col % 4) + ".google.cn/vt/lyrs=" + _baseURL + "&v=w2.114&hl=zh-CN&gl=cn&" + "x=" + col + "&" + "y=" + row + "&" + "z=" + level + "&s=Galil";
               if (_baseURL == "s@92")
               {
                   url="http://mt" + (col % 4) + ".google.cn/vt/lyrs=" + _baseURL + "&v=w2.114&hl=zh-CN&gl=cn&" + "x=" + col + "&" + "y=" + row + "&" + "z=" + level + "&s=Galil";
               }
               if (_baseURL == "t@128")
               {
                   url="http://mt" + (col % 4) + ".google.cn/vt/lyrs=" + _baseURL + ",r@169000000&v=w2.114&hl=zh-CN&gl=cn&" + "x=" + col + "&" + "y=" + row + "&" + "z=" + level + "&s=Galil";
               }
               if (_baseURL == "m@161000000")
               {
                   url="http://mt" + (col % 4) + ".google.cn/vt/lyrs=" + _baseURL + "&v=w2.114&hl=zh-CN&gl=cn&" + "x=" + col + "&" + "y=" + row + "&" + "z=" + level + "&s=Galil";
               }
               return new URLRequest(url);
           }
   
           private function buildTileInfo():void
           {
               _tileInfo.height=256;
               _tileInfo.width=256;
               _tileInfo.origin=new MapPoint(-20037508.342787, 20037508.342787);
               _tileInfo.spatialReference=new SpatialReference(102113);
               //_tileInfo.lods=[new LOD(5, 4891.96981024998, 18489297.737236), new LOD(6, 2445.98490512499, 9244648.868618), new LOD(7, 1222.99245256249, 4622324.434309), new LOD(8, 611.49622628138, 2311162.217155), new LOD(9, 305.748113140558, 1155581.108577), new LOD(10, 152.874056570411, 577790.554289), new LOD(11, 76.4370282850732, 288895.277144), new LOD(12, 38.2185141425366, 144447.638572), new LOD(13, 19.1092570712683, 72223.819286), new LOD(14, 9.55462853563415, 36111.909643), new LOD(15, 4.77731426794937, 18055.954822)];
               _tileInfo.lods=[new LOD(9, 305.748113140558, 1155581.108577),new LOD(10, 152.874056570411, 577790.554289), new LOD(11, 76.4370282850732, 288895.277144), new LOD(12, 38.2185141425366, 144447.638572), new LOD(13, 19.1092570712683, 72223.819286), new LOD(14, 9.55462853563415, 36111.909643), new LOD(15, 4.77731426794937, 18055.954822),new LOD(16, 2.38865713397468, 9027.977411),new LOD(17, 1.19432856685505, 4513.988705),new LOD(18, 0.597164283559817, 2256.994353),new LOD(19, 0.298582141647617, 1128.497176)];
           }
       }
   }

   3.编辑FlexWebGis.mxml文件，代码如下：

   <?xml version="1.0" encoding="utf-8"?>
   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                  xmlns:s="library://ns.adobe.com/flex/spark" 
                  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:esri="http://www.esri.com/2008/ags" xmlns:layer="flex.web.gis.layer.*" creationComplete="application1_creationCompleteHandler(event)">
       <fx:Script>
           <![CDATA[
               import com.esri.ags.events.MapEvent;
               import com.esri.ags.utils.WebMercatorUtil;
               import com.esri.ags.geometry.MapPoint;
               import mx.events.FlexEvent;
   
               protected function application1_creationCompleteHandler(event:FlexEvent):void
               {
                   esriMap.addLayer(googleMapLayer);
               }
   
   
               protected function esriMap_loadHandler(event:MapEvent):void
               {
                   //设置地图中心点
                   esriMap.centerAt(WebMercatorUtil.geographicToWebMercator(new MapPoint(118.610037,31.138343)) as MapPoint);
               }
   
           ]]>
       </fx:Script>
       <fx:Declarations>
           <!-- 将非可视元素（例如服务、值对象）放在此处 -->
           <layer:GoogleMapLayer id="googleMapLayer"/>
       </fx:Declarations>
       <esri:Map id="esriMap"
                 logoVisible="false"
                 openHandCursorVisible="false"
                 scaleBarVisible="false"
                 zoomSliderVisible="false" load="esriMap_loadHandler(event)">
       </esri:Map>
   </s:Application>

   4.编译，把生成的文件部署到Web  服务器下运行，如下：