前言

Web Gis顧名思義就是通過瀏覽器方式操作的地理系統。通過瀏覽器方式可以採用很多技術，主流的有 Html+Javascript、Flex、Silverlight。像大的公司谷歌百度既有技術又有人的，都是採用Html+Javascript.這樣可以節約流量，提高載入速度，增加使用者體驗。而一般的企業級應用則採用Flex或Silverlight的居多。而我也屬於小企業級的應用，沒有很多使用者訪問，大多在區域網，面對的客戶也都是傻瓜級的，使用的瀏覽球也都是IE6，所以我這個應用開發框架就是採用Flex，採用這個好處就是不用處理多瀏覽器相容問題了。

開發框架

• 開發工具：Adobe® Flash® Builder™ 4
• 地圖服務： 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  伺服器下執行，如下：