maptest.js

《SVG开发实践》源代码

var MinAmp,MaxAmp=2;
var SVGDoc,MainSVG,MapWin,ZoomRect,ContourLayer,traceLayer,BankLayer;
var SVGW,SVGH,vbMaxW,vbMaxH;
var vbCX,vbCY,vbCW,vbCH,WAmp,HAmp,CurrentAmp;
var MouseCMD=null;
var IsDoing=false;
var panX,panY;
var lonMin,latMin,lonMax,latMax;
var xTimes,yTimes;
var MoveStep=100,ZoomStep=0.2;
var Scaler=null;
var PtArr; //array to hold points
var NdArr; // array to hold gridnodes
var PointId = 0;	//current number of points drawn
var oldcolor;	//for hilite onmouse over operation
var ContourW,ContourH;
var GridN=40,ContN=10;
var len = 0;
//注意childNodes等关键字的大小写！！！！


function svgInit(evt)
{
	SVGDoc=evt.target.ownerDocument;
	MainSVG=SVGDoc.getElementById("main");
	MapWin=SVGDoc.getElementById("mapWindow");
	//contextMenu.removeChild(contextMenu.firstChild);//控制右键菜单
   
	MainSVG.addEventListener("mousedown",svgMouseDown,false);
	MainSVG.addEventListener("mousemove",svgMouseMove,false);
	MainSVG.addEventListener("mouseup",svgMouseUp,false);

	SVGW=parseInt(MainSVG.getAttributeNS(null,"width"));
	SVGH=parseInt(MainSVG.getAttributeNS(null,"height"));

	getCurrentVB();	vbMaxW=vbCW; vbMaxH=vbCH; MinAmp=CurrentAmp;
	ContourW=vbMaxW; ContourH=vbMaxH;

	var element="<rect width='"+vbMaxW+"' height='"+vbMaxH+"' fill-opacity='0'/>";
	var obj=parseSVG(MainSVG,element);
    
    //------------------添加矩形区域的图形定义-----
	element="<rect id='zoomrect' visibility='hidden' pointer-events='none' width='0' height='0' fill='lightgray' fill-opacity='0.7' stroke='none' stroke-width='3'/>";
	ZoomRect=parseSVG(MainSVG,element);
	//element= "<g id='SearchRect'  visibility='hidden' pointer-events='none'><image id='search' xlink:href='loading.gif'/></g>";
	
	//------------------添加银行标示图形定义------------------
    element="<g><circle id='bankSymbol' fill='blue' stroke-width='2'/></g>"
	BankLayer = parseSVG(MainSVG,element);
	
	//------------------添加信息提示框图形定义--------------------------
	element="<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(MainSVG,element);
    
	initGrid(117.132,31.7339,117.383,31.9353,14.6954);

	element="<rect id='rulerbck' width='"+vbMaxW+"' height='"+vbMaxH+"' fill-opacity='0' pointer-events='none' onclick='rulerStart(evt)' onmousemove='rulerMessuring(evt)'/>";
	rulerbck=parseSVG(MainSVG,element);
	element="<path id='rulerline' fill='none' stroke='#A52A2A' pointer-events='none' stroke-width='3pt'/>";
	rulerline=parseSVG(MainSVG,element);

	//-----------------------------创建轨迹动画层,最后记得加屏蔽事件属性---------------------------------------------------
	traceLayer=parseSVG(MapWin,"<g id='traceLayer'/>");
	
	getStations();
}

function getStations()
{
	getURL("getAllnode.aspx",StationsCallback);
}

function StationsCallback(data)
{
	if(data.success)
	{  
		var stations=data.content.split("\n");
		//alert(stations.length);
		for(i=0;i<stations.length-1;i++)
		{
			var strdata=stations[i].split(",");
			var id=strdata[0];
			var x=strdata[1];
			var y=strdata[2];
			var lev=strdata[3];
			//alert(id+x+y+lev);
			drawBank(id,x,y,lev);
		}
	}
}


function getTraceLayer()
{
	return (traceLayer);
}
parent.getTraceLayer=getTraceLayer;

function getMouseCMD()
{
	return (MouseCMD);
}
parent.getMouseCMD=getMouseCMD;

