基于ArcGIS API for Silverlight的Web應(yīng)用初步實(shí)現(xiàn)

龍際夢(mèng)，蔡中祥，劉宏建，李 欽，樊 江

（1.信息工程大學(xué) 地理空間信息學(xué)院，河南 鄭州 450000）

基于ArcGIS API for Silverlight的Web應(yīng)用初步實(shí)現(xiàn)

龍際夢(mèng)1，蔡中祥1，劉宏建1，李 欽1，樊 江1

（1.信息工程大學(xué) 地理空間信息學(xué)院，河南 鄭州 450000）

介紹了ArcGIS API for Silverlight及相關(guān)概念，舉例說(shuō)明了Map、Navigation、Draw、MapTip等控件的使用，以及應(yīng)用程序在IIS上的部署方法。

ArcGIS API for Silverlight；WebGIS；RIA；Silverlight；REST；Web應(yīng)用

WebGIS是Internet技術(shù)與GIS相結(jié)合的產(chǎn)物，隨著互聯(lián)網(wǎng)的不斷發(fā)展和GIS 技術(shù)的廣泛應(yīng)用，人們對(duì)基于網(wǎng)頁(yè)技術(shù)的WebGIS的交互性、視覺(jué)效果、響應(yīng)速度以及功能體驗(yàn)等有了更高的要求。RIA（rich internet applications，富因特網(wǎng)應(yīng)用程序）技術(shù)[1]提供了全新的Web應(yīng)用解決方案，給WebGIS帶來(lái)了新的發(fā)展契機(jī)，實(shí)現(xiàn)了更加直觀有效的應(yīng)用服務(wù)。Flex與Silverlight是目前RIA技術(shù)的主要代表，F(xiàn)lex技術(shù)盡管在一定程度上可滿足現(xiàn)有需求，但存在不支持多線程、學(xué)習(xí)曲線較高、對(duì)大數(shù)量傳輸?shù)戎С植蛔愕染窒?。與Flex相比較，雖然Silverlight瀏覽器插件安裝率不及Flash插件，但Silverlight平臺(tái)支持更多開(kāi)發(fā)語(yǔ)言，學(xué)習(xí)成本低，開(kāi)發(fā)效率高，發(fā)展迅速?；贏rcGIS Server，使用 ArcGIS API for Silverlight可以建立令人賞心悅目的RIA[2,3]。

1 ArcGIS API for Silverlight概述

1.1 ArcGIS Server API

ArcGIS Server可以使用的API有如下6種： .Net Web ADF、Java Web ADF、ArcGIS API for JavaScript、ArcGIS API for Flex、ArcGIS API for Silverlight、ArcObject API。

這6種API都能完成一些常見(jiàn)的功能，但是它們之間存在較大的差別。這6個(gè)API可分為兩大類(lèi)，分別是“服務(wù)器端API”和“客戶(hù)端API”。.Net Web ADF、Java Web ADF和ArcObjects API可以算做“服務(wù)器端API”，因?yàn)槭褂眠@3類(lèi)API所開(kāi)發(fā)的程序代碼主要是在服務(wù)器端運(yùn)行的，而使用ArcGIS API for JavaScript、ArcGIS API for Flex和ArcGIS API for Silverlight開(kāi)發(fā)的程序代碼主要運(yùn)行在客戶(hù)端的瀏覽器里[4]。

1.2 Silverlight

Microsoft Silverlight是一個(gè)跨瀏覽器、跨平臺(tái)的插件，為Web生成和提供下一代媒體體驗(yàn)和豐富的RIA。Silverlight提供靈活的編程模型，并可以很方便地集成到現(xiàn)有的網(wǎng)絡(luò)應(yīng)用程序中。Silverlight可以對(duì)運(yùn)行在Mac或Windows上的主流瀏覽器提供高質(zhì)量視頻信息快速、低成本的傳遞。若要運(yùn)行 Silverlight Web 應(yīng)用程序，用戶(hù)只需要在瀏覽器中安裝一個(gè)小插件。

