用SVG技术实现基于Web的GIS
http://www.daima.com.cn/Info/85/Info30448/
引言
SVG(Scalable Vector Graphics)是一种基于XML 的用来描述二维矢量图形和矢量/点阵混合图形的置标语言,是一种全新的矢量图形规范。 SVG规范定义了SVG的特征、语法和显示效果,包括模块化的XML命名空间(namespace)和SVG文档对象模型(DOM)。 SVG的绘图可以通过动态和交互式方式进行,在实际操作中,则是以嵌入方式或脚本方式来实现的。SVG不仅提供超链接功能,还定义了丰富的事件。由于SVG支持脚本语言(script),可以通过Script编程,访问SVG DOM的元素和属性,即可响应特定的事件,从而提高了SVG的动态和交互性能。 SVG实现了图形、图象和文字的有机统一。 SVG除了支持HTML中常用的标记,如文本、图象、链接、交互性、CSS的使用、脚本(Script)外,还提供了大量针对图形、图象、动画的特定标记。这就为实现GIS提供了可能。
作者根据实际工作需要,在Web浏览器中采用SVG及相关技术实现了Web的GIS管理系统(以下简称WebGIS),取得了很好的效果。此系统包括服务端及客户端的设计,服务器端出要处理数据的存储及数据的动态装载,客户端主要完成SVG数据的显示及交互。本文主要对基于SVG的WebGIS的客户端实现的一些基本知识及实现技术作一个简单介绍。
基础知识
SVG浏览插件
要实现SVG图形的显示,必须要在客户端安装SVG浏览器,Adobe开发的SVG Viewer功能强大,显示效果好,是网络上使用最多的,其最新的版本是3.0。可以到Adobe的网站(http://www.adobe.com/svg/viewer/install/main.html)上去下载,为了保证中文能正确显示,请下载简体中文版本。下载后安装程序,第一次使用时回弹出用户许可信息,点击"接受"即可。
在网页中嵌入SVG
将实现基于浏览器的GIS系统,需要将SVG图形对象嵌入到网页中,使用如下HTML代码来实现:
<embed width="640" height="560" type="image/svg-xml" id="svgmapctrl"
pluginspage="http://www.adobe.com/svg/viewer/install/" src="default.svg" ></embed>
其中embed标签指定为一个嵌入的对象,width,height分别指定该对象的宽度、高度,type指定类型为image/svg-xml ,src指定为svg数据文件的URL地址,指定这样的标签并在浏览器中打开,浏览器便回调用SVG Viewer在指定区域进行显示。此处,src指定的是一个svg文件,在GIS系统中,要求根据不同的请求获取不同的数据,则可以将其改为动态的url,如服务端的Java Servlet,由服务端动态生成。需要注意的是,SVG目前不支持GB编码,在使用中文字符时,请使用UTF-8编码。
SVG图形对象简介
SVG提供了丰富的图形对象,包括直线(line)、路径(path)、圆(circle)、图标(symbol)文字(text)、图像(image)等,满足了GIS系统的需要。这些图形对象可以通过设置不同的属性、显示样式来达到不同的显示效果。对象在SVG文件中以XML标签的形式存在,而对象属性以标签的属性来存取,可以通过访问SVG的DOM对象的方法来方便的存取这些对象及属性。同时SVG中还提供了组的管理(<g>标签),定义(defs)及引用等功能。这些特征在GIS中得到了广泛的应用。
SVG的事件简介
SVG提供了丰富的消息触发及事件响应函数,获取用户消息。如在地图上移动、点击鼠标等。事件的相应可以定义到整个文档对象中,也可以定义在单个图形对象上。如要给某个路径(path)定义鼠标一定事件,可以这样<path onmousemove="mouseMoved(evt)" …../>, onmousemove指定事件触发的条件(即鼠标在path上移动时),mouseMoved为要触发的响应函数,evt表示事件本身,可以通过evt获取与当前事件相关的信息,用户可以在script中定义响应函数,进行相应的处理。同样,SVG也提供丰富的状态事件,如数据装载完毕,就可以触发onload事件,作一些初始化的处理。
功能实现
地图的交互及控制
在浏览器中打开SVG文件时,SVG图形作为浏览器的一个嵌入对象出现,可以很方便的通过script函数来获取SVG图形对象及其内部的图形属性。通过获取这些对象和属性,就可以很方便地实现交互功能。
GIS系统最基本的功能是地图控制,SVG Viewer本身提供图形的缩放功能,但要通过操作鼠标时按指定的功能键才能实现,不适合GIS功能的需要,在WebGIS系统中将其屏蔽。但由于SVG提供了丰富的消息触发及事件响应函数,通过捕捉这些消息,来实现自定义的地图控制功能。一个放大地图的实现流程是:用户点击地图,触发onmousedown事件,调用消息响应函数,在消息响应函数中将地图的变换矩阵以当前点击的点为中心放大1.1倍,更新显示图形。消息响应的函数如下:
Function zoom(evt, scale)
{ // scale = 1.1;表示放大1.1倍
point = new GDPoint();
point.x = evt.clientX;
point.y = evt.clientY; //point为当前点击的坐标点 为屏幕坐标
absPoint = pointInvert(point);//转换为绝对最表
scale = curTransform.scale*scale; //设置当前的缩放系数
curTransform.scale = scale;
point1 = pointApply(absPoint);//绝对坐标应用当前的变换系数
curTransform.x += point.x-point1.x;
curTransform.y += point.y-point1.y;//缩放中心平移到当前点击的位置
matrix= trans2String(curTransform);//生成新的变换矩阵
maproot.setAttribute("transform",matrix);//应用新的变换矩阵
}
其他的如地图缩小、全图显示、区域放大、局部定位等功能与之类似,这里就不一一作介绍。
图层管理
SVG采用基于XML的DOM文档管理结构,很方便实现层次管理,其组<g>对象就可以将其下面的所有图形管理起来。节点中的childNodes属性可以获取所有的子节点的集合,getElementsByTagName()方法可以获取某种类型对象的列表,如要获取某组(g)下的所有路径(path)对象的集合,就可以调用getElementsByTagName("path")。 作者通过采用组对象来实现图层管理功能,不同图层的对象包含在不同的组中。通过设置组的属性,就可以实现如可见性、颜色、透明度等设置以及选中、删除所有对象等操作。SVG中的对象的样式属性具有继承性,如果下一级没有某样式属性,则直接使用其上一级的属性,以此类推,直到顶级为止。如:对某层设置某个显示透明度,则其下级元素显示时,均采用该透明度,除非其下级元素指定了透明度属性。
下面的图显示GIS系统中的图层控制界面。
图标管理
图标表示的是信息点的信息,在GIS系统中广泛使用图标来标志信息点,其特点是图标引用相同的预定义的图形组。增加新的图标只是在不同的位置增加一个引用而已。在不增加实际的绘图数据。减少了数据量;同时,如果要修改某类信息的显示图标,只要修改预定义的图标即可,方便了管理。在WebGIS系统中定义了很多类型的图标。下图表示用一个圆和一个路径对象定义的图标,其名称为symbol_1,并定义在defs标签内,供图标对象引用:
<defs>
<g id="symbol_1" type="default" style="&_symbol;">
<circle cx="0" cy="0" r="10" />
<path d="M-7.1 7.1,-10 0,-7.1 -7.1,0 -10,7.1 -7.1z" style="fill:#0000ff;fill-opacity:0.6" />
</g>
…
</defs>
下图为图标的实例,这两个图标引用上面定义的symbo_1的图标:图标在地图上的实际位置为transform指定的位置分别是(200,100),(200,200)。
<use id="icon:1" type="A" transform="translate(200,100)" xlink:href="#symbol_1" />
<use id="icon:2" type="B" transform="translate(200,200)" xlink:href="#symbol_1" />
如果要增加图标,只要添加新的引用(use)对象即可。这些对象可以有自己的属性,表示不同的信息点,但其显示的形状是预定义的,如果修改了预定义的形状,这些图标的显示结果同样改变。下图为在WebGIS中定义的几种图标及显示效果(蓝色的为图标)。
地图属性的定义
SVG图形数据本身只包含用来实现矢量图形显示的信息,如坐标点、变换矩阵、显示样式等信息,不能满足GIS系统的需要。但由于SVG是基于XML格式的,除了使用其内置的属性外,可以对其属性进行任意扩充,以实现自定义的功能。在SVG图形中,对象的属性id是用来标志唯一对象的编号,可以通过SVG文档对象的getElementById()函数来获取指定的对象。WebGIS采用id好作为图形内在的标示,而自定义其他的属性如名称(name),提示信息(tip)等来存储其GIS属性。获取或赋值这些属性的方法是调用getAttribute及setAttribute函数。如在WebGIS中一个路径是这么定义的。
<path id="ROAD:101" Name="解放大道" Tip=" 解放大道(东)" d="<M……"/>
那么通过ID "ROAD:101" 获取路径对象后,就可以获取其属性Name及Tip的信息,执行显示提示信息等功能。
总结
本文对用SVG技术实现基于Web的GIS的关键技术做了简单的介绍,通过对SVG技术的把握和应用,作者成功地开发了WebGIS系统,说明SVG技术完全能胜任某些行业GIS应用的需要,从长远来看,SVG技术代表网络矢量化图形的发展方向,必将在包括 GIS在内的各个方面得到广泛应用。
分享到:
相关推荐
Using Scalable Vector Graphics (SVG) for illustrations only scratches the surface of this format’s potential on the web. With this practical guide, you’ll learn how to use SVG not only for ...
Beginning SVG: A Practical Introduction to SVG using Real-World Examples By 作者: Alex Libby ISBN-10 书号: 1484237595 ISBN-13 书号: 9781484237595 Edition 版本: 1st ed. 出版日期: 2018-09-07 pages 页数:...
Using SVG with CSS3 and HTML5 Vector Graphics for Web Design 英文azw3 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
svg与javascript交互简单的文字路径特效
svg与js交互,主要讲解svg与js的交互,svg与js交互,主要讲解svg与js的交互
vue结合D3.js做的动态的可交互的SVG图形组件。 下面是其中的几行代码: data: { svg: undefined, point1Instance: undefined, // 两个主要端点之一 point2Instance: undefined, // 两个主要端点之一 ...
SVG与html的交互(svg的js与html的js互调用).pdf
Android中使用SVG实现炫酷动画效果Android中使用SVG实现炫酷动画效果
SVG与html的交互(svg的js与html的js互调用)
svg与javascript的交互实例教程
SVG地图与SQL Server数据库交互实现及其应用.pdf
使用js+canvas绘图,结合svg图形,实现标尺栏和网格效果。
android与js交互调用svg标签的代码实例。代码通俗易懂,方便初学者学习。
javascript实现svg导出图片
使用JavaScript实现基于SVG的WEBGIS动态交互.pdf
全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...
如题 svg to pdf svg2pdf
使用场景:很多时候下载的图片都是SVG矢量文件,不适用于需要 ico图片 的场景。 举例说明:比如,iconfont网站上下载的图标资源。 功能描述:此程序使用Python编写 1. 可以将 单个SVG图片文件 转换为 【128/64/48/32...