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); }
然后运行程序就可以了~
- WEBGIS Silverlight API系列教程(一):hello world!
- angular2系列教程(一)hello world
- PyCharm教程(一)Hello World
- 从零开始学习ExtJs6系列教程一【Hello World】
- Netty4.x中文教程系列(一) Hello World !
- Netty4.x中文教程系列(一)Hello World !
- rabbitmq 教程 一 hello world
- Arduino系列教程-01 Hello World!
- Netty4.x中文教程系列 Hello World
- Spring Security 系列教程-Hello World
- Spring Security 系列教程-Hello World
- 一步一步学WF系列(一)Hello world开始
- Spring MVC系列(一)之Hello World
- android NDK 教程一(初识JNI--hello world)
- Silverlight - Hello, World!
- BizTalk开发系列(一) "Hello World"
- BizTalk开发系列(一) "Hello World"
- Spring Boot实践教程(一):Hello,world!
- 静态初始化工厂
- const的位置以及区别(C++)
- OllyDBG 入门系列<1> 认识OllyDBG
- Extjs4 可编辑grid实例
- Java的内存回收机制
- WEBGIS Silverlight API系列教程(一):hello world!
- python 进程
- OllyDBG 入门系列<2> 字串参考
- (数据结构)图的应用,一个简单的学校地图.包含的内容:图的最短路径算法 和 图的深度优先遍历算法
- 会场安排问题 noj 14题
- OllyDBG 入门系列<3> 函数参考
- codeforce Helpful Maths
- 我终于明白了大师和凡夫的区别
- OllyDBG 入门系列<4> 内存断点