1.3 ArcGIS API for Silverlight的構(gòu)成

ArcGIS API for Silverlight主 要 由Maps、Graphics、Tasks、Toolkit、Access to Silverlight components幾部分組成[5]。開(kāi)發(fā)者能夠在Silverlight應(yīng)用程序中集成ArcGIS Server和Bing地圖的服務(wù)和功能，利用ArcGIS Server和Bing地圖的資源，如地圖、定位器、地理處理模型和Silverlight組件等，創(chuàng)建交互性和表達(dá)性很強(qiáng)的應(yīng)用程序。

1.4 ArcGIS API for Silverlight與REST

REST（representational state transfer，表述性狀態(tài)轉(zhuǎn)移）是一個(gè)直觀的架構(gòu)風(fēng)格[6,7]，通過(guò)網(wǎng)址提交到Web服務(wù)的請(qǐng)求來(lái)創(chuàng)建地圖圖像。REST允許程序在不同計(jì)算機(jī)上獨(dú)立于操作系統(tǒng)或平臺(tái)進(jìn)行通信，通過(guò)發(fā)送一個(gè)http請(qǐng)求到網(wǎng)址，并獲取某種格式的返回?cái)?shù)據(jù)，支持的格式包括XML或嵌入網(wǎng)址的XML。

Silverlight API負(fù)責(zé)客戶(hù)端的界面交互、地圖和相關(guān)數(shù)據(jù)的展現(xiàn)，REST API在服務(wù)器端提供GIS服務(wù)。這些REST API是ArcGIS Server軟件已經(jīng)在服務(wù)器端封裝完成的，開(kāi)發(fā)人員要做的工作是在Silverlight API里面去訪問(wèn)REST API提供的GIS服務(wù)。

2 ArcGIS API for Silverlight應(yīng)用程序的實(shí)現(xiàn)

ArcGIS API for Silverlight的開(kāi)發(fā)環(huán)境包括配置Silverlight開(kāi)發(fā)環(huán)境和安裝ArcGIS Silverlight API兩部分。

2.1 Map控件

Map控件是ArcGIS API for Silverlight的核心組件，主要用來(lái)展示各種各樣的數(shù)據(jù)，Map控件可與用戶(hù)進(jìn)行交互。ArcGIS API for Silverlight提供了若干種圖層類(lèi)型來(lái)承載不同來(lái)源的數(shù)據(jù)，主要分為Map Service Layers、Feature Layers、Graphics Layers 、Element Layers等。其中，Map Service Layers包括如下4種圖層:

1）ArcGIS Tiled Map Service Layer， 是 可 通 過(guò)REST接口來(lái)訪問(wèn)的緩存地圖服務(wù)圖層。

2）ArcGIS Dynamic Map Service Layer，是可通過(guò)REST接口訪問(wèn)的ArcGIS動(dòng)態(tài)地圖服務(wù)圖層。該圖層類(lèi)型可根據(jù)客戶(hù)端請(qǐng)求生成背景透明的實(shí)時(shí)圖片。

3）ArcGIS Image Service Layer，是可通過(guò)REST訪問(wèn)的ArcGIS影像服務(wù)圖層。

4）Tile Layer，是緩存的微軟Bing地圖服務(wù)圖層。使用該圖層數(shù)據(jù)需提供令牌。

以添加ArcGIS Tiled Map Service Layer為例，XAML關(guān)鍵代碼如下：

〈esri:Map x:Name="MyMap" Extent="-120, 20, -100, 40" 〉

〈esri:Map.Layers〉

〈esri:ArcGISTiledMapServiceLayer ID="StreetMapLayer"

Url="http://server.arcgisonline.com/ArcGIS/rest/ services/ESRI_StreetMap_World_2D/MapServer" /〉

〈/esri:Map.Layers〉

〈/esri:Map〉

