可交互的地球html,planetary.js会动的地球

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();

}

}});