基于WPF实现绘制地铁路线图.docx
第
基于WPF实现绘制地铁路线图
目录WPF图形概述地铁官网效果获取地铁路线数据构建地铁数据模型解析数据源绘制地铁路线图效果展示经常坐地铁,却不知道地铁多少条线路?哪个站下车?今天就带领大家熟悉并绘制深圳地铁路线图。
WPF在绘制矢量图方面有非常强大的优势,利用WPF可以绘制出各种矢量图形,如线,圆,多边形,矩形,及组合图形。今天以绘制深圳地铁路线图为例,简述WPF在图形绘制方面的一些知识,仅供学习分享使用,如有不足之处,还请指正。
WPF图形概述
与传统的.NET开发使用GDI+进行绘图不同,WPF拥有自己的一套图形API,绘图为矢量图。绘图可以在任何一种布局控件中完成,wpf会根据容器计算相应坐标。最常用的是Canvas和Grid。基本图形包括以下几个,都是Shaper类的派生类。
Line,直线段,可以设置StrokeRectangle,有Stroke也有FillEllipse,椭圆,同上Polygon,多边形。由多条直线线段围成的闭合区域,同上。Polyline,折线,不闭合,由多条首尾相接的直线段组成Path,路径,闭合。可以由若干直线、圆弧、贝塞尔曲线(由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋)组成。很强大。
地铁官网效果
首先打开深圳地铁官网【/map/】,可查看深圳地铁的路线图,如下所示:
获取地铁路线数据
通过对地铁官网的网络接口接收数据分析,可以获取地铁数据的原始JSON文件,将原始JSON文件保存到本地,在程序中进行引用,如下所示:
构建地铁数据模型
在得到shentie.json文件后,通过分析,构建模型类,如下所示:
namespaceDemoSubway.Models
///summary
///深圳地铁模型
////summary
publicclassShenTie
[JsonProperty(s)]
publicstringName{get;set;}
[JsonProperty(i)]
publicstringIndex{get;set;}
[JsonProperty(l)]
publicSubwayLine[]SubwayLines{get;set;}
[JsonProperty(o)]
publicstringObj{get;set;}
publicclassSubwayLine
[JsonProperty(st)]
publicSt[]Sites{get;set;}
[JsonProperty(ln)]
publicstringLineNumber{get;set;}
[JsonProperty(su)]
publicstringSu{get;set;}
[JsonProperty(kn)]
publicstringKName{get;set;}
[JsonProperty(c)]
publicstring[]Circles{get;set;}
[JsonProperty(lo)]
publicstringLo{get;set;}
[JsonProperty(lp)]
publicstring[]LinePosition{get;set;}
[JsonProperty(ls)]
publicstringLs{get;set;}
[JsonProperty(cl)]
publicstringColor{get;set;}
[JsonProperty(la)]
publicstringLa{get;set;}
[JsonProperty(x)]
publicstringX{get;set;}
[JsonProperty(li)]
publicstringLi{get;set;}
publicclassSt
[JsonProperty(rs)]
publicstringRs{get;set;}
[JsonProperty(udpx)]
publicstringUdpx{get;set;}
[JsonProperty(su)]
publicstringSu{get;set;