零基礎學通Silverlight4(10):網絡地圖服務

Bing MapsGoogle Earth一樣都提供了可以二次開發的AP I,用戶通過控件可以自由定製基於瀏覽器的應用系統,可以在網頁上使用服務商提供的數據服務,Bing Maps可以在瀏覽器中觀察到世界上的每一個角落,並可以逐級地改變地圖的比例尺,提供矢量地圖和衛星地圖這兩種常見的顯示模式。新版的Bing Maps使用了Silverlight技術,極大地增進了Bing Maps的用戶體驗,比如,縮放地圖時可以取得更平滑的效果,同時也使得使用一些更佳的特效成爲可能。
網絡服務(Web Service)提供了跨平臺、跨語言的互操作能力,爲地理信息互操作提供了有效的解決途徑。網絡地圖服務(WebMap Service,WMS)是開放地理信息系統聯盟(OGC)制定的網絡服務模型中一個基於HTTP協議的地圖服務,WMS中地圖被定義爲地理數據的可視化表現,通過一系列操作用戶可以獲得需要的地圖數據。必應地圖Silverlight Control SDK下載地址爲:
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=beb29d27-6f0c-494f-b028-1e0e3187e830
爲了使用必應地圖Silverlight Control,必須擁有必應地圖KeyKey爲微軟爲用戶開通的一個授權開發密匙,與開發者賬號進行綁定才能正常使用,按以下步驟可獲得:
◎進入到必應地圖賬戶中心https:/ / www.bingmapsportal.com,然後點擊創建戶鏈接。
使用Windows Live ID登錄後,需要提供賬戶名稱、聯繫人姓名、公司名稱等信息。
◎ 在必應地圖賬戶中心的左側,點擊“Create or view keys”。

◎ 在創建界面上,填寫應用程序名、對應程序的網址等信息後,點擊“Create Key”後將獲得key

創建項目後,在Silverlight項目中添加必應地圖程序集的引用。
打開MainPage.xaml文件,引入相應命名空間的支持:

xmlns:m="clr-

namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl" 如下面簡單的XAML,運行後,就可看到地圖了。

<UserControl x:Class="SilverlightApplication7.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White"> <m:Map x:Name="myMap" CredentialsProvider="Apl2yNzBAE7KuwPFxwSMoQRQnvj2u3LgJaxHEPfcaSzTCcbOucxgJDhCJeXpWaX4" Mode="Road"/>
    </Grid>
</UserControl>
CredentialsProvider值就是通過Bing Maps賬戶管理中心創建的所需的KeyMode爲顯示模式,有路況模式(Road)和衛星模式(Aerial),分別顯示路標和不顯示路標,控件默認加載爲路況模式。衛星模式中若要顯示路標則設Mode爲“AerialWithLabels”。
地圖Map控件其它一些屬性有:
Center:中心點座標。

ZoomLevel:放大級別。

NavigationVisibility:導航菜單顯示。

水文部門及時、準確的水文監測信息,及時捕捉公衆對水信息的需求,爲區域經濟發展、人民生活水平提高,提供了主動、及時、優質、高效的水文信息服務。這些服務,不少仍以紙質媒體爲主,如:《水文年鑑》、《水資源質量狀況月(年)報》、《地下水通報》、《水資源公報》等,其實還可通過網絡等媒介發佈信息,在提供豐富的水文產品、全面的水文服務的同時,平臺的整體的外觀和功能同樣需要做得豐富多彩,Silverlight 是一種融合了微軟的多種技術的Web 呈現技術。它提供了一套開發框架,並通過使用基於向量的圖層圖像技術,支持任何尺寸圖像的無縫整合,對基於ASP.NETAJAX在內的Web 開發環境實現無縫連接。Silverlight 使開發設計人員能夠更好的協作,有效地創造出能在Windows Macintosh上多種瀏覽器中運行的內容豐富、界面絢麗的Web 應用程序———Silverlight 應用程序。
水文服務器不少並不是基於.Net的,但這不影響推廣使用,Silverlight 的開發是需要. net Framework 的。但是,這並不要求客戶端需要任何版本的. net Framework。客戶端只需要一個Runtime 插件,就可以執行所有內容,包括託管代碼。Silverlight 的所有內容都是客戶端運行的,因此,服務器端不需要執行任何代碼。這樣,SilverLight 對於服務器端來講,只不過是一組文件而已,存放編譯後XAP 文件的ClientBin 目錄。因此,SilverLight 可以放在任何現有的網站服務器上,不論這個服務器是否有. net 環境,php 服務器,或者ASP 或者ASP. net 等等。
水文信息網絡地圖服務案例使用了Bing Maps Silverlight 控件,結合Silverlight Toolkit中的圖表控件,利用Bing Maps地圖切片數據實現網絡地圖服務,方便快捷地獲取地圖和影像數據,並加載所需的水文信息,從而以較小的成本提供了全方位的水文網絡地圖服務。
主要操作步驟及代碼如下:
(一)加載中國地圖是信息顯示的基礎
     新建項目,啓動Mircrosoft Visual Studio 2010,命名爲水文信息ShuiWenInfo,

Silverlight項目中,添加必應地圖程序集的引用,並聲明地圖Map控件對應的命名空間的支持。
xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"     
  MainPage.xaml中添加Map控件,並添加站網信息圖層layStation和中國地圖圖層layChinaXAML代碼如下:
 <Grid x:Name="LayoutRoot" Background="White">

