planetary.js会动的地球

最新推荐文章于 2024-04-24 09:22:16 发布

寒翼

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量1.9k

点赞数 2

分类专栏： web开发文章标签： javascript html planetary

本文链接：https://blog.csdn.net/hanfeihan1992/article/details/45721515

版权

web开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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