copy of mapcontrol.js

《SVG开发实践》源代码

var SVGDoc,Map,SVGMain;
var SVGW,SVGH,vbMaxW,vbMaxH;
var vbCX,vbCY,vbCW,vbCH,WAmp,HAmp,CurrentAmp;
var MinAmp,MaxAmp=2;
var CMD=null;
var isBusy=false;
var panX,panY;
var ZoomRect,rulerbck,rulerline;
var IsMessuring=false;
var lonMin,latMin,lonMax,latMax,xTimes,yTimes,Scaler;
var svgns = 'http://www.w3.org/2000/svg';
//----Public-----------------------------------------------------------------
function Init(evt,lon1,lat1,lon2,lat2,zoom,layers)
{
	//Get document
	SVGDoc = evt.target.ownerDocument;
	SVGMain = SVGDoc.getDocumentElement();
	//Get map
	Map = SVGDoc.getElementById("map");

	initBasicParam();
	initGrid(lon1,lat1,lon2,lat2,zoom);
	addEventHanle();
	addGraphicUnit();	
}

function MapMouseDown(evt)
{
    if(evt.target.tagName!="rect") return;
	switch(CMD)
	{
		case null:
			break;
		case "PAN":
		    if(MinAmp==CurrentAmp) {alert("请先放大地图...");break;}
		    panX=evt.clientX;
	            panY=evt.clientY;
	            isBusy=true;
		    break;
		case"RECTZOOM":
    		    	if(!checkAmp()) return;
		   	getCurrentVB();
			var x=evt.clientX*WAmp+vbCX;
			var y=evt.clientY*HAmp+vbCY;
			ZoomRect.setAttributeNS(null,"x",x);
			ZoomRect.setAttributeNS(null,"y",y);
			ZoomRect.setAttributeNS(null,"width",0);
			ZoomRect.setAttributeNS(null,"height",0);
			isBusy=true;
			ZoomRect.setAttributeNS(null,"visibility","visible");
			break;
	}
}
function MapMouseMove(evt)
{
    if(!isBusy) return;
	switch(CMD)
	{
		case null:
			break;
		case "PAN":
		    getCurrentVB();
			var x=-(evt.clientX-panX)*WAmp+vbCX;
			var y=-(evt.clientY-panY)*HAmp+vbCY;
			x=Math.min(Math.max(x,0),vbMaxW-vbCW);
			y=Math.min(Math.max(y,0),vbMaxH-vbCH);
			panX=evt.clientX; panY=evt.clientY;
			Map.setAttributeNS(null,"viewBox",x+" "+y+" "+vbCW+" "+vbCH);
			break;
		case"RECTZOOM":
			var x=parseFloat(ZoomRect.getAttributeNS(null,"x"));
			var y=parseFloat(ZoomRect.getAttributeNS(null,"y"));
			var w=evt.clientX*WAmp+vbCX-x;
			var h=evt.clientY*HAmp+vbCY-y;
			if(w<0)	w=0;
			if(h<0)	h=0;
			ZoomRect.setAttributeNS(null,"width",w);
			ZoomRect.setAttributeNS(null,"height",h);
			break;
	}
}
function MapMouseUp(evt)
{
    if(!isBusy) return;
	switch(CMD)
	{
		case null:
			break;
		case "PAN":
			isBusy=false;
			getCurrentVB();
		    break;
		case"RECTZOOM":
		    	isBusy=false;
			var x=parseFloat(ZoomRect.getAttributeNS(null,"x"));
			var y=parseFloat(ZoomRect.getAttributeNS(null,"y"));
			var w=evt.clientX*WAmp+vbCX-x;
			var h=evt.clientY*HAmp+vbCY-y;
			var cx=x+w/2;
			var cy=y+h/2;
			if(w > 0 && h > 0)
			{
				CurrentAmp=Math.min(SVGW/w,SVGH/h,MaxAmp);
			
				w=SVGW/CurrentAmp; h=SVGH/CurrentAmp; x=cx-w/2; y=cy-h/2;
				x=Math.min(Math.max(x,0),vbMaxW-w);
		    		y=Math.min(Math.max(y,0),vbMaxH-h);
				Map.setAttributeNS(null,"viewBox",x+" "+y+" "+w+" "+h);
				ZoomRect.setAttributeNS(null,"visibility","hidden");
				endZoom();
				break;
			}
	}
}
function rulerStart(evt)
{
	switch(evt.detail)
	{
		case 1:  //单击
			getCurrentVB();
			var xx=vbCX+evt.clientX*WAmp;
			var yy=vbCY+evt.clientY*HAmp;
			if(!IsMessuring)
			{
				IsMessuring=true;
				linepts="M"+xx+" "+yy;
			}
			else
			{
				linepts+=" L"+xx+" "+yy;
			}
			break;
		default://双击
			IsMessuring=false;
			rulerbck.setAttributeNS(null,"pointer-events","none");
			rulerline.setAttributeNS(null,'d','');
			hideinfotip(evt);
			break;
	}
}
function rulerMessuring(evt)
{
	if(IsMessuring)
	{
		getCurrentVB();
		var xx=vbCX+evt.clientX*WAmp;
		var yy=vbCY+evt.clientY*HAmp;
		rulerline.setAttributeNS(null,'d',linepts+" L"+xx+" "+yy);
		showinfotip(evt,parseFloat(parseInt(rulerline.getTotalLength()*Scaler)/1000)+" kM");
	}
}