運(yùn)行效果如圖1所示。

圖1 Map控件使用運(yùn)行截圖

2.2 Navigation控件

Navigation控件即導(dǎo)航條控件，該控件與單個(gè)Map控件相關(guān)聯(lián)。提供了地圖的漫游、縮放、重置正北方向以及全圖顯示等功能。

運(yùn)行效果如圖2所示，XAML關(guān)鍵代碼如下：

〈esri:Navigation HorizontalAlignment="Left" Name="Navigation1" VerticalAlignment="Top" Map="{Binding ElementName=MyMap}"/〉

圖2 Navigation控件使用運(yùn)行截圖

2.3 Map Tip控件

Map Tip控件可顯示與該控件所關(guān)聯(lián)的Graphics Layer圖層中鼠標(biāo)光標(biāo)所停留位置的元素的屬性。

1）在Feature Layer元素中添加圖層的Map Tip屬性。

〈esri:FeatureLayer ID="MyFeatureLayer"

Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/ services/Demographics/ESRI_Census_USA/MapServer/5"

Where="POP07_SQMI 〉 150" Renderer= "{StaticResource MySimpleRenderer}" 〉

〈esri:FeatureLayer.OutFields〉

〈sys:String〉STATE_NAME〈/sys:String〉

〈sys:String〉POP07_SQMI〈/sys:String〉

〈/esri:FeatureLayer.OutFields〉

〈/esri:FeatureLayer〉

2）在Map Tip元素中，定義一個(gè)容器，用來(lái)顯示Map Tip的內(nèi)容。

〈esri:FeatureLayer.MapTip〉

〈Grid Background="LightYellow"〉

〈StackPanel Margin="5"〉

〈/StackPanel〉

〈Border BorderBrush="Black" BorderThickness="1" /〉

〈/Grid〉

立足上述立法背景存在的現(xiàn)實(shí)需求，以《知識(shí)產(chǎn)權(quán)基本法》的指導(dǎo)思想為指導(dǎo)，《知識(shí)產(chǎn)權(quán)基本法》立法應(yīng)當(dāng)秉持如下原則。

〈/esri:FeatureLayer.MapTip〉

3）在Map Tip的Stack Panel控件中，添加Text Block用來(lái)顯示州名以及人口密度。

〈TextBlock Text="{Binding [STATE_NAME]}" FontWeight="Bold" /〉

〈StackPanel Orientation="Horizontal"〉

〈TextBlock Text="Population Density (2007): " /〉

〈TextBlock Text="{Binding [POP07_SQMI]}" /〉

〈/StackPanel〉

運(yùn)行效果如圖3所示。

Draw工具提供了在客戶(hù)端繪制各種幾何對(duì)象的功能。

客戶(hù)端XAML關(guān)鍵代碼如下：

〈Grid x:Name="LayoutRoot" Background="White"〉

〈Grid.Resources〉

〈esri:SimpleFillSymbol x:Key="RedFillSymbol" Fill="#66FF0000" BorderBrush="Red" Border Thickness="2" /〉

圖3 MapTip使用運(yùn)行截圖

〈esri:SimpleFillSymbol x:Key="BlueFillSymbol" Fill="#660000FF" BorderBrush="Blue" Border Thickness="2" /〉

〈/Grid.Resources〉

〈esri:Map x:Name="MyMap" Background="White" Extent="-120, 20, -100, 40" 〉

〈esri:Map.Layers〉

〈esri:ArcGISTiledMapServiceLayer ID= "StreetMapLayer"

Url="http://server.arcgisonline.com/ArcGIS/rest/ services/ESRI_StreetMap_World_2D/MapServer"/〉

〈esri:GraphicsLayer ID="MyGraphicsLayer" /〉

〈/esri:Map.Layers〉

〈/esri:Map〉

〈/Grid〉

后臺(tái)C#關(guān)鍵代碼如下：

1）創(chuàng)建一個(gè)新的Draw對(duì)象：

