planetary.js可以创建一个可交互的地球
index.html
test×Close
Tips 按空格键可以使视角固定在中国上方。
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 = '
' + ip + '';$('ul#ip').append(htmlliip);
var htmlliaddress = '
' + address + '';$('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();
}
}});