function mapPan()
{
    setCMD("PAN");
}
parent.mapPan = mapPan;

function mapRectZoom()
{
    setCMD("RECTZOOM");
}
parent.mapRectZoom = mapRectZoom;

function mapRuler()
{
    setCMD(null);
    rulerbck.setAttributeNS(null,"pointer-events","visiblePainted");
}
parent.mapRuler = mapRuler;

function mapLayerMgt(layername)
{
    var cmdstr= Map.getElementById(layername).getStyle().getPropertyValue("visibility");
    cmdstr=(cmdstr=="visible")?"hidden":"visible";
    Map.getElementById(layername).getStyle().setProperty ('visibility', cmdstr);
}
parent.mapLayerMgt = mapLayerMgt;

function zoomTo(value)
{
	    getCurrentVB();
	    var cx=vbCX+vbCW/2;
	    var cy=vbCY+vbCH/2;
	    CurrentAmp=value*(MaxAmp-MinAmp)/100 + MinAmp;
	    w=SVGW/CurrentAmp; h=SVGH/CurrentAmp; x=cx-w/2; y=cy-h/2;
	    x=Math.min(Math.max(x,0),vbMaxW-w);
	    y=Math.min(Math.max(y,0),vbMaxH-h);
	    Map.setAttributeNS(null,"viewBox",x+" "+y+" "+w+" "+h);
	    endZoom();
}
parent.zoomTo = zoomTo;

//------Private--------------------------------------------------------------------------------------------------------
function checkAmp()
{
	if(CurrentAmp>=MaxAmp)
        {
	    alert("已经放大到最大！");
	    return false;
        }
	return true;
}

function addEventHanle()
{
	Map.addEventListener("mousedown",MapMouseDown,false);
	Map.addEventListener("mousemove",MapMouseMove,false);
	Map.addEventListener("mouseup",MapMouseUp,false);
}
function addGraphicUnit()
{
    	//add a background rect for receiving mouse event
	var node="<rect width='"+vbMaxW+"' height='"+vbMaxH+"' fill-opacity='0'/>";
	parseSVG(Map,node,null);
	
	node="<rect id='zoomrect' visibility='hidden' pointer-events='none' width='0' height='0' fill='lightgray' fill-opacity='0.7' stroke='none'/>";
	ZoomRect=parseSVG(Map,node,null);
	
	node="<rect id='rulerbck' width='"+vbMaxW+"' height='"+vbMaxH+"' fill-opacity='0' pointer-events='none' onclick='rulerStart(evt)' 		onmousemove='rulerMessuring(evt)'/>";
	rulerbck=parseSVG(Map,node,null);
	node="<path id='rulerline' fill='none' stroke='#A52A2A' pointer-events='none' stroke-width='3pt'/>";
	rulerline=parseSVG(Map,node,null);

	node="<rect x='100' y='100' width='100' height='100' fill='red'/>"
	//parseSVG(Map.parentNode,node,null);
	
	//------------------添加信息提示框图形定义--------------------------
	node="<g id='infotips'><rect id='infotipRect' x='20' y='0' width='100' height='14' rx='5' 			ry='5'style='visibility:hidden;fill:rgb(165,206,239);stroke-width:1; stroke:rgb(0,0,0);opacity:0.8;pointer-events:none'/><text id='infotip' 			style='fill:rgb(0,0,0);visibility:hidden;font-weight:normal; font-size:12;text-anchor:left;pointer-events:none'>!</text><animate id='fade' 			        attributeName='opacity' begin='' dur='0.6s' from='0' to='1' fill='freeze'/></g>";
        parseSVG(Map.parentNode,node,null);
}
function initGrid(lon1,lat1,lon2,lat2,zoom)
{
	lonMin=lon1; latMin=lat1; lonMax=lon2; latMax=lat2;
	xTimes=vbMaxW/(lonMax-lonMin); yTimes=vbMaxH/(latMax-latMin);
	Scaler=1000.0/zoom;
}
function initBasicParam()
{
	SVGW   = parseInt(Map.getAttributeNS(null,"width"));
	SVGH   = parseInt(Map.getAttributeNS(null,"height"));
	getCurrentVB();
	vbMaxW = vbCW; 
	vbMaxH = vbCH;  
	MinAmp = CurrentAmp;
}


