📄 map.js
字号:
var MinAmp,MaxAmp=2;
var SVGDoc,MainSVG,MapWin,ZoomRect,ContourLayer,CitysLayer,City0Layer,City1Layer,City2Layer;
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 IsLoading=true;
//注意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="<g id='contours' visibility='visible' pointer-events='none'/>";
ContourLayer=parseSVG(MapWin,element);
CitysLayer=parseSVG(MainSVG,"<g id='citys'/>");
City0Layer=parseSVG(CitysLayer,"<g id='city0' visibility='hidden'/>");
City1Layer=parseSVG(CitysLayer,"<g id='city1'/>");
City2Layer=parseSVG(CitysLayer,"<g id='city2'/>");
element="<rect id='zoomrect' visibility='hidden' pointer-events='none' width='0' height='0' fill='lightgray' fill-opacity='0.8' stroke='none' stroke-width='3'/>";
ZoomRect=parseSVG(MainSVG,element);
initGrid(114.272,29.251,120.107,34.7785,5.836);
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);
getStations();
}
function parseSVG(obj,element,refobj)
{
return obj.insertBefore(parseXML(element,SVGDoc),refobj);
}
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;}
function lat2y(lat){var y=(latMax-lat)*yTimes; return y;}
function AntiZoom()
{
var scale=1.0/CurrentAmp;
var nodes=CitysLayer.getElementsByTagName("text");
for(var i=0;i<nodes.length;i++)
{
var m=nodes.item(i).getCTM();
var transform="matrix("+[scale,0,0,scale,m.e,m.f].join(",")+")";
nodes.item(i).setAttributeNS(null,"transform",transform);
}
nodes=CitysLayer.getElementsByTagName("circle");
for(var i=0;i<nodes.length;i++)
{
var m=nodes.item(i).getCTM();
var transform="matrix("+[scale,0,0,scale,m.e,m.f].join(",")+")";
nodes.item(i).setAttributeNS(null,"transform",transform);
}
}
function updateData(stations,data,error,maxdata,mindata,val)
{//显示所有下雨的点
//while(IsLoading);
var i = 0;
try
{
clearchilds(ContourLayer);
var nodes=CitysLayer.getElementsByTagName("a");
nodes.item(0).childNodes.item(4).childNodes.item(2).setAttributeNS(null,"visibility","hidden");
for(var i=0;i<nodes.length;i++)
{//此处初始化对画等值线有重要影响
var dotobj=nodes.item(i).firstChild.nextSibling;
dotobj.setAttributeNS(null,"visibility","hidden");
nodes.item(i).childNodes.item(4).firstChild.nextSibling.firstChild.data="";
}
var middata = 0;
middata = (mindata+(maxdata-mindata)*(1-val)*10)/10;
var station=stations.split(",");
var datum=data.split(",");
var err=error.split(",");
for(i=0;i<station.length-1;i++)
{
if (datum[i]>0){
var dobj=SVGDoc.getElementById("d"+station[i]);
var aobj=SVGDoc.getElementById("s"+station[i]);
var lonobj=SVGDoc.getElementById("lon"+station[i]);
var lonval=lonobj.firstChild.data;//没有子元素的话，firstchild指的是第一个空白处既TEXT
var latobj=SVGDoc.getElementById("lat"+station[i]);
var latval=latobj.firstChild.data;
var dotobj=aobj.childNodes.item(1);
dotobj.setAttributeNS(null,"visibility","visible");//让原来显示的红点显示出来
dotobj.setAttributeNS(null,"fill",(datum[i]>middata?"red":"blue")); //点赋颜色
if (1==err[i]){
dotobj.setAttributeNS(null,"fill","#ff9900"); //缺报点另赋颜色
}
dobj.firstChild.data=datum[i];//放入雨量数据到tspan
dobj.setAttributeNS(null,"fill",(datum[i]>middata?"red":"blue")); //下标数字赋颜色
}
}
//显示所有雨量站点的TIP信息,包括站名，雨量，经度，纬度
for(i=0;i<nodes.length;i++)
{
var lonval=nodes.item(i).childNodes.item(2).firstChild.data;
var latval=nodes.item(i).childNodes.item(3).firstChild.data;
nodes.item(i).setAttributeNS(null,"onmouseover","");
var infoobj = nodes.item(i).childNodes.item(4);
var datum=infoobj.firstChild.nextSibling.firstChild.data;
if (""==datum)
var tip=infoobj.firstChild.data+" 纬度:"+lonval+" 经度:"+latval;
else
var tip=infoobj.firstChild.data+" ("+datum+")"+" 纬度:"+lonval+" 经度:"+latval; nodes.item(i).setAttributeNS(null,"onmouseover","showinfotip(evt,'"+tip+"')");
}
}
catch(e)
{
}
}
parent.updateData=updateData;
function setNewview(maxvalue,minvalue,newval)
{
var middata = 0;
var i = 0;
middata = (MinValue+(MaxValue-MinValue)*(1-newval)*10)/10;
var nodes=CitysLayer.getElementsByTagName("a");
for(i=0; i<nodes.length; i++)
{ nodes.item(i).firstChild.nextSibling.setAttributeNS(null,"visibility","hidden");//隐藏初始的红点
}
for(i=0; i<nodes.length; i++)
{
var aobj=nodes.item(i);//<a>
var dotobj=aobj.firstChild.nextSibling;//<circle red or bule>
var infoobj=aobj.childNodes.item(4); //站点信息
var datum= infoobj.firstChild.nextSibling.firstChild.data;
infoobj.childNodes.item(2).setAttributeNS(null,"visibility","hidden");//隐藏所有的到站时间
if(infoobj.childNodes.item(1).firstChild.data>0){
dotobj.setAttributeNS(null,"visibility","visible");
if (dotobj.getAttributeNS(null,"fill")!="#ff9900"){//如果原先不是缺报的点颜色才改变
dotobj.setAttributeNS(null,"fill",(datum>middata?"red":"blue"));
}
infoobj.childNodes.item(1).setAttributeNS(null,"fill",(datum>middata?"red":"blue"));//数字颜色改变
if (nodes.item(i).childNodes.item(4).childNodes.item(3).getAttributeNS(null,"id")=="lev2"||
nodes.item(i).childNodes.item(4).childNodes.item(3).getAttributeNS(null,"id")=="lev1"){
//只有县市才显示雨量数字
infoobj.childNodes.item(1).setAttributeNS(null,"visibility","visible");//显示所有的雨量
}
}
}
}
parent.setNewview=setNewview;
function getStations()
{
getURL("stations.aspx",StationsCallback);
}
function getUpdateTime()
{//监测站最后雨量信息达到时间
var nodes=CitysLayer.getElementsByTagName("a");
//判断第一个雨量站的时间层是否有显示就可知道是否使用了此功能
if (nodes.item(0).childNodes.item(4).childNodes.item(2).getAttributeNS(null,"visibility")=="hidden")
{getURL("lastupdatetime.aspx",LastTimeCallback);
nodes.item(0).childNodes.item(4).childNodes.item(2).setAttributeNS(null,"visibility","visible");}
else{
//显示所有雨量数值，隐藏所有时间值
for(var i=0; i<nodes.length ;i++){
var rainobj = nodes.item(i).childNodes.item(4).firstChild.nextSibling;//雨量值对象
var timeobj = nodes.item(i).childNodes.item(4).childNodes.item(2);//时间值对象
if (nodes.item(i).childNodes.item(4).childNodes.item(3).getAttributeNS(null,"id")=="lev2"||
nodes.item(i).childNodes.item(4).childNodes.item(3).getAttributeNS(null,"id")=="lev1"){
//只有县市才显示雨量数字
rainobj.setAttributeNS(null,"visibility","visible");//显示所有的雨量
}
timeobj.setAttributeNS(null,"visibility","hidden");//隐藏时间
}
}
}
parent.getUpdateTime=getUpdateTime;
function StationsCallback(data)
{
if(data.success)
{
var stations=data.content.split("\n");
for(i=0;i<stations.length-1;i++)
{
var strdata=stations[i].split(",");
var id=strdata[0];
var name=strdata[1];
var x=lon2x(strdata[2]);
var y=lat2y(strdata[3]);
var lev=strdata[4];
drawStation(id,name,x,y,lev,strdata[2],strdata[3]);
}
AntiZoom();
//IsLoading=false;
//alert("安徽省雨量");
try
{
parent.document.body.all.LeftFrame.src="leftframe.aspx?#";
parent.document.body.all.LeftFrame.src="leftframe.aspx?";
}
catch(e)
{
}
parent.document.body.style.visibility="visible";
}
}
function LastTimeCallback(data)
{
if(data.success)
{
//先隐藏所有雨量数值
var nodes=CitysLayer.getElementsByTagName("a");
for(var i=0; i<nodes.length ;i++){//隐藏雨量值
nodes.item(i).childNodes.item(4).firstChild.nextSibling.setAttributeNS(null,"visibility","hidden");
}
//开始画最后到达时间
var stations=data.content.split("\n");
for(var i=0;i<stations.length-1;i++)
{
var strdata=stations[i].split(",");
if (strdata[2] == 1 || strdata[2] == 2){//判断行政单位级别，只有县市级的时间才显示
drawTime(strdata[0],strdata[1]);
}
}
AntiZoom();
//parent.document.body.style.visibility="visible";
}
}
function drawTime(id,time)
{
var dobj=SVGDoc.getElementById("uptime"+id);
dobj.setAttributeNS(null,"visibility","visible");//显示时间值
dobj.firstChild.data=time.toString()+":00";//放入时间数据到tspan
dobj.setAttributeNS(null,"fill","green"); //下标数字赋颜色
}
function drawStation(id,name,x,y,lev,lon,lat)
{
var font,dx;
switch(lev)
{
case '2':
font=" font-size='9pt'";
dx=9*(name.length)-2;
break;
case '1':
font=" font-size='9pt'";
dx=9*(name.length)-2;
break;
case '0':
font=" font-size='8pt' fill='gray'";
dx=8*(name.length)-2;
break;
}
var s="<a id='s"+id+"' onmouseout='hideinfotip(evt)' xlink:href='detail.aspx?id="+id+"' target='_blank'>"+
"<circle transform='matrix(1,0,0,1,"+(x+2)+","+y+")' fill='gray' r='1.5'/>"+
"<circle transform='matrix(1,0,0,1,"+(x+2)+","+y+")' fill='red' visibility='hidden' r='2'/>"+
"<text id='lon"+id+"'>"+lon+"</text>"+
"<text id='lat"+id+"'>"+lat+"</text>"+
"<text transform='matrix(1,0,0,1,"+(x+4)+","+y+")'"+font+">"+name+
"<tspan id='d"+id+"' dy='1em' fill='red' dx='-"+dx+"pt' font-size='10pt' font-family='Arial Black'> </tspan>"+"<tspan id='uptime"+id+"' dy='10pt' dx='-20pt' font-size='10pt' font-family='Arial Black'> </tspan>"+"<tspan id='lev"+lev+"'></tspan>"+"</text>"+
"</a>";
eval("City"+lev+"Layer").appendChild(parseXML(s,SVGDoc)); //划分行政区划层
}
function displayLayer(name,status)
{
SVGDoc.getElementById(name).setAttributeNS(null,"visibility",(status?"visible":"hidden"));
}
parent.displayLayer=displayLayer;
function setCursor(cur)
{
MainSVG.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;
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -