ArcGIS API for Silverlight 自定义MarkerSymbol

概述概述 之前我们做ArcGIS开发的时候都是使用ArcEngine或是ArcServer ADF，展示给用户的都是一些图片，要做成好的效果动态效果基本上是很难的。，并且随着用户对界面体验的要求越来越高，GIS行业需要一种技术来满足客户的这种需求。随着ArcGIS10.0的发布，富客户端技术在GIS行业中的兴起，富客户端系统是在浏览器上运行的，必须安装该技术的运行环境插件，当我们访问这个地址时，浏览器 概述

之前我们做ArcGIS开发的时候都是使用ArcEngine或是ArcServer ADF，展示给用户的都是一些图片，要做成好的效果动态效果基本上是很难的。，并且随着用户对界面体验的要求越来越高，GIS行业需要一种技术来满足客户的这种需求。随着ArcGIS10.0的发布，富客户端技术在GIS行业中的兴起，富客户端系统是在浏览器上运行的，必须安装该技术的运行环境插件，当我们访问这个地址时，浏览器会把我们开发的富客户端需要在客户端运行的包下载到本地，运行。这样相当于我们有相当一部分的代码是可以在客户端运行的，特别是UI模块，这就为我们在UI层做一些效果提供了可能性。

Js也算是一种富客户端技术，但Js开发起来还是比较复杂的，而且不同的浏览器对Js的支持也不尽相同。在我自己看来，我一直不认为Js是一个典型的富客户端技术。我认为Flex和Silverlight都是很典型的富客户端技术，而且大家使用起来也比较方便。并且这两种技术都有自己的运行时，并且安装包也不算大，这样我们写的代码就不用考虑浏览器是否支持，只要客户端的运行环境支持该浏览器，那么我们写的代码该浏览器就能运行。这个是我个人感觉比较好的。

并且我自己主要还是使用C#，所以在选择富客户端开发方式时，肯定是要选择Silverlight的。这个和平台的前景关系不大，毕竟现在Silverlight能满足目前项目的需求。

使用API自带的MarkerSymbol

ArcGISMarkerSymbol相关的继承体系如下图所示：

简单符号样式、图片符号样式和文本样式。

通过简单符号样式，可以设置符号的颜色、大小、偏移量等信息，Style属性来控制符号的形状，包括圆形、三角、十字交叉等。

图片符号样式主要用图片来标识符号。

文本样式是用来标记文字的。

通过上述三种样式，基本上可以满足我们项目的需求，例如鼠标放上去，图标变大，离开图标变小。甚至变更图片等都可以，但是要做成动态效果，就没那么简单了。此时就用到了自定义MarkerSymbol。

自定义MarkerSymbol

因为MarkerSymbol是一个实体类，我们可以在此基础上自定义，并且MarkerSymbol最终是继承DependencyObject和INotifyPropertyChanged的，所以MarkerSymbol是可以绑定一个对象的。并且Symbol有ControlTemplate属性，说明我们是可以自定义模板的。其实下面自定义模板和GIS的关系不大了，主要是Silverlight的一些特性。

下面我们就定义一个报警闪烁的点样式，代码如下：

<esri:MarkerSymbol x:Key="DefaultAlarmMarkerSymbol">        <esri:MarkerSymbol.ControlTemplate>            <ControlTemplate>                <Canvas>                    <vsm:visualstatemanager.VisualStateGroups>                        <vsm:VisualStateGroup x:name="CommonStates">                            <vsm:VisualState x:name="normal">                                <Storyboard RepeatBehavior="Forever">                                    <DoubleAnimation BeginTime="00:00:00" Storyboard.Targetname="ellipse" Storyboard.TargetProperty="(UIElement.Rendertransform).(Scaletransform.ScaleX)" From="1" To="10" Duration="00:00:01" />                                    <DoubleAnimation BeginTime="0:0:0" Storyboard.Targetname="ellipse" Storyboard.TargetProperty="(UIElement.Rendertransform).(Scaletransform.ScaleY)" From="1" To="10" Duration="00:00:01" />                                    <DoubleAnimation BeginTime="00:00:00" Storyboard.Targetname="ellipse" Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="0" Duration="00:00:01" />                                </Storyboard>                            </vsm:VisualState>                        </vsm:VisualStateGroup>                    </vsm:visualstatemanager.VisualStateGroups>                    <Ellipse Height="10" WIDth="10" Canvas.left="-5" Canvas.top="-5" RendertransformOrigin="0.5,0.5" x:name="ellipse" IsHitTestVisible="False">                        <Ellipse.Rendertransform>                            <Scaletransform />                        </Ellipse.Rendertransform>                        <Ellipse.Fill>                            <RadialGradIEntBrush>                                <GradIEntStop color="#00FF0000" />                                <GradIEntStop color="#FFFF0000" Offset="0.25" />                                <GradIEntStop color="#00FF0000" Offset="0.5" />                                <GradIEntStop color="#FFFF0000" Offset="0.75" />                                <GradIEntStop color="#00FF0000" Offset="1" />                            </RadialGradIEntBrush>                        </Ellipse.Fill>                    </Ellipse>                    <Ellipse Height="10" WIDth="10" Canvas.left="-5" Canvas.top="-5" Fill="#FFFF0000" x:name="ellipse1" />                </Canvas>            </ControlTemplate>        </esri:MarkerSymbol.ControlTemplate>    </esri:MarkerSymbol>