Draw MyDrawObject = new Draw(MyMap)

{

FillSymbol = LayoutRoot.Resources ["RedFillSymbol"] as FillSymbol

};

MyDrawObject.DrawComplete += MyDrawObject_ DrawComplete;

2）激活Draw工具：

MyDrawObject.DrawMode=DrawMode.Polygon;

MyDrawObject.IsEnabled=true;

3）定義一個(gè)Draw事件完成的處理程序：

private void MyDrawObject_DrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args)

{

Graphic graphic = new Graphic()

{

Geometry = args.Geometry,

Symbol = LayoutRoot.Resources["BlueFillSymbol"] as FillSymbol

};

GraphicsLayer graphicsLayer = MyMap.Layers ["MyGraphicsLayer"] as GraphicsLayer;

graphicsLayer.Graphics.Add(graphic);

}

運(yùn)行效果如圖4所示。

圖4 Draw工具使用運(yùn)行截圖

2.5 查詢(xún)?nèi)蝿?wù)

查詢(xún)?nèi)蝿?wù)允許用戶(hù)從ArcGIS Server地圖服務(wù)圖層中通過(guò)某些條件過(guò)濾來(lái)獲取相關(guān)要素，可使用空間范圍或?qū)傩詶l件或兩者組合方式來(lái)進(jìn)行查詢(xún)。

這里以查詢(xún)美國(guó)2007年人口密度大于500人/km2的地區(qū)為例，客戶(hù)端XAML關(guān)鍵代碼如下：

〈Canvas HorizontalAlignment="Right" VerticalAlign ment="Top" Margin="0,15,7,0" Width="250"〉

〈Rectangle Fill="#CC5C90B2" Stroke="Gray" RadiusX="10" RadiusY="10" Width="230" Height="55"/〉

〈TextBlock Text="輸入查詢(xún)條件并點(diǎn)擊“查詢(xún)”按鈕" Foreground="White" FontSize="10" Margin="10,5,0,0"/〉

〈TextBlock x:Name="QueryTextBox" Width="150" Margin="15,22,0,0" Text="POP07_SQMI〉500"/〉

〈Button x:Name="QueryButton" Content="查詢(xún)" Margin= "168,23,0,0" Click="QueryButton_Click"/〉

〈/Canvas〉

后臺(tái)C#關(guān)鍵代碼如下：

private void QueryButton_Click(object sender, RoutedEventArgs e)

{

//初始化查詢(xún)?nèi)蝿?wù)

QueryTask queryTask = new QueryTask("http:// sampleserver1.arcgisonline.com/ArcGIS/rest/services/" + "Demographics/ESRI_Census_USA/MapServer/5");

queryTask.ExecuteCompleted += QueryTask_ ExecuteCompleted;

queryTask.Failed += QueryTask_Failed;

//查詢(xún)?nèi)蝿?wù)的參數(shù)

Query query = new Query();

query.ReturnGeometry = true;

query.OutFields.AddRange(new string[] { "STATE_NAME", "POP07_SQMI" });

//使用文本框的文本作為查詢(xún)條件

query.Where = QueryTextBox.Text;

queryTask.ExecuteAsync(query);

}

//查詢(xún)完成后繪制結(jié)果

private void QueryTask_ExecuteCompleted(object sender, ESRI.ArcGIS.Client.Tasks.QueryEventArgs args)

{

//清除以前的結(jié)果

GraphicsLayer graphicsLayer = MyMap.Layers ["MyGraphicsLayer"] as GraphicsLayer;

graphicsLayer.ClearGraphics();

//檢查新結(jié)果

FeatureSet featureSet = args.FeatureSet;

if (args.FeatureSet.Features.Count 〉 0)

{

//將結(jié)果添加到地圖

foreach (Graphic resultFeature in featureSet.Features)

{

r e s u l t F e a t u r e.S y m b o l = L a y o u t R o o t. Resources["ResultsFillSymbol"] as ESRI.ArcGIS.Client. Symbols.Symbol;

graphicsLayer.Graphics.Add(resultFeature);

}

}

else

{

MessageBox.Show("No feature found");

}

}

