使用Visifire+ArcGIS API for Silverlight实现Graphic信息的动态图表显示

首先来看一看实现的效果：

<UserControl
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="http://schemas.esri.com/arcgis/client/2009"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
x:Class="VisifireDemo.MainPage"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
<Grid.Resources>
<esri:SimpleRenderer x:Key="MySimplePointRenderer">
<esri:SimpleRenderer.Symbol>
<esri:SimpleMarkerSymbol Size="15" Style="Circle">
<esri:SimpleMarkerSymbol.ControlTemplate>
<ControlTemplate>
<Grid x:Name="RootElement" RenderTransformOrigin="0.5,0.5" Width="15" Height="15">
<Grid.RenderTransform>
<ScaleTransform x:Name="customEnlargeRotatingMarkerSymbolScale" ScaleX="1" ScaleY="1" />
</Grid.RenderTransform>
<Grid.Resources>
<DropShadowEffect x:Key="customEnlargeRotatingMarkerSymbolEffect" />
</Grid.Resources>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="customEnlargeRotatingMarkerSymbolScale" Storyboard.TargetProperty="ScaleX" To="1" Duration="0:0:0.2" />
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="customEnlargeRotatingMarkerSymbolScale" Storyboard.TargetProperty="ScaleY" To="1" Duration="0:0:0.2" />
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="customEnlargeRotatingMarkerSymbolRotate" Storyboard.TargetProperty="Angle" To="360" Duration="0:0:0.2" />
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" To="2" Duration="0:0:0.2" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="customEnlargeRotatingMarkerSymbolScale" Storyboard.TargetProperty="ScaleX" To="2" Duration="0:0:0.2" />
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="customEnlargeRotatingMarkerSymbolScale" Storyboard.TargetProperty="ScaleY" To="2" Duration="0:0:0.2" />
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="customEnlargeRotatingMarkerSymbolRotate" Storyboard.TargetProperty="Angle" To="0" Duration="0:0:0.2" />
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" To="5" Duration="0:0:0.2" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Ellipse x:Name="ellipse" Width="15" Height="15" Fill="Green" Stroke="White" StrokeThickness="2" HorizontalAlignment="Center" VerticalAlignment="Center" Effect="{StaticResource customEnlargeRotatingMarkerSymbolEffect}"></Ellipse>
<Canvas x:Name="RotateCanvas" HorizontalAlignment="Left" VerticalAlignment="Top" Width="15" Height="15" RenderTransformOrigin="0.5,0.5">
<Canvas.Clip>
<EllipseGeometry RadiusX="7.5" RadiusY="7.5" Center="7.5,7.5" />
</Canvas.Clip>
<Canvas.RenderTransform>
<RotateTransform x:Name="customEnlargeRotatingMarkerSymbolRotate" Angle="360" />
</Canvas.RenderTransform>
<Line Stroke="White" StrokeThickness="2" X1="0" Y1="0" X2="15" Y2="15" />
<Line Stroke="White" StrokeThickness="2" X1="0" Y1="15" X2="15" Y2="0" />
</Canvas>
</Grid>
</ControlTemplate>
</esri:SimpleMarkerSymbol.ControlTemplate>
</esri:SimpleMarkerSymbol>

</esri:SimpleRenderer.Symbol>
</esri:SimpleRenderer>
</Grid.Resources>
<esri:Map Background="White" HorizontalAlignment="Stretch" Margin="0" Grid.ColumnSpan="3" Name="Map" VerticalAlignment="Stretch" WrapAround="True" Extent="-15000000,2000000,-7000000,8000000">
<esri:Map.Layers>
<esri:LayerCollection>
<esri:ArcGISTiledMapServiceLayer Url="http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer" />
<esri:FeatureLayer ID="MyFeatureLayer"
Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0"
Where="POP1990 > 500000"
MouseEnter="FeatureLayer_MouseEnter"
MouseLeave="FeatureLayer_MouseLeave"
Renderer="{StaticResource MySimplePointRenderer}"/>
</esri:LayerCollection>
</esri:Map.Layers>
</esri:Map>
</Grid>
</UserControl>

using ESRI.ArcGIS.Client;
using ESRI.ArcGIS.Client.Geometry;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Visifire.Charts;

