Planetary.js

TomatoCool

发布于 2023-07-30 17:46:33

1770

发布于 2023-07-30 17:46:33

通用html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--从官网下载js文件-->
    <script type='text/javascript' src='d3.v3.min.js'></script>
    <script type='text/javascript' src='topojson.v1.min.js'></script>
    <script type='text/javascript' src='planetaryjs.min.js'></script>
    <title>地球仪</title>
</head>
<body>
    <canvas id='globe' width='500' height='500'></canvas>
    <script type='text/javascript' src='index.js'></script>
</body>
</html>

自定义index.js文件：

(function() {
    var globe = planetaryjs.planet();
    // 导入自定义旋转插件
    globe.loadPlugin(autorotate(10));
    // 导入json文件
    // 设置海洋，大地，轮廓的颜色
    globe.loadPlugin(planetaryjs.plugins.earth({
        topojson: { file:   'world-110m-withlakes.json' },
        oceans:   { fill:   '#000080' },
        land:     { fill:   '#339966' },
        borders:  { stroke: '#008000' }
    }));
    // 导入自定义湖水插件
    globe.loadPlugin(lakes({
        fill: '#000080'
    }));
    // 导入ping插件
    globe.loadPlugin(planetaryjs.plugins.pings());
    // 拖动插件
    globe.loadPlugin(planetaryjs.plugins.zoom({
        scaleExtent: [100, 300]
    }));
    globe.loadPlugin(planetaryjs.plugins.drag({
        // 聚焦暂停
        onDragStart: function() {
            this.plugins.autorotate.pause();
        },
        // 释放继续
        onDragEnd: function() {
            this.plugins.autorotate.resume();
        }
    }));
    // 设置初始偏移，旋转参数
    globe.projection.scale(175).translate([175, 175]).rotate([0, -10, 0]);

    // 在随机的点上ping
    var colors = ['red', 'yellow', 'white', 'orange', 'green', 'cyan', 'pink'];
    setInterval(function() {
        var lat = Math.random() * 170 - 85;
        var lng = Math.random() * 360 - 180;
        var color = colors[Math.floor(Math.random() * colors.length)];
        globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
    }, 150);
    // 绘制地球
    var canvas = document.getElementById('globe');
    globe.draw(canvas);

    // 自定义旋转插件
    function autorotate(degPerSec) {
        return function(planet) {
            var lastTick = null;
            var paused = false;
            planet.plugins.autorotate = {
                pause:  function() { paused = true;  },
                resume: function() { paused = false; }
            };
            planet.onDraw(function() {
                if (paused || !lastTick) {
                    lastTick = new Date();
                } else {
                    var now = new Date();
                    var delta = now - lastTick;
                    var rotation = planet.projection.rotate();
                    rotation[0] += degPerSec * delta / 1000;
                    if (rotation[0] >= 180) rotation[0] -= 360;
                    planet.projection.rotate(rotation);
                    lastTick = now;
                }
            });
        };
    };

    // 自定义湖水插件
    function lakes(options) {
        options = options || {};
        var lakes = null;

        return function(planet) {
            planet.onInit(function() {
                var world = planet.plugins.topojson.world;
                lakes = topojson.feature(world, world.objects.ne_110m_lakes);
            });

            planet.onDraw(function() {
                planet.withSavedContext(function(context) {
                    context.beginPath();
                    planet.path.context(context)(lakes);
                    context.fillStyle = options.fill || 'black';
                    context.fill();
                });
            });
        };
    };
})();

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023 年 07 月，如有侵权请联系 cloudcommunity@tencent.com 删除

function