arcgis ElementLayer图层之足帧动画
在本次GIS项目开发中，需要实现轨迹回放功能；就是从地图上了一个点，经过N个点，一路慢慢的移动，而实现这效果的最好方式就是Siverlight足帧动画了。好了废话不说，先介绍下Demo结构，看图：
persion.xaml用户控件里面显示一张图片。当然有了这个userControl，那基本上什么多可以放了。看Persion.xaml代码:
Persion.xaml
1 <UserControl x:Class="Silverlight.Views.Persion"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6 mc:Ignorable="d"
7 d:DesignHeight="300" d:DesignWidth="400">
8
9 <Canvas>
10 <Canvas.Background>
11 <ImageBrush ImageSource="/Silverlight;component/Images/persion.png"></ImageBrush>
12 </Canvas.Background>
13 </Canvas>
14 </UserControl>
cs文件里面就定义了X和Y两个属性,定义这两个属性的目的是能为Storyboard.SetTargetProperty服务；
Persion.xaml.cs
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Net;
5 using System.Windows;
6 using System.Windows.Controls;
7 using System.Windows.Documents;
8 using System.Windows.Input;
9 using System.Windows.Media;
10 using System.Windows.Media.Animation;
11 using System.Windows.Shapes;
12
13 namespace Silverlight.Views
14 {
15 public partial class Persion : UserControl
16 {
17 public Persion()
18 {
19 InitializeComponent();
20 }
21
22
23 #region 属性
24 //获取或设置X坐标
25 public double X
26 {
27 get { return (double)GetValue(XProperty); }
28 set
29 {
30 SetValue(XProperty, value);
31 SetElementEnvelope();
32 }
33 }
34 public static DependencyProperty XProperty = DependencyProperty.Register("X", typeof(double), typeof(Persion), new PropertyMetadata(OnXChange));
35 static void OnXChange(DependencyObject sender, DependencyPropertyChangedEventArgs e)
36 {
37 (sender as Persion).X = (double)e.NewValue;
38 }
39
40 //获取或设置Y坐标
41 public double Y
42 {
43 get { return (double)GetValue(YProperty); }
44 set
45 {
46 SetValue(YProperty, value);
47 SetElementEnvelope();
48 }
49 }
50
51 public static DependencyProperty YProperty = DependencyProperty.Register("Y", typeof(double), typeof(Persion), new PropertyMetadata(OnYChange));
52 static void OnYChange(DependencyObject sender, DependencyPropertyChangedEventArgs e)
53 {
54 (sender as Persion).Y = (double)e.NewValue;
55 }
56 //设置Envelope属性
57 private void SetElementEnvelope()
58 {
59 SetValue(ESRI.ArcGIS.Client.ElementLayer.EnvelopeProperty, new ESRI.ArcGIS.Client.Geometry.Envelope(X, Y, X, Y));
60 }
61 #endregion
62 }
63 }
搞定了persion后到地图上面来实现。
MainPage.xaml
1 <UserControl xmlns:esri="http://schemas.esri.com/arcgis/client/2009" x:Class="Silverlight.MainPage"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6 mc:Ignorable="d"
7 d:DesignHeight="300" d:DesignWidth="400">
8
9 <Grid x:Name="LayoutRoot" Background="White">
10 <esri:Map x:Name="map1">
11 <esri:ArcGISTiledMapServiceLayer Url="http://192.168.8.188/ArcGIS/rest/services/kjtxnetMain/MapServer"></esri:ArcGISTiledMapServiceLayer>
12 </esri:Map>
13 </Grid>
14 </UserControl>
mainpage.xaml.cs
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Net;
5 using System.Windows;
6 using System.Windows.Controls;
7 using System.Windows.Documents;
8 using System.Windows.Input;
9 using System.Windows.Media;
10 using System.Windows.Media.Animation;
11 using System.Windows.Shapes;
12 using Silverlight.Views;
13
14 namespace Silverlight
15 {
16 public partial class MainPage : UserControl
17 {
18 private ESRI.ArcGIS.Client.ElementLayer _elementLayer = new ESRI.ArcGIS.Client.ElementLayer()
19 {
20 ID = "elementLayer"
21 };
22 //起始坐标
23 private ESRI.ArcGIS.Client.Geometry.MapPoint starPoint = new ESRI.ArcGIS.Client.Geometry.MapPoint(108.477998481483, 31.2812729500709);
24 //结束坐标
25 private ESRI.ArcGIS.Client.Geometry.MapPoint endPoint = new ESRI.ArcGIS.Client.Geometry.MapPoint(108.144513331365, 30.8702332329334);
26 private Storyboard storyboard = new Storyboard();
27 private Persion persion = null;
28 public MainPage()
29 {
30 InitializeComponent();
31 map1.Layers.Add(_elementLayer);
32
33 /*
34 把persion添加到ESRI.ArcGIS.Client.ElementLayer，
35 * ESRI.ArcGIS.Client.ElementLayer在添加Child之前必须设置Envelope，
36 */
37 persion = new Persion()
38 {
39 X= starPoint.X,
40 Y=starPoint.Y,
41 Width=50,
42 Height=50
43 };
44 _elementLayer.Children.Add(persion);
45
46 Start();
47 }
48
49 private void Start()
50 {
51 storyboard.Pause();
52 storyboard.Completed -= new EventHandler(storyboard_Completed);
53 storyboard = new Storyboard();
54
55 DoubleAnimationUsingKeyFrames framX = new DoubleAnimationUsingKeyFrames();
56 DoubleAnimationUsingKeyFrames framy = new DoubleAnimationUsingKeyFrames();
57
58 LinearDoubleKeyFrame keyX = new LinearDoubleKeyFrame()
59 {
60 Value=endPoint.X,
61 KeyTime =KeyTime.FromTimeSpan(TimeSpan.FromSeconds(5))
62 };
63 LinearDoubleKeyFrame keyY = new LinearDoubleKeyFrame()
64 {
65 Value = endPoint.Y,
66 KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(5))
67 };
68 framX.KeyFrames.Add(keyX);
69 framy.KeyFrames.Add(keyY);
70
71 Storyboard.SetTarget(framX,persion);
72 Storyboard.SetTargetProperty(framX,new PropertyPath(Persion.XProperty));
73 Storyboard.SetTarget(framy, persion);
74 Storyboard.SetTargetProperty(framy, new PropertyPath(Persion.YProperty));
75
76 storyboard.Children.Add(framX);
77 storyboard.Children.Add(framy);
78
79 storyboard.Completed += new EventHandler(storyboard_Completed);
80 storyboard.Begin();
81 }
82
83 void storyboard_Completed(object sender, EventArgs e)
84 {
85
86 }
87
88
89 }
90 }
到这已经可以看到Persion从starPoint流畅的移动到endPoint。如有更好的实现方法还请指教。