namespace VisifireDemo
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
Chart chart;
Random rand = new Random(DateTime.Now.Millisecond);
System.Windows.Threading.DispatcherTimer timer = new
System.Windows.Threading.DispatcherTimer();
/// <summary>
/// Function to create a Visifire Chart
/// </summary>
public void CreateChart()
{
try
{
// Create a new instance of a Chart
chart = new Chart();
//添加X,Y坐标的描述
Axis axisX = new Axis()
{
Title = "月份",
FontSize = 18,
};
chart.AxesX.Add(axisX);

Axis axisY = new Axis()
{
Title = "实时监测值",
FontSize = 16,
};
chart.AxesY.Add(axisY);

// 设置图表的高宽
chart.Width = 640;
chart.Height = 300;

//Line数据更新时的过渡效果
chart.AnimatedUpdate = true;

// 定义DatatSeries实例，即一条曲线
DataSeries dataSeries1 = new DataSeries();
DataSeries dataSeries2 = new DataSeries();
//只有当Series的个数大于等于2个时Lenged才会生效
dataSeries1.LegendText = "CO2";
dataSeries2.LegendText = "SO2";
// 设置DataSeries样式
dataSeries1.RenderAs = RenderAs.Spline;
dataSeries2.RenderAs = RenderAs.Spline;
// 定义数据点
DataPoint dataPoint1;
DataPoint dataPoint2;
for (int i = 1; i <= 12; i++)
{
// 实例化数据点
dataPoint1 = new DataPoint();
dataPoint2 = new DataPoint();
//设置数据值
dataPoint1.YValue = rand.Next(0, 99);
dataPoint2.YValue = rand.Next(0, 99);
//设置X轴显示名称
dataPoint1.AxisXLabel = string.Format("{0} 月", i);
dataPoint2.AxisXLabel = string.Format("{0} 月", i);
// 添加数据点
dataSeries1.DataPoints.Add(dataPoint1);
dataSeries2.DataPoints.Add(dataPoint2);
}

// 将DataSeries(曲线)添加到Chart中
chart.Series.Add(dataSeries1);
chart.Series.Add(dataSeries2);
// 注册Chart Loaded事件,在该事件中设置Timer的间断值及注册Timer Tick事件
chart.Loaded += new RoutedEventHandler(chart_Loaded);
}
catch (Exception ex)
{
MessageBox.Show(ex.ToString());
}
}
void chart_Loaded(object sender, RoutedEventArgs e)
{
timer.Tick += new EventHandler(timer_Tick);
timer.Interval = new TimeSpan(0, 0, 0, 0, 2000);
}
/// <summary>
/// Event handler for Tick event of Dispatcher Timer
/// </summary>
/// <param name="sender">System.Windows.Threading.DispatcherTimer</param>
/// <param name="e">EventArgs</param>
void timer_Tick(object sender, EventArgs e)
{
for (Int32 i = 0; i < 12; i++)
{
// 更新曲线数据
chart.Series[0].DataPoints[i].YValue = rand.Next(0, 99);
chart.Series[1].DataPoints[i].YValue = rand.Next(20, 80);
}
}
/// <summary>
/// Add Chart to Map
/// </summary>
/// <param name="chart">Chart</param>
/// <param name="position">Position</param>
public void AddChartToMapLayer(Chart chart, Graphic position)
{
ElementLayer chartlayer = new ElementLayer();
chartlayer.ID = "ChartLayer";
chartlayer.Opacity = 1;
if (Map.Layers["ChartLayer"] != null)
{
Map.Layers.Remove(Map.Layers["ChartLayer"]);
}

chart.Titles.Add(new Title()
{
Text = string.Format("City: {0}", position.Attributes["CITY_NAME"].ToString())
});

//获得Graphic的中心坐标
ESRI.ArcGIS.Client.Geometry.Geometry geometry = position.Geometry;
MapPoint mapPoint = new MapPoint((geometry.Extent.XMax + geometry.Extent.XMin) / 2, (geometry.Extent.YMax + geometry.Extent.YMin) / 2);

//获得图层X,Y方向对应的比例
double cell_X = (Map.Extent.XMax - Map.Extent.XMin) / Map.ActualWidth;
double cell_Y = (Map.Extent.YMax - Map.Extent.YMin) / Map.ActualHeight;

//Chart的宽度为500所以，Chart的中心则位于宽度等于250的位置，将Chart向右移动，以防Chart覆盖Graphic
Envelope extent = new Envelope(mapPoint.X + (320 + 20) * cell_X, mapPoint.Y, mapPoint.X + (320 + 20) * cell_X, mapPoint.Y);
//设置ElementLayer的外包范围
ElementLayer.SetEnvelope(chart, extent);
chartlayer.Children.Add(chart);
Map.Layers.Add(chartlayer);
}
private void FeatureLayer_MouseEnter(object sender, GraphicMouseEventArgs e)
{
//绘制Chart
CreateChart();
//将Chart添加到Map
AddChartToMapLayer(chart, e.Graphic);
//启动Timer,定时刷新数据
timer.Start();
}

private void FeatureLayer_MouseLeave(object sender, GraphicMouseEventArgs e)
{
//停止Timer
timer.Stop();
//移除ElementLayer
if (Map.Layers["ChartLayer"] != null)
{
Map.Layers.Remove(Map.Layers["ChartLayer"]);
}
}
}
}

<object width="100%" height="600" data="data:application/x-silverlight-2," type="application/x-silverlight-2"><param name="source"value="http://files.cnblogs.com/aptdo2008/demo.xap" /><param name="onError" value="onSilverlightError" /><param name="background" value="white" /><param name="minRuntimeVersion" value="4.0.50826.0" /><param name="autoUpgrade" value="true" /><param name="src" value="data:application/x-silverlight-2," /><a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取 Microsoft Silverlight" style="border-style:none" /> </a> </object>
将source 的Value值设置成你的xap地址。