//查詢(xún)失敗時(shí)，提示錯(cuò)誤信息

private void QueryTask_Failed(object sender, TaskFailedEventArgs args)

{

MessageBox.Show("Query failed:" + args.Error);

}

運(yùn)行效果如圖5所示。

圖5 查詢(xún)?nèi)蝿?wù)運(yùn)行截圖

3 部署應(yīng)用程序

ArcGIS API for Silverlight應(yīng)用程序的部署步驟為：①安裝。②配置IIS。右鍵點(diǎn)擊“IIS信息服務(wù)—網(wǎng)站—默認(rèn)網(wǎng)站”，彈出“屬性”頁(yè)，選擇“http頭”標(biāo)簽，點(diǎn)擊“MIME映射”的“文件類(lèi)型”按鈕，彈出文件類(lèi)型窗口，點(diǎn)擊新類(lèi)型，新加.xap和.xaml兩個(gè)類(lèi)型，點(diǎn)擊確定完成設(shè)置。③編譯網(wǎng)站程序并發(fā)布。編譯好Silverlight地圖應(yīng)用程序，在IIS創(chuàng)建虛擬目錄，指向網(wǎng)站應(yīng)用程序(后綴為.web的應(yīng)用程序)，完成發(fā)布。④在網(wǎng)頁(yè)中打開(kāi)地圖應(yīng)用程序查看是否部署成功[8]。

4 結(jié) 語(yǔ)

ArcGIS API for Silverlight使用起來(lái)比ADF框架更加輕巧，而且功能強(qiáng)大，可以與多種當(dāng)今主流技術(shù)交互。本文只是介紹了ArcGIS API for Silverlight的入門(mén)知識(shí)，讀者可在此基礎(chǔ)上開(kāi)發(fā)出界面更加友好、功能更加全面的WebGIS應(yīng)用程序。

[1] 王京.基于Flex的WebGIS的設(shè)計(jì)與實(shí)現(xiàn)[D].西安:西安科技大學(xué),2011

[2] 王天寶,王爾琪,盧浩,等.基于Silverlight的WebGIS客戶(hù)端技術(shù)與應(yīng)用試驗(yàn)[J].地球信息科學(xué)學(xué)報(bào),2010,2(1):69-75

[3] Preciado J C,Linaje M,Sanchez F,et al.Necessity of Methodologies to Model Rich Internet Applications[C].Web Site Evolution(WSE 2005),Seventh IEEE International Symposium,2005

[4] 賈慶雷,萬(wàn)慶,邢超.ArcGIS Server開(kāi)發(fā)指南——基于Flex和.Net[M].北京:科學(xué)出版社,2011

[5] 何正國(guó),杜娟,毛海亞.精通ArcGIS Server應(yīng)用與開(kāi)發(fā)[M].北京:人民郵電出版社,2013

[6] 劉光,唐大仕.ArcGIS Server JavaScript API開(kāi)發(fā)GeoWeb2.0應(yīng)用[M].北京:清華大學(xué)出版社,2010

[7] 賈靜,耿襯.基于ArcGIS API for Flex的Web應(yīng)用初探[J].地理空間信息,2012,10(3):114-118

[8] 孫超,鐘珞.基于Silverlight的富界面應(yīng)用研究[J].武漢理工大學(xué)學(xué)報(bào),2008,12(12):95-97

P208

B

1672-4623（2015）04-0095-04

10.3969/j.issn.1672-4623.2015.04.034

龍際夢(mèng)，碩士，主要從事軍事地理信息系統(tǒng)研究。

2014-06-27。

項(xiàng)目來(lái)源：國(guó)家自然科學(xué)基金資助項(xiàng)目（41301125）。