planetary.js可以创建一个可交互的地球
index.html
<html>
<head>
<title>test</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript' src='js/d3.v3.min.js'></script>
<script type='text/javascript' src='js/topojson.v1.min.js'></script>
<script type='text/javascript' src='js/planetaryjs.min.js'></script>
<script type='text/javascript' src='js/jquery.min.js'></script>
</head>
<body background='images/background-white.png'>
<div>
<div style="position:absolute;z-index:0;aligen:center;100%;height:100%;">
<canvas id='globe' width='1366' height='667'></canvas>
</div>
<div style="position:absolute;z-index:-1;opacity:0.5;">
<ul id="ip" class="list-group" style="180" bgcolor="#001120">
</ul>
</div>
<div style="position:absolute;z-index:-1;opacity:0.5;right:0;">
<ul id="address" class="list-group" style="180;" bgcolor="#001120">
</ul>
</div>
</div>
<div class="alert alert-warning alert-dismissible" style="position:absolute;z-index:1;bottom:0;" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<strong>Tips</strong> 按空格键可以使视角固定在中国上方。
</div>
<script type='text/javascript' src='js/bootstrap.min.js'></script>
<script type='text/javascript' src='js/main.js'></script>
</body>
</html>main.js
var planet = planetaryjs.planet();
var canvas = document.getElementById('globe');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
planet.loadPlugin(planetaryjs.plugins.earth({
topojson: { file: 'js/world-110m.json' },
oceans: { fill: '#001320' },
land: { fill: '#06304e' },
borders: { stroke: '#001320' }
}));
planet.projection.scale(window.innerHeight/2-20).translate([window.innerWidth/2, window.innerHeight/2]).rotate([250, -20, 0]);
var autorotate = function(degreesPerTick) {
return function(planet) {
var paused = false;
planet.plugins.autorotate = {
pause: function() { paused = true; },
resume: function() { paused = false; },
ispaused: function() { return paused;}
};
planet.onDraw(function() {
if (!paused) {
var rotation = planet.projection.rotate();
rotation[0] += degreesPerTick;
if (rotation[0] >= 180) rotation[0] -= 360;
planet.projection.rotate(rotation);
}
});
};
};
planet.loadPlugin(autorotate(0.3));
planet.loadPlugin(planetaryjs.plugins.zoom({
scaleExtent: [50, 5000]
}));
planet.loadPlugin(planetaryjs.plugins.drag({
onDragStart: function() {
this.plugins.autorotate.pause();
},
onDragEnd: function() {
this.plugins.autorotate.resume();
}
}));
planet.loadPlugin(planetaryjs.plugins.pings());
planet.draw(canvas);
//var colors = ['red', 'yellow', 'white', 'orange', 'green', 'cyan', 'pink'];
setInterval(function() {
var url = '/planet/data.php?num=15';
$.getJSON(url, function(data){
$('ul#ip').empty();
$('ul#address').empty();
$.each(data, function(i,item){
var keys = item.split(',');
var x = keys[1];
var y = keys[2];
var ip = keys[0];
var address = keys[3];
planet.plugins.pings.add(x, y, { color: 'red', ttl: 20000, angle: 3 });
var htmlliip = '<li class="list-group-item">' + ip + '</li>';
$('ul#ip').append(htmlliip);
var htmlliaddress = '<li class="list-group-item" style="text-align:right;">' + address + '</li>';
$('ul#address').append(htmlliaddress);
});
});
},2000);
$(document).keydown(function(event){
if(event.keyCode == 32){
var paused = planet.plugins.autorotate.ispaused();
if (paused == false){
planet.projection.rotate([250, -20, 0]);
planet.plugins.autorotate.pause();
} else if (paused == true){
planet.plugins.autorotate.resume();
}
}});