svg+JS 实现的一个小GIS

最新推荐文章于 2024-07-25 22:12:25 发布

weixin_30764771

最新推荐文章于 2024-07-25 22:12:25 发布

阅读量217

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/XHuangX/archive/2013/05/05/3057820.html

本文介绍如何使用SVG和Raphael JavaScript库创建一个简单的地理信息系统（GIS），包括地图的导入、拖动、缩放及框选放大等功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想起来自己也是学习地理信息系统专业的学生,于是想着还是要做点和地理信息系统有关系的事情才对.

于是想用svg来实现一个小的地理信息系统.

想来应该是很酷的东西~

老师给我介绍了了一个叫做Raphael的开源库.利用这个可以做出很多svg的漂亮效果，并且添加事件也会很容易。（谢！）

Raphael的网址是：http://raphaeljs.com

大家可以看一下,上面有很多的例子.并且文档也很详细.

有一个中文的在线文档,地址是http://julying.com/lab/raphael-js/docs/

好了。下面来说如何实现：

首先.一个GIS系统,需要地理底图,这里因为找不到合适的矢量图,我从网上找了一个栅格图,然后用inkscape简单的矢量化了一下.将就用吧~

好了咱们给它命名为mapHB.svg。

然后我们要把这个图导入成为底图:

(ps:因为最近使用的是thinkphp的框架做东西，所以这里也是使用的thinkphp框架来做的~)

在php这边，我们要把svg的信息读出：

1 　　　　 $fileName="./Public/Svg/mapHB.svg";
2         $content=file_get_contents($fileName);
3         //读出svg文件内容4         //替换掉svg文本中的换行。避免SVGimport出错。
5          $content=preg_replace( "([\r\n])","", $content);
6          $this->assign("content",$content);

读出后assign在content上。然后在模板这边画上，首先，我们要引入一些库。

1 <script type="text/javascript" src="__PUBLIC__/Js/raphael.2.1.0.min.js"></script><!--Raphael-->
2 <script type="text/javascript" src="__PUBLIC__/Js/raphael-svg-import.js"></script><!--svg导入-->
3 
4 <script type="text/javascript" src="__PUBLIC__/Js/jquery.js"></script>
5 <script type="text/javascript" src="__PUBLIC__/Js/jquery.mousewheel.min.js"></script><!--这个是滚轮事件的jquery库-->

第一个是raphael的库，第二个是svg导入的库。最后一个是鼠标滚轮事件的库。

好，现在要导入svg图：

var box=document.getElementById('paper');
//这里是滚轮事件。这里paper是一个全局变量
//paper的_viewBox属性原本是没有的，但是在设置setViewBox后就有了。所以要先对paper使用setViewBox
//当然缩放过程必须按照比例来。
                $('#paper').mousewheel(function(event, delta, deltaX, deltaY) {
                    if(delta>0){
                        var sX=paper._viewBox[0];
                        var sY=paper._viewBox[1];
                        var sW=paper._viewBox[2];
                        var sH=paper._viewBox[3];
                        var bili=sH/sW;
                        var H=70*bili;
                        if(sW-70>0&&sH-H>0){
                            paper.setViewBox(sX+35,sY+H/2,sW-70,sH-H);
                        }
                    }else{
                        var sX=paper._viewBox[0];
                        var sY=paper._viewBox[1];
                        var sW=paper._viewBox[2];
                        var sH=paper._viewBox[3];
                        var bili=sH/sW;
                        var H=70*bili;
                        paper.setViewBox(sX-35,sY-H/2,sW+70,sH+H);
                    }            
                });      
//这里是设置画布的大小  需要调整一下。
                paper = Raphael("paper",box.clientWidth-20,window.innerHeight-45);
                
//这里就是导入svg图像。
                var newSet = paper.importSVG('{$content}');

导入成功后，我们要给地图做拖动事件，也就是gis里的漫游，基本思想是：因为在原有的导入的svg上拖动的话，由于填充问题，有的地方不能响应raphael的drag事件，所以我们可以新建一个极大的rect，来覆盖整个地图，以及周围区域。并用透明色填充。这样可以看见底图，并且可以响应拖动。

当然我们要做3个功能，漫游，拖框放大，滚轮缩放。区分这三个功能的方法，我是用的鼠标样式，首先点击功能按钮，改变鼠标样式，然后在和地图交互的过程中，判断鼠标的样式，就可以知道是什么功能。