<m:Map CredentialsProvider="AmreePcQ50WyjCYvxNo0xUQDwiYVM8VFVTxmcW_1RmOb2x_7T1muW-fSTQQkOok1" x:Name="mapWater"   

         Center="30.4837830422421,108.974539287109" ZoomLevel="6"   >      

          <m:MapTileLayer x:Name="layChina"></m:MapTileLayer>

   <m:MapLayer x:Name="layStation"></m:MapLayer>

  </m:Map>

</Grid>

在程序中加載中國地圖,XAML如下:

public MainPage()

        {

            InitializeComponent();

            UriBuilder tileSourceUri = new UriBuilder("http://r2.tiles.ditu.live.com/tiles/r{quadkey}.png?g=41");

  //初始化LocationRectTileSource對象,設定顯示範圍及放大級別

 LocationRectTileSource tileSource = new LocationRectTileSource(tileSourceUri.Uri.ToString(),new LocationRect(new Location(60, 60), new Location(13, 140)),  

           new Range<double>(6, 16));

//設置中國地圖圖層對象屬性

layChina.TileSources.Add(tileSource);

            layChina.Opacity =1.0;

(二)站網信息的顯示。
站網信息是其它信息顯示的基礎,開發站網信息平臺後再加上其它水情、水質等信息,Bing Maps定義了一些web地圖服務, 如點位的圖釘標籤顯示功能,站網信息中的站點圖標直接用Bing Maps Silverlight Control中的地圖圖釘控件Pushpin來表示,具體操作步驟有:
站點信息使用站點類Station來表示,站點類有站名、經度、緯度等信息。
public class Station
    {
        public string  StationName{get;set;}
        public double  Longitude {get;set;}
        public double  Latitude{get;set;}           
    }
定義全局站網變量listStation,並加載示例數據:
public List<Station> listStation;
public void LoadStations()
        {
            listStation = new List<Station>(){
                 new Station {StationName="大龍山",Longitude=119.02494046378,Latitude=32.0085534220129},
                 new Station {StationName="高峯",Longitude=118.98099515128,Latitude=32.5588631877063},
                 new Station {StationName="張家山",Longitude=118.884864780186,Latitude=31.5345470817377},
……………………………………………
              };
         }
在站網圖層上面顯示所有站點圖標:
       public void ShowStation()
        {
            Pushpin station;
            for (int i =0; i < listStation.Count;i++ )
            {
                station = new Pushpin();                   
     Location location = new Location(listStation[i].Latitude,listStation[i].Longitude);
                ToolTipService.SetToolTip(station, listStation[i].StationName);
                layStation.AddChild(station, location);
                }          
        }
MainPage.xaml中添加“站網信息”命令按鈕以控制站網信息圖層layStation的顯示。
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal" Background="Gray">
            <Button Margin="5" Width="100" Height="30" x:Name="btStation" Click="btStation_Click" >
                <TextBlock FontSize="15">站網信息</TextBlock>
            </Button>
   </StackPanel>
對應的單擊處理事件爲:

private void btStation_Click(object sender, RoutedEventArgs e)

        {

            if(layStation.Visibility ==Visibility.Visible )

                layStation.Visibility = Visibility.Collapsed;

            else

                layStation.Visibility = Visibility.Visible ; 

        } 

(三)實時水位顯示    

水情信息中主要是水位,現添加實時水位顯示的功能,具體步驟有:
在站點類Station的變量中,增加水位變量WaterLevel
public class Station
    {
        public string  StationName{get;set;}
        public double  Longitude {get;set;}
        public double  Latitude{get;set;} 
        public double  WaterLevel{get;set;}       
    }
加載數據時,也添加水位值 ,如下:

listStation = new List<Station>(){

                 new Station {StationName="大龍山",Longitude=119.02494046378,Latitude=32.0085534220129,WaterLevel=15.63},

                  new Station {StationName="母山",Longitude=117.687355014561,Latitude=31.8733710133861,WaterLevel=18.33},

            ……………………………………..

}

Silverlight項目中添加水位顯示的用戶控件WaterLeverl,界面設計如下:
  <Grid x:Name="LayoutRoot" Background="White">
        <Border  BorderBrush="Red" BorderThickness="1.0" >
            <StackPanel >
                <TextBox x:Name="txtWater"  TextWrapping="NoWrap" />   
            </StackPanel>
        </Border>
    </Grid>
 定義一個水位變量,代碼如下:
    public partial class WaterLever : UserControl
    {      
        public WaterLever()
        {
            InitializeComponent();                               
        }
        public double lever
        {
            set{
                txtWater.Text = value.ToString ();
            }
            get{
                return double.Parse(txtWater.Text);
            }
        }       
    }
Main.xaml文件中添加水位圖層。
<m:MapLayer x:Name="layWater"></m:MapLayer>
在水位圖層上顯示水位。
public void ShowWater()
        {         
            WaterLever water;
            for (int i = 0; i < listStation.Count; i++)
            {            
                water = new WaterLever();
Location location = new Location(listStation[i].Latitude, listStation[i].Longitude);
                ToolTipService.SetToolTip(water, listStation[i].StationName);
                water.lever = listStation[i].WaterLevel;
                layWater.AddChild(water, location);
            }
        }
控制水位圖層的顯示。
private void btWater_Click(object sender, RoutedEventArgs e)
      {
            if (layWater.Visibility == Visibility.Visible)
                layWater.Visibility = Visibility.Collapsed;
            else
                layWater.Visibility = Visibility.Visible;
        }

 

運行後效果如圖:

 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章