使用Visifire+ArcGIS API for Silverlight实现Graphic信息的动态图表显示
2020-12-13 02:02
标签:des style c class blog code
首先来看一看实现的效果:
PS:原始的程序中更新曲线数据时添加了过渡的效果,具体可查看官网的示例: http://www.visifire.com/silverlight_spline_charts_gallery.php 点击其中的一个例子,然后点击Live
Updates,就可看到数据更新时的过渡效果。但是蛋疼的博客园,不知道为什么,我插入了我原始的xap文件,过渡效果却没有了,每次更新数据时,曲线直接就出来了(中间没有过渡行为),开始的时候以为是上传后xap文件有可能发生了变化,或者进行压缩什么的,或者浏览器解析什么的,于是我把上传到博客园的xap文件又下载下来,然后嵌入到一个htm页面中,发现还是有过度效果的,但是为什么在博客园的日志中就没有呢?整了好久还是没有整明白,求解释! 下面来看看具体实现的过程吧: 首先需要添加SLVisifire.Charts,FJ.Core的引用。然后开始我们正式的工作: 1.定义一个Chart,该Chart即为显示的图表,以及定义一个Timer,用于定时刷新数据。 2.定义一个方法:CreateChart实例化Chart,并完成Chart的相关设置(如:高,宽,曲线样式等等) 3.我们看到在创建Chart中注册了Loaded事件,在该事件的完成函数我们设置Timer的间断值及注册Timer Tick事件 4.这里我们再写一个方法:AddChartToMapLayer,该方法用来将Chart添加到地图中 现在准备工作已经完成,下面就调用这些方法来实现上述的功能,我们大体的功能过程是: 当鼠标移入Graphic是就显示其对应的Chart,移除的移除Chart,这里我们注册一下FeatureLayer的MouseEnter和MouseLeave事件就行,我们再后台的XAML中注册这两个事件。 最后在后台添加如下代码: 后台的XAML代码: 这样我们便实现了上述的效果。 需要注意的几点: 1.Chart控件第一次加载数据的动画效果(一个点一个点添加),只能使用一次,也就是实例化Chart,加载数据时会有这样的效果,之后更新Chart控件的数据不会有类似第一次加载Chart时显示曲线动画效果,而是上面说的过渡效果。 2.注意设置Chart的AnimatedUpdate属性为True,否则数据更新时绘制曲线没有过渡的效果 3.将Chart作为ElementLayer添加到地图中,注意设置ElementLayer的显示位置。 总结: 以上的过程数据都是用Timer组件来定时生成的,当然这里也可以扩展,比如你的数据也可以是通过SQL查询得到。此外,本例没有用到数据绑定,这是因为本文的Chart是动态生成的,每次选择Graphic时都会重新生成Chart.所以没有用数据绑定。当然如果你的Chart是写死的(实例化一次),或者定义在后台的xaml中,那么建议您选择数据绑定的方式,数据绑定的方式也很简单,例如在XAML定义如下的Chart(详见Visifire
documentation): 在后台添加如下代码: 这样便可以实现Chart曲线的数据绑定。 PS:有那么一段时间没有用Visifire了,很多又忘记了,以上算是自己的一个总结,同时很多人也问个类似的效果怎么做,在此和大家分享一下,鉴于时间和知识的关系,疏漏和错误在所难免,还望各位指正。 //关于解决地图缩放时Chart偏移的问题。 1.注册Map的ExtentChanging事件,然后在事件完成函数中重新设定Elmentlayer的Envelop,代码如下: 感谢8楼 vergiljzy的建议和提示,有兴趣的不妨试试采用Inforwindow的方式。 使用Visifire+ArcGIS API for Silverlight实现Graphic信息的动态图表显示,搜素材,soscw.com 使用Visifire+ArcGIS API for Silverlight实现Graphic信息的动态图表显示 标签:des style c class blog code 原文地址:http://www.cnblogs.com/lonelyxmas/p/3752743.html Chart chart;
Random rand = new Random(DateTime.Now.Millisecond);
System.Windows.Threading.DispatcherTimer timer = new
System.Windows.Threading.DispatcherTimer();
///
void chart_Loaded(object sender, RoutedEventArgs e)
{
timer.Tick += new EventHandler(timer_Tick);
timer.Interval = new TimeSpan(0, 0, 0, 0, 2000);
}
///
///
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}"/>
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"]);
}
}
UserControl x:Class="SilverlightChartDemo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:esri="http://schemas.esri.com/arcgis/client/2009">
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>
vc:Chart Name="MyChart" Width="500" Height="300" Theme="Theme1">
vc:Chart.Series>
vc:DataSeries RenderAs="Column" DataSource="{Binding}">
vc:DataSeries.DataMappings>
vc:DataMapping MemberName="XValue" Path="Key">vc:DataMapping>
vc:DataMapping MemberName="YValue" Path="Value">vc:DataMapping>
vc:DataSeries.DataMappings>
vc:DataSeries>
vc:Chart.Series>
vc:Chart>
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
for (int i = 0; i 10; i++)
{
values.Add(new KeyValuePairdouble,double>(i, i + 1));
}
MyChart.DataContext = values;
}
Random rand = new Random();
ObservableCollection
private void Map_ExtentChanging(object sender, ExtentEventArgs e)
{
double cell_X = (Map.Extent.XMax - Map.Extent.XMin) / Map.ActualWidth;
ESRI.ArcGIS.Client.Geometry.Geometry geometry = selectedGraphic.Geometry;
MapPoint mapPoint = new MapPoint((geometry.Extent.XMax + geometry.Extent.XMin) / 2, (geometry.Extent.YMax + geometry.Extent.YMin) / 2);
Envelope extent = new Envelope(mapPoint.X + (320 + 20) * cell_X, mapPoint.Y, mapPoint.X + (320 + 20) * cell_X, mapPoint.Y);
Chart Mychart = chartlayer.Children[0] as Chart;
ElementLayer.SetEnvelope(Mychart, extent);
}
上一篇:telnet命令的完整使用方法
下一篇:python 并发编程目录
文章标题:使用Visifire+ArcGIS API for Silverlight实现Graphic信息的动态图表显示
文章链接:http://soscw.com/essay/24743.html