0.884
This commit is contained in:
progr76@gmail.com
275
Source/SITE/map.html
Normal file
275
Source/SITE/map.html
Normal file
@@ -0,0 +1,275 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user