map.js

《SVG开发实践》源代码

}

function setCurrentVB(x,y,w,h)
{
	vbCX=vbMaxW*x;
	vbCY=vbMaxH*y;
	vbCW=vbMaxW*w;
	vbCH=vbMaxH*h;
	MainSVG.setAttributeNS(null,"viewBox",vbCX+" "+vbCY+" "+vbCW+" "+vbCH);
}
parent.setCurrentVB=setCurrentVB;

function svgMouseDown(evt)
{
	if(evt.target.tagName!="rect") return;
	switch(MouseCMD)
	{
		case null:
			break;
		case "ZOOM":
			getCurrentVB();
			if(CurrentAmp>=MaxAmp)
			{
				alert("对不起，已经放大到最大！");
				/*
				parent.PullZoomBtn();
				CitysLayer.setAttributeNS(null,"pointer-events","visiblePainted");
				*/
				endZoom();
				return
			}
			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);
			IsDoing=true;
			ZoomRect.setAttributeNS(null,"visibility","visible");
			break;
		case "PAN":
			panX=evt.clientX;
			panY=evt.clientY;
			IsDoing=true;
			setCursor("hand");
			break;
	}
}

function setCMD(cmd)
{
	MouseCMD=cmd;
	if(cmd=="ZOOM") CitysLayer.setAttributeNS(null,"pointer-events","none");
}
parent.setCMD=setCMD;

function svgMouseMove(evt)
{
	if(!IsDoing) return;
	switch(MouseCMD)
	{
		case null:
			break;
		case "ZOOM":
			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;
		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;
			MainSVG.setAttributeNS(null,"viewBox",x+" "+y+" "+vbCW+" "+vbCH)
			parent.MiniRect_Refresh(x/vbMaxW,y/vbMaxH,vbCW/vbMaxW,vbCH/vbMaxH);
			break;
	}
}

function svgMouseUp(evt)
{
	if(!IsDoing) return;
	switch(MouseCMD)
	{
		case null:
			break;
		case "ZOOM":
			IsDoing=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(CurrentAmp+ZoomStep,MaxAmp);
				cx=evt.clientX*WAmp+vbCX;
				cy=evt.clientY*HAmp+vbCY;
			}
			else
			{
				ZoomRect.setAttributeNS(null,"width",w);
				ZoomRect.setAttributeNS(null,"height",h);
				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);
			MainSVG.setAttributeNS(null,"viewBox",x+" "+y+" "+w+" "+h);
			ZoomRect.setAttributeNS(null,"visibility","hidden");
			endZoom();
			break;
		case "PAN":
			IsDoing=false;
			break;
	}
}

function endZoom()
{
	getCurrentVB(); AntiZoom();
	parent.UpdateZoomBar(CurrentAmp,MinAmp,MaxAmp);
	parent.PullZoomBtn();
	CitysLayer.setAttributeNS(null,"pointer-events","visiblePainted");
	parent.MiniRect_Refresh(vbCX/vbMaxW,vbCY/vbMaxH,vbCW/vbMaxW,vbCH/vbMaxH);
	/*
	if(CurrentAmp>=MinAmp) displayLayer("city2",true);
	else displayLayer("city2",false);
	if(CurrentAmp>=0.5) displayLayer("city1",true);
	else displayLayer("city1",false);
	*/
	if(CurrentAmp>=1) displayLayer("city0",true);
	else displayLayer("city0",parent.document.all.city0.checked);
	//updateCheckbox(parent.document.all.city2,"city2");
	//updateCheckbox(parent.document.all.city1,"city1");
	//updateCheckbox(parent.document.all.city0,"city0");
}

function updateCheckbox(parentobj,name)
{
	parentobj.checked=(SVGDoc.getElementById(name).getAttributeNS(null,"visibility")=="visible");
}

function resetZoom()
{
	MainSVG.setAttributeNS(null,"viewBox","0 0 "+vbMaxW+" "+vbMaxH);
	endZoom();
	parent.document.all.MiniRect.style.visibility="hidden";
}
parent.resetZoom=resetZoom;