function getCurrentVB()
{
	var vb = Map.getAttributeNS(null,"viewBox").split(" ");
	vbCX=parseFloat(vb[0]);	vbCY=parseFloat(vb[1]);
	vbCW=parseFloat(vb[2]);	vbCH=parseFloat(vb[3]);
	WAmp= vbCW/SVGW;	  HAmp= vbCH/SVGH;
	CurrentAmp = 1/WAmp;
}
function setCurrentVB(x,y,w,h)
{
	vbCX=vbMaxW*x;
	vbCY=vbMaxH*y;
	vbCW=vbMaxW*w;
	vbCH=vbMaxH*h;
	Map.setAttributeNS(null,"viewBox",vbCX+" "+vbCY+" "+vbCW+" "+vbCH);
}
function setCMD(cmd)
{
    CMD=cmd;
}
function parseSVG(obj,element,refobj)
{
	return obj.insertBefore(parseXML(element,SVGDoc),refobj);
}
function endZoom()
{
    getCurrentVB();
}
function showinfotip (evt,info)
{
	var splitString;
	splitString = info.split('#');
	nbsplit = splitString.length;
	var scale = SVGMain.getCurrentScale();
	var translateX = SVGMain.getCurrentTranslate().getX();
	var translateY = SVGMain.getCurrentTranslate().getY();
	var infotip = 'infotip';
	var infotiprect = 'infotipRect';
	var svgobj = SVGDoc.getElementById (infotip);
	var svgobjtxt = svgobj;
	svgobj.setAttributeNS(null,'x', Math.round(evt.getClientX()+15));
	svgobj.setAttributeNS(null,'y', Math.round(evt.getClientY()));
	var svgstyle = svgobj.getStyle();
	svgstyle.setProperty ('visibility', 'visible');
	svgstyle.setProperty('font-size',14);
	svgobj1 = svgobj.getFirstChild();
	if (nbsplit == 1)
	{
		svgobj1.setData(info);
	}
	else
	{
		svgobj1.setData(splitString[0]);
		for (k=1; k<nbsplit ; k++)
		{
			myspan = SVGDoc.createElement('tspan');
			myspan.setAttributeNS(null,'dy', 1.2+'em');
			myspan.setAttributeNS(null,'id', k);
			myspan.setAttributeNS(null,'x', Math.round(evt.getClientX()+15));
			myspan.appendChild(SVGDoc.createTextNode(splitString[k]));
			svgobj.appendChild(myspan);
		}
	}
	var txtlen=1.2*svgobj.getBBox().width;
	var svgobj = SVGDoc.getElementById (infotiprect);
	svgobj.setAttributeNS(null,'x', (Math.round(evt.getClientX()+12.5)));
	svgobj.setAttributeNS(null,'y', (Math.round(evt.getClientY()-10)));
	svgobj.setAttributeNS(null,'width', txtlen+10);
	if (nbsplit >1) svgobj.setAttributeNS(null,'height',1.2*nbsplit+'em');else svgobj.setAttribute ('height',1+'em');
	svgobj.setAttributeNS(null,'rx', 3);
	svgobj.setAttributeNS(null,'ry', 3);
	var svgstyle = svgobj.getStyle();
	svgstyle.setProperty('visibility', 'visible');
	resetTip();
}
function resetTip()
{
	var obj=SVGDoc.getElementById("infotipRect");
	var y=parseFloat(obj.getAttributeNS(null,"y"));
	var y2=parseFloat(SVGDoc.getElementById("infotip").getAttributeNS(null,"y"));
	var dy=600-(y+156);
	if(dy<0)
	{
		obj.setAttributeNS(null,"y",y+dy);
		SVGDoc.getElementById("infotip").setAttributeNS(null,"y",y2+dy);
	}
}
function hideinfotip(evt)
{
	var svgobj = SVGDoc.getElementById ("infotip");
	svgobj.getStyle().setProperty ('visibility', 'hidden');
	while(svgobj.lastChild.tagName=="tspan")
	{
		try
		{
			svgobj.removeChild(svgobj.lastChild);
		}
		catch(e)
		{
			alert(e);
		}
	}
	SVGDoc.getElementById("infotipRect").getStyle().setProperty ('visibility', 'hidden');
}
//------------------------------------------------------------------------------------------------