GeoServer地圖開發解決方案（五）：基於Silverlight技術的地圖客戶端實現

時間 2020-07-10

標籤 geoserver 地圖開發解決方案基於 silverlight 技術客戶端實現欄目 Silverlight 简体版

原文原文鏈接

GeoServer 是 OpenGIS Web 服務器規範的 J2EE 實現的社區開源項目，利用 GeoServer 能夠方便的發佈地圖數據，容許用戶對特徵數據進行更新、刪除、插入操做，經過 GeoServer 能夠比較容易的在用戶之間迅速共享空間地理信息。本系列博文提供全面、完善的GeoServer部署解決方案，包括GeoServer環境搭建、地圖數據處理、部署地圖數據、發佈地圖服務等功能的詳細介紹。文中內容來自本人工做中經過網絡學習後總結而成，若有類同純屬巧合，同時歡迎廣大網友前來交流。　　html

　　系列目錄導航：前端

　　GeoServer地圖開發解決方案（一）：環境搭建篇git

　　GeoServer地圖開發解決方案（二）：地圖數據處理篇算法

　　GeoServer地圖開發解決方案（三）：部署地圖數據篇數組

　　GeoServer地圖開發解決方案（四）：發佈Web地圖服務（WMS）篇服務器

　　GeoServer地圖開發解決方案（五）：基於Silverlight技術的地圖客戶端實現網絡

　　我曾經寫做過一篇關於微軟Bing Maps的客戶端實現的博文：《基於DeepZoom技術的Bing Maps客戶端實現研究》，詳細介紹瞭如何使用Silverlight中的DeepZoom技術實現Bing Maps的客戶端。本篇介紹的內容則爲基於Web地圖服務（Web Map Service，簡稱：WMS）的Silverlight地圖客戶端實現。ide

1、DeepZoom簡介post

　　DeepZoom技術以MultiScaleImage控件爲核心，其內部有一個MultiScaleTileSource類型的源屬性，主要用於設置MultiScaleImage控件所要呈現的數據源。基於Silverlight的Web GIS客戶端實現也是通MultiScaleImage控件來實現，核心就在於經過MultiScaleTileSource屬性針對不一樣的Web GIS地圖瓦片數據（Image Tiles）提供商爲MultiScaleImage控件實現一個數據源。所以本篇所須要作的工做就是針對WMS服務爲MultiScaleImage控件實現一套加載數據源的算法。學習

2、WMS服務加載實現

　　實現WMS服務加載的算法其實很是簡單，只須要了解WMS發佈的方式、WMS地址的參數組成結構以及地圖瓦片的投影原理就能夠了，首先須要定義一個盒子對象做爲訪問WMS的邊界參數對象。

public class BBox
{
     public int X { get ; set ; }
     public int Y { get ; set ; }
     public int Width { get ; set ; }
     public int Height { get ; set ; }

     public BBox( int x, int y, int w, int h)
    {
         this .X = x;
         this .Y = y;
         this .Width = w;
         this .Height = h;
    }
}

　　關於WMS服務加載的詳細算法須要一些GIS理論基礎纔可以知道具體的實現原理，這裏我就不逐一介紹，直接貼代碼：

public class WMSTileSource : MultiScaleTileSource
{
     public WMSTileSource()
        : base ( int .MaxValue, int .MaxValue, 0x100 , 0x100 , 0 )
    { }

     public const int TILE_SIZE = 256 ;
     /// <summary>
     /// 地球半徑
     /// </summary>
     public const double EARTH_RADIUS = 6378137 ;
     /// <summary>
     /// 地球周長
     /// </summary>
     public const double EARTH_CIRCUMFERENCE = EARTH_RADIUS * 2 * Math.PI;
     public const double HALF_EARTH_CIRCUMFERENCE = EARTH_CIRCUMFERENCE / 2 ;

