script.js

svg 桌面地图 功能齐全 缩放 拖到 显示等功能都有

// JScript source code
 
  var SVGDoc;
  var mousehavedown=false;
  var currentMode=0;
  var mousedown_x;
  var mousedown_y;  
  
  function changeVisible(evt,tagname)
  {
   SVGDoc=evt.getTarget().getOwnerDocument();
  var xiaogou=SVGDoc.getElementById(tagname+"xiaogou");
  var tag=SVGDoc.getElementById(tagname);
  if(!tag)
        return;
  var visible=tag.getAttribute("visibility");
  if(visible=="hidden")
     {
          xiaogou.setAttribute("visibility","visible");
          tag.setAttribute("visibility","visible");
     }
   else
     {
          xiaogou.setAttribute("visibility","hidden");
          tag.setAttribute("visibility","hidden");  
     }
  }
  function ZoomIn(evt)
  {
  currentMode=1;
   if(!SVGDoc)
     SVGDoc=evt.getTarget().getOwnerDocument();  
    var  beijing=SVGDoc.getElementById("zoomInBack");
         beijing.setAttribute("visibility","visible")
         beijing=SVGDoc.getElementById("zoomOutBack");
         beijing.setAttribute("visibility","hidden")
         beijing=SVGDoc.getElementById("NavBack");
         beijing.setAttribute("visibility","hidden")   
  
  }
  function ZoomOut(evt)
  {
  currentMode=2;
   if(!SVGDoc)
     SVGDoc=evt.getTarget().getOwnerDocument();  
  var beijing=SVGDoc.getElementById("zoomInBack");
     beijing.setAttribute("visibility","hidden")
     beijing=SVGDoc.getElementById("zoomOutBack");
     beijing.setAttribute("visibility","visible")
     beijing=SVGDoc.getElementById("NavBack");
     beijing.setAttribute("visibility","hidden")
  
  }
  function Nav(evt)
  {
  currentMode=0;
   if(!SVGDoc)
     SVGDoc=evt.getTarget().getOwnerDocument();  
  var beijing=SVGDoc.getElementById("zoomInBack");
     beijing.setAttribute("visibility","hidden")
     beijing=SVGDoc.getElementById("zoomOutBack");
     beijing.setAttribute("visibility","hidden")
     beijing=SVGDoc.getElementById("NavBack");
     beijing.setAttribute("visibility","visible")  
  }
  function scaleTheMap(tagscale)
  {
  var scaleControl=SVGDoc.getElementById("mapscaleControl");
  var matrix=scaleControl.getCTM ( );
  matrix=matrix.scale(tagscale);
  resetTransform(matrix);
  }
  function mousedown()
  {
     showMouseLocation(evt);
         mousehavedown=true;
     if(!SVGDoc)
     SVGDoc=evt.getTarget().getOwnerDocument(); 
     switch(currentMode)
     {
       
     case 0:
        var mainBox=SVGDoc.getElementById("mainBox");
         var base_x=mainBox.getAttribute("x");
         var base_y=mainBox.getAttribute("y");
         mousedown_x=evt.screenX-base_x;
         mousedown_y=evt.screenY-base_y;  
            
     break;
     case 1:
         var mainBox=SVGDoc.getElementById("mainBox");
         var base_x=mainBox.getAttribute("x");
         var base_y=mainBox.getAttribute("y");
         mousedown_x=evt.screenX-base_x;
         mousedown_y=evt.screenY-base_y;
         var temprect=SVGDoc.getElementById("temprect");
         temprect.setAttribute("x",mousedown_x);
         temprect.setAttribute("y",mousedown_y);
     break;
     case 2:
         zoomOut_2x(evt)      
     break;
     }
     
  }
  function mousemove()
  {
     showMouseLocation(evt);
     switch(currentMode)
     {
     case 0:
      if(!mousehavedown)
         break;
         var mainBox=SVGDoc.getElementById("mainBox");
         var base_x=mainBox.getAttribute("x");
         var base_y=mainBox.getAttribute("y");
         var now_x=evt.screenX-base_x;
         var now_y=evt.screenY-base_y;
         if(Math.abs(now_x-mousedown_x)>5||Math.abs(now_y-mousedown_y)>5)
         {
         var scaleControl=SVGDoc.getElementById("mapscaleControl");
         var matrix=scaleControl.getCTM ( );
         matrix= matrix.translate((now_x-mousedown_x)/matrix.a,(now_y-mousedown_y)/matrix.d)
         resetTransform(matrix);         
         mousedown_x=now_x;
         mousedown_y=now_y;
         }
         
    
     break;
     case 1:
         if(!mousehavedown)
         break;
         var mainBox=SVGDoc.getElementById("mainBox");
         var base_x=mainBox.getAttribute("x");
         var base_y=mainBox.getAttribute("y");
         var now_x=evt.screenX-base_x;
         var now_y=evt.screenY-base_y;
         if(Math.abs(now_x-mousedown_x)>=5||Math.abs(now_y-mousedown_y)>5)
         {
              var temprect=SVGDoc.getElementById("temprect");
             temprect.setAttribute("x",Math.min(mousedown_x,now_x));
             temprect.setAttribute("y",Math.min(mousedown_y,now_y));
             temprect.setAttribute("width",Math.abs(mousedown_x-now_x));
             temprect.setAttribute("height",Math.abs(mousedown_y-now_y));
         }
     break;
     case 2:
     break;
     }
  
  }
  function mouseup()
  {
   switch(currentMode)
     {
     case 0:
    
     break;
     case 1:
         var mainBox=SVGDoc.getElementById("mainBox");
         var base_x=mainBox.getAttribute("x");
         var base_y=mainBox.getAttribute("y");
         var up_x=evt.screenX-base_x;
         var up_y=evt.screenY-base_y;
         if(Math.abs(up_x-mousedown_x)<5&&Math.abs(up_y-mousedown_y)<5)
             zoomIn_2x(evt)
         else
         {
         var scaleControl=SVGDoc.getElementById("mapscaleControl");
         var matrix=scaleControl.getCTM ( );
         var temprect=SVGDoc.getElementById("temprect");
		 var theWidth=temprect.getAttribute("width");
		 var theHeight=temprect.getAttribute("height");
		 var Zoom=Math.min(mainBox.getAttribute("width")/theWidth,mainBox.getAttribute("height")/theHeight);
		 var downx=temprect.getAttribute("x")
		 var downy=temprect.getAttribute("y")
		 matrix=matrix.translate((-downx +matrix.e)/matrix.a*(Zoom-1),(-downy +matrix.f)/matrix.d*(Zoom-1));
		  matrix=matrix.translate(-downx /matrix.a,-downy/matrix.d);
		 matrix=matrix.scale(Zoom);         
         resetTransform(matrix);
         
         }
         var temprect=SVGDoc.getElementById("temprect");    
         temprect.setAttribute("width",'0');
         temprect.setAttribute("height",'0');
     break;
     case 2:
     break;
     }
  
         mousehavedown=false
  }
  
  function showMouseLocation(evt)
  {
   var string="X:"+evt.screenX+ " Y:"+evt.screenY;
   window.status=string;
  }
  
  function nav_up()
  {
  if(!SVGDoc)
   SVGDoc=evt.getTarget().getOwnerDocument();
  
  var scaleControl=SVGDoc.getElementById("mapscaleControl");
  var matrix=scaleControl.getCTM ( );
  var bi=matrix.a;
  matrix=matrix.translate(0,50/bi);
  resetTransform(matrix);
  
  }
   function nav_down()
  {
   if(!SVGDoc)
      SVGDoc=evt.getTarget().getOwnerDocument();
   var scaleControl=SVGDoc.getElementById("mapscaleControl");
   var matrix=scaleControl.getCTM ( );
   var bi=matrix.a;
   matrix=matrix.translate(0,-50/bi);
   resetTransform(matrix);
  }
   function nav_right()
  {
  if(!SVGDoc)
    SVGDoc=evt.getTarget().getOwnerDocument();
  var scaleControl=SVGDoc.getElementById("mapscaleControl");
  var matrix=scaleControl.getCTM ( );
  var bi=matrix.a;
  matrix=matrix.translate(-100/bi,0);
  resetTransform(matrix);
  
  }
   function nav_left()
  {
 if(!SVGDoc)
   SVGDoc=evt.getTarget().getOwnerDocument();
  var scaleControl=SVGDoc.getElementById("mapscaleControl");
  var matrix=scaleControl.getCTM ( );
  var bi=matrix.a;
  matrix=matrix.translate(100/bi,0);
  resetTransform(matrix);
  }
  function resetTransform(Matrix)
  {
  var control=SVGDoc.getElementById("mapscaleControl")
  control.setAttribute("transform","matrix("+Matrix.a+","+Matrix.b+","+Matrix.c+","+Matrix.d+","+Matrix.e+","+Matrix.f+")");
  }
  
  function clearTransform(evt)
  {
  if(!SVGDoc)
     SVGDoc=evt.getTarget().getOwnerDocument();
  var  control=SVGDoc.getElementById("resetBack");
   control.setAttribute("visibility","visible"); 
   control=SVGDoc.getElementById("mapscaleControl");
  control.setAttribute("transform","matrix(1,0,0,1,0,0)");
  }
  
   function outResetRegion(evt)
  {
   if(!SVGDoc)
     SVGDoc=evt.getTarget().getOwnerDocument();
   var control=SVGDoc.getElementById("resetBack");
   control.setAttribute("visibility","hidden");
  }
 
  function zoomIn_2x(evt)
  {
        if(!SVGDoc)
     SVGDoc=evt.getTarget().getOwnerDocument();  
     var scaleControl=SVGDoc.getElementById("mapscaleControl");
     var matrix=scaleControl.getCTM ( );
     var scale=matrix.a;
     var base_x=evt.getTarget().getAttribute("x");
     var base_y=evt.getTarget().getAttribute("y");
     var down_x=evt.screenX-base_x;
     var down_y=evt.screenY-base_y;
     var now_x=matrix.e;
     var now_y=matrix.f;
     matrix=matrix.translate((-down_x +now_x)/scale,(-down_y +now_y)/scale);
     matrix=matrix.scale(2);
     resetTransform(matrix);
     
  
  }
  function zoomOut_2x(evt)
  {
        if(!SVGDoc)
     SVGDoc=evt.getTarget().getOwnerDocument();  
     var scaleControl=SVGDoc.getElementById("mapscaleControl");
     var matrix=scaleControl.getCTM ( );
     var scale=matrix.a;
     var base_x=evt.getTarget().getAttribute("x");
     var base_y=evt.getTarget().getAttribute("y");
     var down_x=evt.screenX-base_x;
     var down_y=evt.screenY-base_y;
     var now_x=matrix.e;
     var now_y=matrix.f;
     matrix=matrix.translate((down_x -now_x)/scale/2,(down_y -now_y)/scale/2);
     matrix=matrix.scale(0.5);
     resetTransform(matrix);
     
  
  }