276 lines
7.4 KiB
HTML
276 lines
7.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Map network</title>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../HTML/JS/client.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var WasMapDisplay=0;
|
||
|
|
var PointC;
|
||
|
|
var glMouse,glMoveMouse;
|
||
|
|
var NodesMap={};
|
||
|
|
function DrawMap()
|
||
|
|
{
|
||
|
|
var obj = $("idMap");
|
||
|
|
var ctx = obj.getContext('2d');
|
||
|
|
ctx.fillStyle = "#030a29";
|
||
|
|
ctx.fillRect(0, 0, obj.width, obj.height);
|
||
|
|
|
||
|
|
var KX=1050/1000;
|
||
|
|
var KY=490/500;
|
||
|
|
PointC={x:556,y:380};
|
||
|
|
|
||
|
|
//PointC={x:obj.width/2,y:obj.height/2};
|
||
|
|
// if(glMouse)
|
||
|
|
// PointC=glMouse;
|
||
|
|
// if(glMouse)
|
||
|
|
// KX=glMouse.x/1000;
|
||
|
|
// if(glMouse)
|
||
|
|
// KY=glMouse.y/500;
|
||
|
|
|
||
|
|
var wasname=0;
|
||
|
|
|
||
|
|
var map={};
|
||
|
|
var Count=0;
|
||
|
|
for(var key in NodesMap)
|
||
|
|
{
|
||
|
|
Count++;
|
||
|
|
var Item=NodesMap[key];
|
||
|
|
var y=Math.floor(obj.height-(obj.height-PointC.y+KY*obj.height*(Item.latitude/10000-90)/180));
|
||
|
|
var x=Math.floor(PointC.x+KX*obj.width*(Item.longitude/10000-180)/360);
|
||
|
|
if(Item.longitude/10000-180<-20)
|
||
|
|
x+=25;
|
||
|
|
|
||
|
|
var strxy=""+x+":"+y;
|
||
|
|
if(!map[strxy])
|
||
|
|
map[strxy]={count:0,name:"-"};
|
||
|
|
var point=map[strxy];
|
||
|
|
point.count++;
|
||
|
|
point.x=x;
|
||
|
|
point.y=y;
|
||
|
|
if(Item.name)
|
||
|
|
point.name=Item.name;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//arc
|
||
|
|
ctx.textAlign = "center";
|
||
|
|
ctx.textBaseline = "middle";
|
||
|
|
ctx.strokeStyle = "#ffe238";
|
||
|
|
ctx.fillStyle=ctx.strokeStyle;
|
||
|
|
for(var key in map)
|
||
|
|
{
|
||
|
|
var point=map[key];
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(point.x,point.y,Math.sqrt(point.count),0,2 * Math.PI);
|
||
|
|
// ctx.fillText(point.count,point.x,point.y);
|
||
|
|
ctx.stroke();
|
||
|
|
ctx.fill();
|
||
|
|
}
|
||
|
|
|
||
|
|
//name
|
||
|
|
ctx.fillStyle="#1b9031";
|
||
|
|
for(var key in map)
|
||
|
|
{
|
||
|
|
var point=map[key];
|
||
|
|
if(!wasname && glMoveMouse)
|
||
|
|
{
|
||
|
|
var dx=point.x-glMoveMouse.x;
|
||
|
|
var dy=point.y-glMoveMouse.y;
|
||
|
|
var dl2=dx*dx+dy*dy;
|
||
|
|
if(dl2<17+point.count)
|
||
|
|
{
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.fillText(point.name+":"+point.count,point.x,point.y-20);
|
||
|
|
ctx.stroke();
|
||
|
|
wasname=1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
if(0 && glMouse)
|
||
|
|
{
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(glMouse.x,glMouse.y,4,0,2 * Math.PI);
|
||
|
|
ctx.fillText("x="+glMouse.x+" y="+glMouse.y,glMouse.x,glMouse.y-20);
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
SetStatus("Nodes count: "+Count);
|
||
|
|
|
||
|
|
if(!WasMapDisplay)
|
||
|
|
SetVisibleBlock("idMapAll",true);
|
||
|
|
WasMapDisplay=1;
|
||
|
|
}
|
||
|
|
function $(id)
|
||
|
|
{
|
||
|
|
return document.getElementById(id);
|
||
|
|
}
|
||
|
|
function SetVisibleBlock(name,bSet)
|
||
|
|
{
|
||
|
|
var Item=$(name);
|
||
|
|
if(bSet && typeof bSet==="string")
|
||
|
|
Item.style.display = bSet;
|
||
|
|
else
|
||
|
|
if(bSet)
|
||
|
|
{
|
||
|
|
Item.style.display = 'block';
|
||
|
|
DoStableScroll();
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
Item.style.display = 'none';
|
||
|
|
}
|
||
|
|
return Item;
|
||
|
|
}
|
||
|
|
|
||
|
|
function SetStatus(Str)
|
||
|
|
{
|
||
|
|
var id = $("idStatus");
|
||
|
|
id.innerHTML=Str;
|
||
|
|
}
|
||
|
|
|
||
|
|
function GetNodeListAll()
|
||
|
|
{
|
||
|
|
GetData("GetNodeList",{All:1,Geo:1}, function (Data)
|
||
|
|
{
|
||
|
|
if(Data && Data.result)
|
||
|
|
{
|
||
|
|
for(var i=0;i<Data.arr.length;i++)
|
||
|
|
{
|
||
|
|
var Item=Data.arr[i];
|
||
|
|
NodesMap[Item.ip]=Item;
|
||
|
|
}
|
||
|
|
|
||
|
|
DrawMap();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload=function ()
|
||
|
|
{
|
||
|
|
DrawMap();
|
||
|
|
setInterval(GetNodeListAll,1000);
|
||
|
|
|
||
|
|
window.addEventListener('mousedown',function (event)
|
||
|
|
{
|
||
|
|
SetDiagramMouseX(event,"down");
|
||
|
|
}, false);
|
||
|
|
window.addEventListener('mouseup',function (event)
|
||
|
|
{
|
||
|
|
SetDiagramMouseX(event,"up");
|
||
|
|
}, false);
|
||
|
|
|
||
|
|
window.onmousemove = function(event)
|
||
|
|
{
|
||
|
|
SetDiagramMouseX(event);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
var LMouseOn=false;
|
||
|
|
function SetDiagramMouseX(event,mode)
|
||
|
|
{
|
||
|
|
if(event.srcElement && event.srcElement.className.indexOf("map")>=0)
|
||
|
|
{
|
||
|
|
if(mode==="down")
|
||
|
|
LMouseOn=true;
|
||
|
|
else
|
||
|
|
if(mode==="up")
|
||
|
|
LMouseOn=false;
|
||
|
|
|
||
|
|
event.preventDefault();
|
||
|
|
var obj = event.srcElement;
|
||
|
|
glMoveMouse=getMouse(obj,event);
|
||
|
|
if(LMouseOn===true)
|
||
|
|
{
|
||
|
|
glMouse=glMoveMouse;
|
||
|
|
DrawMap();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//LIB
|
||
|
|
//LIB
|
||
|
|
//LIB
|
||
|
|
//LIB
|
||
|
|
|
||
|
|
function getMouse(canvas,e)
|
||
|
|
{
|
||
|
|
|
||
|
|
var x = e.clientX - getTrueOffsetLeft(canvas);
|
||
|
|
if(window.pageXOffset)
|
||
|
|
x=x+window.pageXOffset;
|
||
|
|
|
||
|
|
var y = e.clientY - getTrueOffsetTop(canvas);
|
||
|
|
if(window.pageYOffset)
|
||
|
|
y=y+window.pageYOffset
|
||
|
|
var coord= {x:x,y:y};
|
||
|
|
return coord;
|
||
|
|
};
|
||
|
|
function getTrueOffsetLeft(ele)
|
||
|
|
{
|
||
|
|
var n = 0;
|
||
|
|
while (ele)
|
||
|
|
{
|
||
|
|
n += ele.offsetLeft || 0;
|
||
|
|
ele = ele.offsetParent;
|
||
|
|
}
|
||
|
|
return n;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getTrueOffsetTop(ele)
|
||
|
|
{
|
||
|
|
var n = 0;
|
||
|
|
while (ele)
|
||
|
|
{
|
||
|
|
n += ele.offsetTop || 0;
|
||
|
|
ele = ele.offsetParent;
|
||
|
|
}
|
||
|
|
return n;
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.basemap
|
||
|
|
{
|
||
|
|
width:1244px;
|
||
|
|
background:url('./PIC/world.jpg') no-repeat;
|
||
|
|
border:1px solid rgba(204, 198, 198, 0.97);
|
||
|
|
}
|
||
|
|
#idMap
|
||
|
|
{
|
||
|
|
z-index: 100;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
#idStatus
|
||
|
|
{
|
||
|
|
height: 20px;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
body
|
||
|
|
{
|
||
|
|
background-color: #030a29;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<DIV align='center'>
|
||
|
|
<DIV id="idStatus"></DIV>
|
||
|
|
<DIV id="idMapAll" style="display: none">
|
||
|
|
<DIV class="basemap">
|
||
|
|
<canvas class="map" width="1244" height="658" id='idMap'></canvas>
|
||
|
|
</DIV>
|
||
|
|
<DIV style="color: gray; text-align: center">The location of the nodes on the map is very approximate...</DIV>
|
||
|
|
</DIV>
|
||
|
|
</DIV>
|
||
|
|
</body>
|
||
|
|
</html>
|