     /// <summary>
     /// WMS服務地址
     /// </summary>
     private const string TilePath = @" http://localhost:8080/geoserver/wms?service=WMS&version=1.1.0&request=GetMap&layers=cq:CQ_County_region,cq:CQ_County_region_level&styles=&bbox={0},{1},{2},{3}&width=512&height=421&srs=EPSG:4326&&Format=image/png " ;

     public string GetQuadKey( string url)
    {
        var regex = new Regex( " .*tiles/(.+)[.].* " );
        Match match = regex.Match(url);

         return match.Groups[ 1 ].ToString();
    }

     public BBox QuadKeyToBBox( string quadKey, int x, int y, int zoomLevel)
    {
         char c = quadKey[ 0 ];

         int tileSize = 2 << ( 18 - zoomLevel - 1 );

         if (c == ' 0 ' )
        {
            y = y - tileSize;
        }

         else if (c == ' 1 ' )
        {
            y = y - tileSize;
            x = x + tileSize;
        }

         else if (c == ' 3 ' )
        {
            x = x + tileSize;
        }

         if (quadKey.Length > 1 )
        {
             return QuadKeyToBBox(quadKey.Substring( 1 ), x, y, zoomLevel + 1 );
        }
         return new BBox(x, y, tileSize, tileSize);
    }

     public BBox QuadKeyToBBox( string quadKey)
    {
         const int x = 0 ;
         const int y = 262144 ;
         return QuadKeyToBBox(quadKey, x, y, 1 );
    }

     public double XToLongitudeAtZoom( int x, int zoom)
    {
         double arc = EARTH_CIRCUMFERENCE / (( 1 << zoom) * TILE_SIZE);
         double metersX = (x * arc) - HALF_EARTH_CIRCUMFERENCE;
         double result = RadToDeg(metersX / EARTH_RADIUS);
         return result;
    }

     public double YToLatitudeAtZoom( int y, int zoom)
    {
         double arc = EARTH_CIRCUMFERENCE / (( 1 << zoom) * TILE_SIZE);
         double metersY = HALF_EARTH_CIRCUMFERENCE - (y * arc);
         double a = Math.Exp(metersY * 2 / EARTH_RADIUS);
         double result = RadToDeg(Math.Asin((a - 1 ) / (a + 1 )));
         return result;
    }

     public double RadToDeg( double d)
    {
         return d / Math.PI * 180.0 ;
    }

     private static string TileXYToQuadKey( int tileX, int tileY, int levelOfDetail)
    {
        var quadKey = new StringBuilder();
         for ( int i = levelOfDetail; i > 0 ; i -- )
        {
             char digit = ' 0 ' ;
             int mask = 1 << (i - 1 );
             if ((tileX & mask) != 0 )
            {
                digit ++ ;
            }
             if ((tileY & mask) != 0 )
            {
                digit ++ ;
                digit ++ ;
            }
            quadKey.Append(digit);
        }
         return quadKey.ToString();
    }

     protected override void GetTileLayers( int tileLevel, int tilePositionX, int tilePositionY, System.Collections.Generic.IList < object > tileImageLayerSources)
    {
         int zoom = tileLevel - 8 ;
         if (zoom > 0 )
        {
             string quadKey = TileXYToQuadKey(tilePositionX, tilePositionY, zoom);
            BBox boundingBox = QuadKeyToBBox(quadKey);

             double lon = XToLongitudeAtZoom(boundingBox.X * TILE_SIZE, 18 );
             double lat = YToLatitudeAtZoom(boundingBox.Y * TILE_SIZE, 18 );

             double lon2 = XToLongitudeAtZoom((boundingBox.X + boundingBox.Width) * TILE_SIZE, 18 );
             double lat2 = YToLatitudeAtZoom((boundingBox.Y - boundingBox.Height) * TILE_SIZE, 18 );

             string wmsUrl = string .Format(TilePath, lon, lat, lon2, lat2, TILE_SIZE);

            var veUri = new Uri(wmsUrl);
            tileImageLayerSources.Add(veUri);
        }
    }
}

　　前端經過一個按鈕事件驅動觸發加載WMS服務，按鈕的XAML代碼以下：