function goEast()
{
	getCurrentVB();
	x=Math.min(Math.max(vbCX+MoveStep,0),vbMaxW-vbCW);
	MainSVG.setAttributeNS(null,"viewBox",x+" "+vbCY+" "+vbCW+" "+vbCH);
	parent.MiniRect_Refresh(x/vbMaxW,vbCY/vbMaxH,vbCW/vbMaxW,vbCH/vbMaxH);
}
parent.goEast=goEast;

function goWest()
{
	getCurrentVB();
	x=Math.min(Math.max(vbCX-MoveStep,0),vbMaxW-vbCW);
	MainSVG.setAttributeNS(null,"viewBox",x+" "+vbCY+" "+vbCW+" "+vbCH);
	parent.MiniRect_Refresh(x/vbMaxW,vbCY/vbMaxH,vbCW/vbMaxW,vbCH/vbMaxH);
}
parent.goWest=goWest;

function goNorth()
{
	getCurrentVB();
	y=Math.min(Math.max(vbCY-MoveStep,0),vbMaxH-vbCH);
	MainSVG.setAttributeNS(null,"viewBox",vbCX+" "+y+" "+vbCW+" "+vbCH);
	parent.MiniRect_Refresh(vbCX/vbMaxW,y/vbMaxH,vbCW/vbMaxW,vbCH/vbMaxH);
}
parent.goNorth=goNorth;

function goSouth()
{
	getCurrentVB();
	y=Math.min(Math.max(vbCY+MoveStep,0),vbMaxH-vbCH);
	MainSVG.setAttributeNS(null,"viewBox",vbCX+" "+y+" "+vbCW+" "+vbCH);
	parent.MiniRect_Refresh(vbCX/vbMaxW,y/vbMaxH,vbCW/vbMaxW,vbCH/vbMaxH);
}
parent.goSouth=goSouth;

function ZoomTo(value)
{
	if(value==0) resetZoom();
	else
	{
		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);
		MainSVG.setAttributeNS(null,"viewBox",x+" "+y+" "+w+" "+h);
		endZoom();
	}
}
parent.ZoomTo=ZoomTo;

var RulerBtnPressed=false;
var IsMessuring=false;

function RulerBtnClick(evt)
{
	RulerBtnPressed=!RulerBtnPressed;
	if(RulerBtnPressed)
	{
		parent.PullZoomBtn();
		setCMD(null);
		parent.document.all.RulerBtn.disabled=true;
		parent.document.all.RulerBtn.src="images/ruler1.gif";
		rulerbck.setAttributeNS(null,"pointer-events","visiblePainted");
	}
}
parent.RulerBtnClick=RulerBtnClick;

function rulerStart(evt)
{
	if(!RulerBtnPressed) return;
	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;
				CitysLayer.setAttributeNS(null,"pointer-events","none");
			}
			else
			{
				linepts+=" L"+xx+" "+yy;
			}
			break;
		default:
			IsMessuring=false; RulerBtnPressed=false;
			parent.document.all.RulerBtn.disabled=false;
			parent.document.all.RulerBtn.src="images/ruler.gif";
			rulerbck.setAttributeNS(null,"pointer-events","none");
			rulerline.setAttributeNS(null,'d','');
			CitysLayer.setAttributeNS(null,"pointer-events","visiblePainted");
			setCMD("PAN");
			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)+"千米");
	}
}


function showinfotip (evt, info)
{
	var splitString;
	splitString = info.split('\n');
	nbsplit = splitString.length;
	var svgdocElement = SVGDoc.getDocumentElement();
	var scale = svgdocElement.getCurrentScale();
	var translateX = svgdocElement.getCurrentTranslate().getX();
	var translateY = svgdocElement.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', 12);
	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);
	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');
}

function hideinfotip(evt)
{
	var svgobj = SVGDoc.getElementById ("infotip");
	svgobj.getStyle().setProperty ('visibility', 'hidden');
	while(svgobj.lastChild.tagName=="tspan")
	{
		try
		{
			svgobj.removeChild(svgobj.lastChild);