改变样式的实现如下：

　　　　　　　　　$('#move').click(function(){
                document.getElementById('paper').style.cursor="move";
                }).mouseover(function(){
                    $('#move').animate({
                        width:30
                    });
                }).mouseout(function(){
                    $('#move').animate({
                        width:24
                    });
                });
                $('#zoomAll').click(function(){
                    paper.setViewBox(0,0,box.clientWidth,box.clientHeight,true);
                }).mouseover(function(){
                    $('#zoomAll').animate({
                        width:30
                    });
                }).mouseout(function(){
                    $('#zoomAll').animate({
                        width:24
                    });
                });
                $('#zoom').click(function(){
                    document.getElementById('paper').style.cursor="nw-resize";
                }).mouseover(function(){
                    $('#zoom').animate({
                        width:30
                    });
                }).mouseout(function(){
                    $('#zoom').animate({
                        width:24
                    });
                });

然后，我们就可以根据样式来做各种功能了。

我们先来看看drag事件的用法：

Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])

前3个函数是必须的，一个是在鼠标拖动过程中的事件，一个是开始拖动的事件，一个是结束拖动的事件。

onmove有5个参数(dx,dy,x,y,event)；

分别是x移动距离，y移动距离，鼠标位置x，y。

onstart有3个参数(x,y,event);

就是鼠标的x，y

onend只有一个(event)

首先是move（漫游）：

直接在onmove事件添加这个function就可以实现：

if(action=="move"){
   x0=paper._viewBox[0]-dx/30;
   y0=paper._viewBox[1]-dy/30;
   W=paper._viewBox[2];
   H=paper._viewBox[3];
   paper.setViewBox(x0,y0,W,H,true);
}

然后是拖框放大：

基本思想是，拖框，画出一个矩形，然后根据矩形的宽度来按照比例调整viewBox大小，这样就可以实现缩放。

首先开始拖动的时候，记录下来开始拖动的点。但是要把鼠标的clientx，y转换成画布的位置坐标：

　　　　　　　　　　　　　　if(action=="nw-resize"){
                        //获取画布上的坐标
                        var box=document.getElementById('paper');
                        
                        var scrollX;
                        var scrollY;
                        if(window.scrollX||window.scrollY){
                            scrollX=window.scrollX;
                            scrollY=window.scrollY;
                        }else{
                            scrollX=document.documentElement.scrollLeft;
                            scrollY=document.documentElement.scrollTop;
                        }
                        var bx=$('#paper').offset().left-scrollX;
                        var by=$('#paper').offset().top-scrollY;
                        //var bx=0;
                        //var by=0;
                        var zoombiliW=originalScaleW/paper._viewBox[2];
                        var zoombiliH=originalScaleH/paper._viewBox[3].toFixed(0);
                        var mx=((event.clientX-bx)/zoombiliW+paper._viewBox[0]);
                        var my=((event.clientY-by)/zoombiliH+paper._viewBox[1]);
                        DstartX=mx;
                        DstartY=my;
                    　　}

然后在onmove中就要画rect了：

　　　　　　　　　　　 if(action=="nw-resize"){
                        var zoombiliW=originalScaleW/paper._viewBox[2];
                        var zoombiliH=originalScaleH/paper._viewBox[3].toFixed(0);
　　　　　　　　　　　　　　//存在area的话先remove，这样才能有拖框的效果
                        if(area){
                            area.remove();
                            area=paper.rect(DstartX,DstartY,dx/zoombiliW,dy/zoombiliH);
                        }
                        else{
                            area=paper.rect(DstartX,DstartY,dx/zoombiliW,dy/zoombiliH);
                        }
                        
                    }

最后在onend里，就要根据rect来放大了：

　　　　　　　　　　　　if(action=="nw-resize"){
                        
                        var x=area.attrs.x;
                        var y=area.attrs.y;
                        var width=area.attrs.width;
                        var sW=paper._viewBox[2];
                        var sH=paper._viewBox[3];
                        var bili=sH/sW;
                        var height=width*bili;
                        paper.setViewBox(x,y,width,height);
　　　　　　　　　　　　　　//最后还是把框remove掉咯。
                        area.remove();
                        
                    }