彩票走势图

WPF图表控件Chart FX使用方法系列:如何绘制地图轮廓

原创|其它|编辑:郝浩|2012-12-24 15:27:04.000|阅读 2807 次

概述:Chart FX for WPF有着一个强大的功能:XYZExtension。这个功能将能够使得我们在一个3D图表上添加或控制第三个轴。个人觉得最新的这个SurfaceXYZ图表最炫的功能就是创使用来自不同城市的数据创建地在理位置上精确的表面。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

    Chart FX for WPF有着一个强大的功能:XYZExtension。这个功能将能够使得我们在一个3D图表上添加或控制第三个轴。个人觉得最新的这个SurfaceXYZ图表最炫的功能就是创使用来自不同城市的数据建地理位置上精确的表面。这个功能可以用于很多的地方,比如说图表绘制、每个城市会甚至是一个国家的总销售收入等。

    在本次的示例中,我们假设需要显示整个佛罗里达超过800家店的客户满意度,我们将按照城市的字母顺序,然而定位指定商店的分数是非常容易的,但是难的是了解国家哪些区域的商店比其他的地方做的更好,并将其绘制在表面上。在另一方面,将会打组所有接近的商店,这样就会很好的找到最好和最差的区域时哪里,这种情况特别适合于一个国家的地图,最终的效果将会如下所示:

如何利用Chart FX for WPF来绘制地图的轮廓

     选择一张地图,我选择了Mercator墨卡托投影的地图,也许你还没注意到,我们已将这个所选的地图放在了表面。这样做是因为用于表面的三角测量法将会插入所有的数据到我们的表面上,从墨西哥湾商店的数据收集来造成一种假象。值得注意的是,我们将这张图盖住了城市是透明的区域,这样的话,非透明的海洋将会覆盖插入的数据就会显得没有意义。下面是我们没有表面的地图的样子。

如何利用Chart FX for WPF来绘制地图的轮廓

    现在已经选择了地图,来看看数据资料:

<Store CITY="MIAMI" LATITUDE="25.64" LONGITUDE="-80.32" SCORE="91" />
<Store CITY="NORTH MIAMI BEAC" LATITUDE="25.94" LONGITUDE="-80.14" SCORE="89" />
<Store CITY="NORTH MIAMI" LATITUDE="25.89" LONGITUDE="-80.18" SCORE="91" />
<Store CITY="NORTH MIAMI BEAC" LATITUDE="25.93" LONGITUDE="-80.18" SCORE="91" />
<Store CITY="OLYMPIA HEIGHTS" LATITUDE="25.74" LONGITUDE="-80.36" SCORE="92" />
<Store CITY="MIAMI SPRINGS" LATITUDE="25.82" LONGITUDE="-80.30" SCORE="92" />

    我们有着商店的经度和纬度,这将会值得通过GPS找到这个位置非常的容易。接下来,我们要将它转化成在我们随所挑选的地图上的像素值,由于这是一个墨卡托投影,使用下面的公式来进行转换(φ表示的是经度,λ表示的是纬度)。

如何利用Chart FX for WPF来绘制地图的轮廓

    一旦将我们的数据格式化之后,就可以将数据传递到图表,看看会得到什么样的结果:

SurfaceXYZ surfaceXYZ = new SurfaceXYZ();
surfaceXYZ.ShowPointsGridlines = false;
surfaceXYZ.ShowSeriesGridlines = false;
surfaceXYZ.ShowContourLines = true;
chart1.ItemsSource = chartData;

SeriesAttributes series0 = new SeriesAttributes();
SeriesAttributes series1 = new SeriesAttributes();

series0.GalleryAttributes = surfaceXYZ;
series1.GalleryAttributes = surfaceXYZ;

series0.BindingPath = "Score";
series0.BindingPathX = "X";
series1.BindingPath = "Y";

chart1.Series.Add(series0);
chart1.Series.Add(series1);

    值得注意的是,我们在这里需要两个系列的XYZ图表,第二个图表将会被绑定到Z数据,但是由于我们希望在上面的表面是以一种二维的方式,我们将它称为“Y”(在地图上或是在纬度上)。Y轴表示着我们正在传递的值,如果这不是二维的图表,它将会代表着深度或高度。

如何利用Chart FX for WPF来绘制地图的轮廓

    在表面多余的代码,依然会有用,如果在图表上做一些变动使它变成轮廓。

ChartFX.WPF.View3D view3D = chart1.View3D;
view3D.IsEnabled = true;
view3D.AngleX = -90;
view3D.AngleY = 0;
view3D.Projection = Projection.Orthographic;
view3D.BackWallVisibility = Visibility.Collapsed;
chart1.AxisX.Line.Visibility = Visibility.Hidden;
chart1.AxisX.Grids.Major.Visibility = Visibility.Hidden;
view3D.Lights.Clear();
System.Windows.Media.Media3D.AmbientLight ambLight = 
    new System.Windows.Media.Media3D.AmbientLight(Color.FromRgb(0xD0, 0xD0, 0xD0));
view3D.Lights.Add(ambLight);

如何利用Chart FX for WPF来绘制地图的轮廓

 ;   如果你仔细看会发现,这个“Florida shape”看起来有一点扭曲,这个主要是因为我们的轮廓是放置在一个平面上的,而不是我们选择的地图的比例设置。此外,在X轴和Z轴上的最大值并不是在我们地图上使用的值。以上将会扭曲我们的表面,使得我们的数据表现的不切实际,如果想要修复这个问题,可以采用下面的代码实现:

chart1.AxisX.Max = 820; //Height of the bitmap
chart1.AxisX.Min = 0;

XYZExtension xyzExtension = new XYZExtension();
xyzExtension.AxisZ.Max = 772; //Width of the bitmap
xyzExtension.AxisZ.Min = 0;
chart1.Extensions.Add(xyzExtension);

chart1.View3D.Depth = 94.1463; //Width divided by Height

    注意我们使用的是XYZExtension来控制Z轴的最大和最小值,然后设置我们Z轴和X轴的最大和最小值为地图的大小,同时还改变了Depth属性为地图的比例(值能是最大程度上的接近),这个Depth属性其实主要是控制Z轴的尺寸。

如何利用Chart FX for WPF来绘制地图的轮廓

    现在我们需要做的就是把这个地图置顶,在这里有个小窍门,我们将会创建一个ImageBrush,用来绘制图表的地部(X轴),以及重置底部的图表到顶部。

chart1.AxisX.Position = AxisPosition.Far;

ImageBrush mapBrush = new ImageBrush();
mapBrush.Stretch = Stretch.Fill;
mapBrush.ImageSource = 
    new BitmapImage(new Uri("pack://siteoforigin:,,,/Resources/FloridaMap.png"));
chart1.AxisX.Background = mapBrush;
chart1.View3D.Wall.Thickness = 1;

如何利用Chart FX for WPF来绘制地图的轮廓


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP