WEBGIS Silverlight API系列教程(一):hello world!

来源:互联网 发布:淘宝商城情侣手表 编辑:程序博客网 时间:2024/05/23 15:15

最近在学习自己感兴趣很久的webgis开发,因为之前跟老师做过siliverlight的项目(其实完全就是找图标写注释之类的杂活 ╭( T o T )╮),所以决定先从siliverlight开发入手~在网上找了一圈后发现基本没什么好的教材。。。稍微好一点的这份教程:《ArcGIS API for Silverlight开发入门》又过于老旧,一堆接口跟代码完全跟不上版本,于是怒下决心自己边学边操作,争取重新做一遍教程!



PS:1.本系列文章所使用的接口均为 ArcGIS API 3.1 for Silverlight,请到官网下载

  2.使用开发语言为C#

  3.请自行搭建开发环境,并提前部署好Silverlight的跨域访问策略!否则将无法显示不同来源的地图,点我:解决方案


那么入门第一步,就是一个标准的helloworld啦~


步骤如下:

1.首先是新建一个Silverlight应用程序,项目类型选择ASP.NET Web 应用程序项目。

2.添加Silverlight API的引用:在SilverlightApplication项目上(不是web项目上注意)添加引用,找到从ESRI下载的API,选择添加ESRI.ArcGIS.Client.dll;

3.在已打开的MainPage.xaml上的UserControl标签中添加ersi引用,并在Grid标签之间添加地图控件,整体代码如下:

<UserControl x:Class="SilverlightApplication1.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    xmlns:esri="clr-namespace:ESRI.ArcGIS.Client;assembly=ESRI.ArcGIS.Client"    mc:Ignorable="d"    d:DesignHeight="300" d:DesignWidth="400">    <Grid x:Name="LayoutRoot" Background="White">        <esri:Map x:Name="mymap">            <esri:Map.Layers>                <esri:ArcGISTiledMapServiceLayer ID="layerworldmap"           Url="http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer" />            </esri:Map.Layers >        </esri:Map>     </Grid></UserControl>

4.F5运行程序,就可以看到hello world了:



这背后的原理是什么呢?

        先说下Silverlight的程序的基本背景。MainPage.xaml实际上是一个控件,相当于asp.net中的default.aspx,大部分的工作都在这里面完成(app.xaml相当于global.asax);上面的是xaml代码,是微软针对wpf/silverlight的标记语言,与flex中的mxml类似。Silverlight程序中所有的布局工作都是由xaml来完成的;而page.xaml中的usercontrol标签(页面的根元素)证明了page.xaml实际上是一个控件类;下面的几句相当于引入了xml的特定命名空间,里面包括了我们的ESRI.ArcGIS.Client;width和height指明了Silverlight控件本身的尺寸,将这里的width和height属性去掉的话会达到全屏的效果;Grid标签是布局控件,相当于html中的表格,可以进行灵活的页面布局。

        而Map标签(继承自xaml的Control)相当于一个Map控件,可以在其中加入图层;这里我们添加了一个ArcGISTiledMapServiceLayer图层(SilverlightAPI的一种图层类型),对应使用的是ArcGIS Server发布的经过cache的服务,作为客户端的API,同JavaScript与FlexAPI一样,都是通过REST方式对资源和操作进行引用的;对这个图层,赋予了一个ID属性,因为SilverlightAPI中的图层是从xaml中的DependencyObject继承而来,所以没有x:Name的属性,为了方便在code-behind(与asp.net类似的托管代码)的代码中找到这个图层,便使用了ID属性;URL的内容便是ArcGIS Online发布好的一个世界地图资源。


        而如果还想再添加图层怎么办呢?直接在Map标签中再添加一个layer就行了~不过要注意的是,第一个加入的图层会显示在最下面,并且决定了整个Map控件的空间参考信息。让我们叠加一个中国人口分布的地图上去看看吧:

                <esri:ArcGISDynamicMapServiceLayer ID="chinamaplayer"            Url="http://cache1.arcgisonline.cn/ArcGIS/rest/services/Thematic_Pop_Eco/China_Population/MapServer" />


F5后的效果如图:


OK,大功告成~~~


当然,为了应对开发中可能出现的图层叠加问题,我们可以添加事件让程序在图层添加失败的时候提醒我们原因,过程很简单:

在刚加上去的layer中添加InitializationFailed属性,会提示你生成新的eventhandler,回车后出现如下代码:

                <esri:ArcGISDynamicMapServiceLayer ID="chinamaplayer" InitializationFailed="ArcGISDynamicMapServiceLayer_InitializationFailed"           Url="http://cache1.arcgisonline.cn/ArcGIS/rest/services/Thematic_Pop_Eco/China_Population/MapServer" />


在事件上面右键单击导航到事件处理器,就会进入前面所说的code-behind页面,添加以下代码(能看出来是C#吧):

private void ArcGISDynamicMapServiceLayer_InitializationFailed(object sender, EventArgs e)      {          ESRI.ArcGIS.Layer layer = sender as ESRI.ArcGIS.Layer;          MessageBox.Show(layer.InitializationFailure.Message);      }


然后运行程序就可以了~