function parseSVG(obj,element,refobj)
{
	return obj.insertBefore(parseXML(element,SVGDoc),refobj);
}
parent.parseSVG=parseSVG;

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 lon2x(lon){var x=(lon-lonMin)*xTimes; return x;}
parent.lon2x=lon2x;
function lat2y(lat){var y=(latMax-lat)*yTimes; return y;}
parent.lat2y=lat2y;

function x2lon(x){var lon=x/xTimes+lonMin; return lon;}
function y2lat(y){var lat=latMax-y/yTimes; return lat;}

/*把地物显示在正中间*/
function centerTo(lon,lat)
{
	var x=lon2x(lon),y=lat2y(lat);
	var MainSVG=svgdoc.getElementById("main");
	var vb=MainSVG.getAttributeNS(null,"viewBox").split(" ");
	var vbx=parseFloat(vb[0]),vby=parseFloat(vb[1]),vbw=parseFloat(vb[2]),vbh=parseFloat(vb[3]);
	var nx=parseInt(Math.min(Math.max(x-vbw/2,0),WidthVB-vbw));
	var ny=parseInt(Math.min(Math.max(y-vbh/2,0),HeightVB-vbh));
	MainSVG.setAttributeNS(null,"viewBox",nx+" "+ny+" "+parseInt(vbw)+" "+parseInt(vbh));
	/*var ovrDoc= svgdoc.getElementById('locationRect');缩略地图处理!!!!!!!!!!!!!!!!!!!!!11
	ovrDoc.setAttributeNS(null,"x",nx);
	ovrDoc.setAttributeNS(null,"y",ny);
	shipPosition.setAttributeNS(null,"transform","translate("+x+","+y+")");
	shipPosition.setAttributeNS(null,"visibility","visible");*/
}
parent.centerTo=centerTo;

/*定位银行显示*/
function drawBank(id,lon,lat,mtype)

{		var x=lon2x(lon);
		var y=lat2y(lat);
		
		var info = "id:"+id+" ,Jing:"+lon+" ,Wei:"+lat;
		var elm="<a id='bank"+id+"' onmouseover='javascript:showinfotip(evt,\""+info+"\")' onmouseout='javascript:hideinfotip(evt)'>"+
					"<use xlink:href='#bankSymbol' stroke='blue' x='"+x+"' y='"+y+"' pointer-events='none'/>"
					if (mtype=="1")
						elm=elm+"<text x='"+x+"' y='"+y+"' font-size='30'>"+id+"</text>"+"</a>";
					else if (mtype=="2")
						elm=elm+"<text x='"+x+"' y='"+y+"' font-size='30' stroke='red'>"+id+"</text>"+"</a>";
					
		//alert(elm);
		parseSVG(BankLayer,elm);
}
parent.drawBank = drawBank;

function displayLayer(name,status)
{
	SVGDoc.getElementById(name).setAttributeNS(null,"visibility",(status?"visible":"hidden"));
}
parent.displayLayer=displayLayer;

function setCursor(cur)
{
	MapWin.setAttributeNS(null,"cursor",cur)
}

function getCurrentVB()
{
	var vb=MainSVG.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;
	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("对不起，已经放大到最大！");
				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;
		case "CHOOSE":
			alert("您已经成功选取您所在点！\n点击【开始查找】按钮开始地图搜索.\n如果想重新选择,请再次点击【图中选点】按钮.");
			setIsDoing(false);
			parent.document.all.ChoosePonitBtn.disabled = false;
			drawBank(1,parent.document.all.lon.value,parent.document.all.lat.value,'');
			setCMD("PAN");
			break;
		case "RECT":
			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);
			IsDoing=true;
			ZoomRect.setAttributeNS(null,"visibility","visible");
			break;;
			
	}
}

function setCMD(cmd)
{
	MouseCMD=cmd;
}
parent.setCMD=setCMD;

function setIsDoing(_IsDoing)
{
	IsDoing = _IsDoing;
}
parent.setIsDoing = setIsDoing;

function svgMouseMove(evt)
{
	if(!IsDoing) return;
	switch(MouseCMD)
	{
		case null:
			break;
		case "RECT":
		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)
			break;
		case "CHOOSE"://图中选点
			getCurrentVB();
			var x=x2lon(evt.clientX*WAmp+vbCX);
			var y=y2lat(evt.clientY*HAmp+vbCY);
			parent.updateInput(x,y);
			break;