planetary.js会动的地球
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;width: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="width:180" bgcolor="#001120"> </ul> </div> <div style="position:absolute;z-index:-1;opacity:0.5;right:0;"> <ul id="address" class="list-group" style="width: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(); } }});