C#打造一個開源webgis（四）地圖客戶端（上）

地圖客戶端

地圖客戶端是用來顯示地圖和實現交互的，採用的技術和實現的方式多種多樣，有Flash，Silverlight，Javascript等等，此外，別忘了桌面客戶端也屬於其範疇。

而具體基於這些技術的第三方插件有很多，開源的有如DeepEarth、SharpMap、Gmap.net、Greatmap、OpenLayer，如果細心的話，會發現提及的大多基於.net技術的，沒錯，個人偏向所致吧，對比過基於Deepzoom實現及Javascript實現的地圖效果後，我傾向於Deepzoom（Silverlight版地圖基本採用），當然，如果說考慮到用戶體驗（要安裝瀏覽器插件），用Javascript或許會是更好的選擇。若瞭解原理，展現方式不同，內在其實也大同小異的。簡單描述下，僅作爲參考：SharpMap對於桌面應用更有名些，我對它最後一次瞭解也是很久之前了，現在不知道變成怎樣了，它集成了很多開源項目，包括GDAL、.net版的JTS（NJTS）等，但是個人對其渲染效果和性能不怎麼滿意。DeepEarth是比較有名的webClient，渲染效果不錯，但功能不足，需要自己開發定製很多GIS常用功能。Gmap.net貌似比較強大，就是參考資料太少。OpenLayers是基於Javascript的……有興趣的可以瞭解一下……最後來個筆鋒一轉，會不會覺得很坑？——我用的是arccgis api for silverlight，原因很簡單，功能強大，足夠我使用……

搭建DEMO

先來看看搭建Demo的效果圖：

silverlight實現

wpf實現

怎麼實現的呢，步驟如下：

1、免費註冊arcgis開發者，下載Arcgis api for silverlight的SDK（我順便下載了Arcgis api for WPF的SDK），其實所謂的SDK，只要得到幾個DLL就行了，只要別人有了，直接拷貝過來引用就可以了。注：若不喜歡，完全可以用DeepEarth來代替

2、建一個silverlight的項目，把DLL引用進去，然後創建一個類GoogleMapLayer.cs，內容如下，代碼比較好理解，也不寫註釋了。特別留意一下GetTileUrl方法，採用的url是網上google瓦片服務地址，註釋掉的第一行url是本地緩存離線瓦片地圖，第二行url是第三節提到過的geoserver提供的wms服務，也就是說可以根據需求定製自己的地圖層。

 public class GoogleRoadLayer : TiledMapServiceLayer
    {
        SpatialReference _spatialReference = new SpatialReference(102113);
        public override void Initialize()
        {
            this.FullExtent = new Envelope(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787)
            {
                SpatialReference = _spatialReference
            };
            this.SpatialReference = _spatialReference;
            this.TileInfo = new TileInfo()
            {
                Height = 256,
                Width = 256,
                Origin = new MapPoint(-20037508.342787, 20037508.342787)//Origin = new ESRI.ArcGIS.Geometry.MapPoint(-180, 90)
                {
                    SpatialReference = _spatialReference
                },
                Lods = new Lod[20]
            };

            double resolution = 156543.033928;
            for (int i = 0; i < TileInfo.Lods.Length; i++)
            {
                TileInfo.Lods[i] = new Lod() { Resolution = resolution };
                resolution /= 2;
            }
            base.Initialize();
        }

        public override string GetTileUrl(int level, int row, int col)
        {
            //設置默認值 
            string url = string.Format("http://mt{0}.google.cn/vt/lyrs=m@163000000&hl=zh-CN&gl=cn&x={1}&s=&y={2}&z={3}&s=", row % 4, col, row, level);
            //string url = string.Format("http://192.168.4.164:8083/{2}/{0}_{1}.png", col, row, level);
            //string url = string.Format("http://localhost:10100/geoserver/cq/wms?service=WMS&version=1.1.0&request=GetMap&layers=cq:landview&styles=&bbox={0},{1},{2},{3}&width=512&height=473&srs=EPSG:4326&format=image/png";
            return url;
        }
    }

3、在MainPage.xaml（可以新建一個頁面）的Grid標籤，加入以下內容，至此一個擁有放大縮小、平移、滾輪支持的基本地圖瀏覽程序就完成了

<esri:Map x:Name="map" Background="White"  WrapAround="true" IsLogoVisible="False" >
	<esri:Map.Layers>
		<esri:LayerCollection>
			<local:GoogleRoadLayer ID="TileLayer"/>
		</esri:LayerCollection>
	</esri:Map.Layers>
</esri:Map>