基于SVG技术进行WebGIS开发浅析
viewBox=SVGRoot.getAttribute(′viewBox′);
var viewVals=viewBox.split(′ ′);
currentPosition=parseFloat(viewVals[0]);
if (goLeft==true){//地图向左移动
if (currentPosition＜0．1){
currentPosition=currentPosition+0.1;
}
goLeft=false;
}
viewVals[1]=currentPosition;
SVGRoot.setAttribute(′viewBox′,viewVals.join(′ ′));
}
2 地图的缩放
地图放大/缩小的实现代码，主要利用currentScale变量进行图形的扩大和缩小变化。
function zoomIn(){
if (SVGRoot.currentScale＜5){ //地图放大
SVGRoot.currentScale=SVGRoot.currentScale*1.5;
}
}
function zoomOut(){
if (SVGRoot.currentScale>0.3){ //地图缩小
SVGRoot.currentScale=SVGRoot.currentScale*0.5;
}
}
3 图层的人机交互
SVG采用基于XML的DOM文档管理结构可以很方便地实现层次管理。〈g〉〈/g〉代表一个组， GIS中的一个专题图层存储在一个组中，每个组都有一个唯一标志ID属性。根据这个ID属性就可以通过JavaScript控制不同图层的显示和隐藏，并且SVG图形支持事件编程，可以很容易地实现对onclick()或onmouseover()等事件的编程。
图层的隐藏和显示功能主要是利用setAttribute函数对visibility参数赋予hidden属性或visible属性。部分实现代码如下：
function vis_hid(id){ //显示或隐藏图层获得所选图层对象
var SVGstyle=SVGDoc.getElementById(id);
if(SVGstyle.getAttribute("visibility")=="visible")
{
//隐藏该图层
SVGstyle.setAttribute("visibility"，"hidden");
} else {
//显示该图层
SVGstyle.setAttribute("visibility"，"visible");
}
}
4 查询功能的实现
这里假设对测线编号进行查询，查询测线的属性字段主要根据测线的ID号，利用getElementById()函数进行查询；利用getAttribute ()函数得到测线的属性字段内容。结果如图3和4所示，分别为查询测线的反演图和测线的数据说明。
//从表单中获得要查询的ID号
function showattrib(value){
//获得符合ID号内容的对象
var SVGid=SVGDoc.getElementById(value)
var new_window=window.open("","query" ,"height=133,
width=450");
//显示该对象的describe字段内容
new_window.document.writeln(SVGid.getAttribute("describe"));
new_window.focus();
}
SVG技术不仅用于地图的展示，任何矢量图形都可以使用该技术。基于该技术的图像具有图形美观、文件标准统一、可读性强、灵活易用等特点。个人觉得SVG技术在WebGIS及互联网上的矢量图形发布中将具有广阔的应用前景。