下面我们就解释一下上述代码.

<esri:MarkerSymbol x:Key="DefaultAlarmMarkerSymbol"> 表示我们定义了一个MarkerSymbol类，关键字是DefaultAlarmMarkerSymbol。

<esri:MarkerSymbol.ControlTemplate>我们要定义MarkerSymbol的模板。

<Ellipse Height="10" WIDth="10" Canvas.left="-5" Canvas.top="-5"  RendertransformOrigin="0.5,0.5" x:name="ellipse" IsHitTestVisible="False">                        <Ellipse.Rendertransform>                            <Scaletransform />                        </Ellipse.Rendertransform>                        <Ellipse.Fill>                            <RadialGradIEntBrush>                                <GradIEntStop color="#00FF0000" />                                <GradIEntStop color="#FFFF0000" Offset="0.25" />                                <GradIEntStop color="#00FF0000" Offset="0.5" />                                <GradIEntStop color="#FFFF0000" Offset="0.75" />                                <GradIEntStop color="#00FF0000" Offset="1" />                            </RadialGradIEntBrush>                        </Ellipse.Fill>                    </Ellipse>                    <Ellipse Height="10" WIDth="10" Canvas.left="-5" Canvas.top="-5" Fill="#FFFF0000" x:name="ellipse1" />

这段代码定义了两个椭圆，一个椭圆的名字叫ellipse，另一个叫ellipes1。

RendertransformOrigin 以较为非标准的方式使用 Point 结构值，因为 Point 不表示坐标系统中的绝对位置。 相反，0 和 1 之间的值被解释为当前元素在每个 X 轴和 Y 轴上的范围的因子。 例如，(0.5,0.5) 将使呈现转换位于元素中心，而 (1,1) 会将呈现转换置于元素的右下角。 NaN 不是一个接受的值。

RadialGradIEntBrush，定义渲染颜色，根据透明度和颜色的定义可以形成一个个的圈。

<vsm:visualstatemanager.VisualStateGroups>                        <vsm:VisualStateGroup x:name="CommonStates">                            <vsm:VisualState x:name="normal">                                <Storyboard RepeatBehavior="Forever">                                    <DoubleAnimation BeginTime="00:00:00" Storyboard.Targetname="ellipse" Storyboard.TargetProperty="(UIElement.Rendertransform).(Scaletransform.ScaleX)" From="1" To="10" Duration="00:00:01" />                                    <DoubleAnimation BeginTime="0:0:0" Storyboard.Targetname="ellipse" Storyboard.TargetProperty="(UIElement.Rendertransform).(Scaletransform.ScaleY)" From="1" To="10" Duration="00:00:01" />                                    <DoubleAnimation BeginTime="00:00:00" Storyboard.Targetname="ellipse" Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="0" Duration="00:00:01" />                                </Storyboard>                            </vsm:VisualState>                        </vsm:VisualStateGroup>

该部分代码是定义MarkerSymbol在各种状态下的表现形式。

<vsm:VisualStateGroup x:name="CommonStates">//表示普通状态，普通状态包括normal（默认状态）、Disabled （控件被禁用）、MouSEOver（当鼠标位于控件上方时）<pre name="code" ><vsm:VisualState x:name="normal">//由此代码可以看出，该节点包含的代码都是作用于控件的默认状态的。<pre name="code" ><Storyboard RepeatBehavior="Forever">//代码定义了动画，动画的播放模式是循环播放

//共有三个动画模式，都是针对Double数值的

<DoubleAnimation BeginTime="00:00:00" Storyboard.Targetname="ellipse" Storyboard.TargetProperty="(UIElement.Rendertransform).(Scaletransform.ScaleX)" From="1" To="10" Duration="00:00:01" />//针对的对象是ellipse，也就是我们定义的第一个椭圆。针对的属性是椭圆的渲染变换对象。该对象初始化为缩放变换对象，并且对象的X方向的值从1变换到10，用时1秒。<DoubleAnimation BeginTime="0:0:0" Storyboard.Targetname="ellipse" Storyboard.TargetProperty="(UIElement.Rendertransform).(Scaletransform.ScaleY)" From="1" To="10" Duration="00:00:01" /><pre name="code" ><pre name="code" ><pre name="code" >//针对的对象也是ellipse，把Y方向缩放量值从1变换到10，用时1秒。

 <DoubleAnimation BeginTime="00:00:00" Storyboard.Targetname="ellipse" Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="0" Duration="00:00:01" />

<pre name="code" ><pre name="code" ><pre name="code" ><pre name="code" ><pre name="code" >//针对的对象也是ellipse，设置的属性书透明度，从1变为0，用时1秒，也就是从显示慢慢变成透明。

通过上面的代码我们可以想象一下,效果是符号有一个半径为5的红色圆形符号一直显示，然后另一个两个环的红色的符号变放大、边消失。

大致就是这个效果了。

总结

以上是内存溢出为你收集整理的ArcGIS API for Silverlight 自定义MarkerSymbol全部内容，希望文章能够帮你解决ArcGIS API for Silverlight 自定义MarkerSymbol所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。