《Web 20 GIS原理与方法教程》实验指导书二.docx
- 文档编号:8245136
- 上传时间:2023-01-30
- 格式:DOCX
- 页数:44
- 大小:570.25KB
《Web 20 GIS原理与方法教程》实验指导书二.docx
《《Web 20 GIS原理与方法教程》实验指导书二.docx》由会员分享,可在线阅读,更多相关《《Web 20 GIS原理与方法教程》实验指导书二.docx(44页珍藏版)》请在冰豆网上搜索。
《Web20GIS原理与方法教程》实验指导书二
《Web2.0GIS原理与方法教程》
实验指导书
尹章才主编
武汉理工大学教材中心
内容提要
本实验指导书是针对教材《Web2.0GIS原理与方法教程》编写的,内容主要包括语言篇(XML基础,SVG基础及SVG地图,XSL地图表达规则,基于XML的制图系统),技术篇(Mashup地理译码,PPGIS,地图API,AJAX,KML)和应用篇等。
前言
由于《Web2.0GIS原理与方法教程》中涉及较多的Web2.0语言、技术和应用,但不可能对新的语言介绍过多,因此在配套的实验教程中,比较详细介绍了Web2.0语言及其在GIS中的应用技术,为学生系统掌握Web2.0技术提供指导
作者于鉴湖
2011年4月1日
目录
《Web2.0GIS原理与方法教程》1
实验指导书1
内容提要2
前言3
目录4
第三部分SVG基础6
第一节本实验内容简介6
第二节基本SVG形状12
第三节SVG增强部分22
第四节坐标与变换26
第五节路径31
第六节动画和交互性40
后记46
第三部分SVG基础
实验目的:
●熟悉SVG语法
●利用SVG进行几何图形设计
●初步设计SVG地图符号
第一节本实验内容简介
我应该学习这个教程吗?
本教程辅助开发人员理解可伸缩向量图形(SVG)背后的概念以将它们作为静态文档或动态生成的内容创建。
XML经验不是必需的,但熟悉至少一种标记语言(如HTML)是有用的。
有关基本的XML信息,请参阅教程IntroductiontoXML。
在本教程的结束部分的单个脚本编制示例中用到了JavaScript,不过相当简单。
注:
这份文档来自
由dancewing整理,如果文中某个地方因为个人编辑错误,你参考原文,
本教程的内容
可伸缩向量图形(SVG)使得用文本指定出现在页面上的图像成为可能。
例如,传统图形需要指定矩形的每一个像素,而SVG只要说明矩形存在,并指出它的大小、位置和其它属性即可。
它的好处有很多,包括轻松地从数据库信息生成图形(如图或图表)的能力,以及向图形添加动画和交互性的能力。
本教程演示了构建SVG文档必需的概念,如基本形状、路径、文本和绘制模型,还有动画和脚本编制。
关于作者
NicholasChase曾参与了LucentTechnologies、SunMicrosystems、Oracle和TampaBayBuccaneers等公司的网站开发。
Nick曾经当过高中物理教师、低级放射性废物设施经理、在线科幻杂志编辑、多媒体工程师以及Oracle讲师。
最近,他担任过位于美国佛罗里达州Clearwater的SiteDynamicsInteractiveCommunications的首席技术官,他还写了三本有关Web开发的书,包括JavaandXMLFromScratch(Que)。
他喜欢倾听读者的意见,可以通过nicholas@与他联系。
向量图形与光栅图形的比较
在万维网历史的大部分时间里,浏览器显示的图形都是光栅格式的。
在光栅图像(如GIF或JPEG图像)中,文件包含图像中每个像素的颜色值。
浏览器读取这些值并做出相应行动。
它仅认识到单独的部分,而没有整体概念。
总的说来,这一系统有其优势,例如忠实再现摄影图像的能力,但它在某些情形下显得不足。
例如,尽管浏览器能以不同大小显示一个图像,通常会产生锯齿边缘,在这些地方,浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值。
此外,光栅文件格式的二进制性质使得难以(尽管不是不可能)基于数据库信息动态地创建图像,并且动画最多也仅限于“翻动书本”类型的动画,即快速连续地显示单独图像。
向量图形,通过指定为确定每个像素的值所需的指令而不是指定这些值本身,克服了这些困难中的一部分。
例如,向量图形不再为一个直径一英寸的圆提供像素值,而是告诉浏览器创建一个直径一英寸的圆,然后让浏览器(或插件)做其余事情。
这消除了光栅图形的许多限制;使用向量图形,浏览器只要知道它必须画一个圆。
如果图像需要以正常大小的三倍来显示,那么浏览器只要按正确的大小画圆而不必执行光栅图像通常的插入法。
类似地,浏览器接收的指令可以更容易地与外部信息源(如应用程序和数据库)绑定,要对图像制作动画,浏览器只要接收有关如何操纵属性(如半径或颜色)的指令即可。
Web上的向量图像
Web上的第一个向量图像可能是虚拟现实标记语言(VRML)图像。
VRML寻求将HTML的简易性带到图像创建中来,然而尽管有一些示例给人以深刻的印象,但它的本来目的是为了3D造型,而且它太过复杂以至于从未真正流行起来。
接着是MacromediaFlash的介入。
Flash电影是用Macromedia的Flash应用程序所创建,它允许创建相当复杂的动画,并且将动画与声音和交互性绑定在一起。
因为Flash文件主要包含有关如何创建图像的指令,所以它们比传统的Web电影小得多(例如QuickTime电影)—而且它们可以缩放。
但是,Flash文件仍然是二进制文件,这使得动态创建它们比较困难(尽管不是不可能)。
而且对从浏览器可以进行的脚本编制有所限制。
使用文本定义图像
可伸缩向量图形通过使用XML定义图像、动画和交互性解决了这些问题中的许多问题。
浏览器读取(或者更准确地说,浏览器的插件读取)这些基于文本的指令,然后执行这些指令。
例如,一个简单的SVG矩形图像可能看起来如下:
xmlversion="1.0"standalone="no"?
>
DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.0//EN"
"http:
//www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
//www.w3.org/2000/svg"> fill="red"stroke="blue"stroke-width="3"/> 这个文档指示浏览器创建一个矩形,并提供属性信息,如位置(x,y)、大小(height,width)、颜色(fill,stroke)和线宽(stroke-width)。 (全部文档在基本SVG文档中讨论。 ) 动画和交互性 因为这一结构,SVG非常适合于动画和交互性。 要更改图形元素的大小、位置或颜色,脚本只要调整相应的属性即可。 事实上,SVG有为事件处理而专门设计的属性(很象HTML),甚至还有特别适合于动画的元素。 例如,下面这一文档创建一个在8秒期间沿一条特定路线来回移动并无限重复的棍状图形: xmlversion="1.0"standalone="no"? > DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.0//EN" "http: //www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> //www.w3.org/2000/svg"> --Boxaroundtheimage--> fill="none"stroke="blue"stroke-width="2"/> --Visiblepath--> fill="none"stroke="red"stroke-width="2"/> --Groupofelementstoanimate--> --Stickfigurepieces--> --Animationcontrols--> dur="8s"repeatCount="indefinite" rotate="auto"/> 因为这完全基于指令,所以一个不是艺术家的人(象本教程的作者)即使不能创造真正的艺术,也可以创建基本的图形和动画。 动态创建图形 SVG基于文本的性质也允许轻松地“实时”创建图形,因为生成图形只不过是将正确的值输出到页面而已。 例如,正象Javaservlet、ASP页面或CGI脚本能从数据库输出数值一样,SVG可以输出图表或图。 下面将显示了一个既含有HTML表中的纯文本数据又含有SVG版本数据的HTML页面。 创建这个SVG的服务器端应用程序和创建HTML表的一样,而且使用相同数据(缩放1000倍以适应页面): xmlversion="1.0"standalone="no"? > DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.0//EN" "http: //www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> //www.w3.org/2000/svg"> --Boxaroundtheimage--> fill="none"stroke="blue"stroke-width="2"/> --Headers--> --Chartelements--> 这只是SVG能力的一个示例而已。 SVG使创建动态图像就象创建动态HTML一样简单。 另外,因为SVG基于XML,所以可以用可扩展样式表语言(XSL)变换轻松地创建它。 基本SVG文档 从本质上来说,SVG文档是XML文档。 这就是说SVG文档有某些基本属性: ∙所以的标记都有开始标记和结束标记,否则必须注明为空标记。 空标记用反斜杠结束,如 ∙标记必须正确嵌套。 如果一个标记在另一个标记中开始,那么它也必须在那个标记中结束。 例如, 是正确的,但 不正确。 ∙文档必须只有一个根。 正如一个元素包含了一个HTML页面的所有内容一样,一个元素也包含一个SVG文档的所有内容。 ∙文档应该以XML声明 xmlversion=”1.0”? >开始。 ∙文档应该包含一个DOCTYPE声明,该声明指向一个允许元素的列表。 SVG1.0文档的DOCTYPE声明是: xmlversion="1.0"? > DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.0//EN" "http: //www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> //www.w3.org/2000/svg"> --Itemscanbedefinedforlateruse--> 在HTML页面上包含SVG SVG文档本身就非常有用,但在目前(目前它仍处于开发阶段)将它们添加到Web页面会发挥它们最大的作用。 将它们添加到Web页面也使得在浏览器中显示它们变得更容易;根据用户系统的文件名关联的设置情况,有些浏览器会拒绝打开一个*.svg文件,但显示作为Web页面一部分的SVG图像将不会有问题。 将SVG图像添加到HTML页面很简单: 只要添加一个具有适当属性的元素即可: center">SVGDemonstration ApagemayhaveothercodebesidestheSVGimage. width="300"height="200"> Usingobjectsallowsthebrowsertodecidewhattodisplay. 请特别注意标记上的height和width属性。 如果没有指定它们,有些浏览器将不会正确显示图像。 此外,浏览器在执行某些计算(最特别的是用viewBox缩放)会考虑这些值,因此,如果没有正确地指定它们(如简单地用大的数值显示可能出现的任何东西),它们可能会干扰图像的正确显示。 第二节基本SVG形状 基本SVG形状 SVG定义了六种基本形状,这些基本形状和路径(在路径是什么? 中讨论)一道,可以组合起来形成任何可能的图像。 每个基本形状都带有指定其位置和大小的属性。 它们的颜色和轮廓分别由fill和stroke属性确定。 这些形状是: 圆(circle): 显示一个圆心在指定点、半径为指定长度的标准的圆。 椭圆(ellipse): 显示中心在指定点、长轴和短轴半径为指定长度的椭圆。 矩形(rect): 显示左上角在指定点并且高度和宽度为指定值的矩形(包括正方形)。 也可以通过指定边角圆的x和y半径画成圆角矩形。 线(line): 显示两个坐标之间的连线。 折线(polyline): 显示顶点在指定点的一组线。 多边形(polygon): 类似于polyline,但增加了从最末点到第一点的连线,从而创建了一个闭合形状。 下面的示例演示了这些形状: xmlversion="1.0"? > DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.0//EN" "http: //www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> //www.w3.org/2000/svg"> stroke-width="2"stroke="blue"/> 345,175321,175"/> fill="none"stroke="red"stroke-width="3"/> 添加文本 除了形状以外,SVG图像还可以包含文本。 SVG给予设计人员和开发人员对文本的大量控制,可以获得很好的图形效果而不必借助失去真实纹理信息的图像(.gif或.jpg)图像甚至Flash电影常常这么做)。 SVG的文本和字体能力在以添加文本开始的文本部分讨论,而现在重要的是要理解所有在传统HTML页面中通过级联样式表(CascadingStyleSheet)可以获得的效果,也都可以在SVG图像内的文本元素中得到。 例如: xmlversion="1.0"? > DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.0//EN" "http: //www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> //www.w3.org/2000/svg"> stroke="blue"stroke-width="3"/> font-family="MonotypeCorsiva" fill="yellow"stroke="red">ScalableVectorGraphics! 渲染顺序 当组合多种不同元素时,正象SVG图像一样,重要的是牢记各项在页面上的放置顺序,因为这关系到谁“在上面”出现。 在一个HTML页面上,使用z-index属性来控制这一分层效果,而对于SVG图像,则严格按顺序放置各项。 每个后继层放置在那些已放置层的上面。 如果指定一个元素没有填充色(使用fill=”none”"),那么在它下面的各项会显现出来,就象您在这里看到的: xmlversion="1.0"? > DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.0//EN" "http: //www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> //www.w3.org/2000/svg"> fill="none"stroke="black"/> fill="none"stroke="black"/> 100,10065,75" fill="none"stroke="purple"stroke-width="4"/> 225,100190,75" fill="none"stroke="purple"stroke-width="4"/> stroke="plum"stroke-width="2"
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 20 GIS原理与方法教程 Web 20 GIS原理与方法教程实验指导书二 Web GIS 原理 方法 教程 实验 指导书