planetary.js——生成动态地球的有趣插件

时间：2020-5-13

前言（背景）：
最近，笔者的个人网站的搭建接近完成，其中用到了一个比较有趣的插件planetary.js。它的作用是，可以生成一个性能（UI）良好可交互的地球。话不多说，先上个我的个人网站(www.zksky.top)的UI效果图（笔者觉得效果还不错）：

一、前期准备

在官网上下载，并在HTML中引入相关文件。笔者只用到了下列三个文件。

    <script src='./palnetary/d3.v3.min.js'></script>
    <script src='./palnetary/topojson.v1.min.js'></script>
    <script src='./palnetary/planetaryjs.min.js'></script>

在HTML中设置画布：

<canvas id="globe"></canvas>

二、js代码实现

1、全局变量

var globe = planetaryjs.planet();
//在planetaryjs中的中国坐标
var China = [250, -20, 0];
//获取dom元素
var canvas = document.getElementById("globe");

2、planetaryjs配置函数

function initGlobe() {
    //加载我们的自定义“autorotate”插件，配置地球旋转角度
    globe.loadPlugin(autorotate(10));
    //配置生成地球的颜色
    globe.loadPlugin(planetaryjs.plugins.earth({
        topojson: { file: "data/world-110m-withlakes.json" },
        oceans: { fill: '#000040' },
        land: { fill: '#1b72b0' },
        borders: { stroke: '#000055', lineWidth: 1, type: 'internal' }
    }));
    //配置鼠标拖动事件
    globe.loadPlugin(planetaryjs.plugins.drag({
        onDragStart() {
            this.plugins.autorotate.pause();
        },
        onDragEnd() {
            this.plugins.autorotate.resume();
        }
    }))
    //加载点插件,并配置颜色
    //ttl是显示的时间长短，
    //angle是ping的最大角度（它将在其TTL范围内增长到此大小）；默认为5
    //可以在每个数据点中配置，如不配置。则采用这里的默认配置
    globe.loadPlugin(planetaryjs.plugins.pings({
        color: "yellow", ttl: 2000, angle: 3
    }))
    //加载亮点
    addPingsThing();
    //页面中加载globe的大小和位置
    globeLcation();
    //绘制globe的cavas
    globe.draw(canvas);
    //地球旋转的初始位置
    globe.projection.rotate(China);
    //监听窗口大小变化
    window.addEventListener("resize", () => globeLcation());
}

下面的几个函数都在上述初始化函数initGlobe()中进行了调用和配置。

3、自定义autorotate插件，配置地球旋转角度函数

function autorotate(dps) {
    return function (planet) {
        var lastTick = null;
        var paused = false;
        planet.plugins.autorotate = {
            //为后面的按空格键暂停功能做准备
            pause: function () {
                paused = true;
            },
            resume: function () {
                paused = false;
            },
            ispaused: function () {
                return paused;
            }
        };

        //并将钩子配置到其生命周期的某些部分。
        planet.onDraw(function () {
            if (paused || !lastTick) {
                lastTick = new Date();
            } else {
                var now = new Date();
                var delta = now - lastTick;
                //此插件使用内置投影（由D3提供）
                //每次我们画地球仪时都要旋转。
                var rotation = planet.projection.rotate();
                rotation[0] += dps * delta / 1000;

                if (rotation[0] >= 180)
                    rotation[0] -= 360;

                planet.projection.rotate(rotation);
                lastTick = now;
            }
        });
    };
};

4、加载json文件中的经纬度点函数

function addPingsThing() {
    //数据点在data文件夹下的life.json文件中
    d3.json("data/life.json", (error, data) => {
        if (error) return console.error(error);
            setInterval(() => {
                for (const point of data.life) {
                    globe.plugins.pings.add(经度, 维度, { color: "white",ttl: 3000, angle: 5 });
                }
            }, 3000);
    })
}

5、动态改变生成地球的大小和位置

通过监听监听窗口大小，动态改变生成地球的大小和位置。其目的是，自动适配手机端和PC端的显示器。

function globeLcation() {
    const vw = window.innerWidth;
    //返回较大的那个值，通过下列式子 转换成了最大值为500，最小值为300
    const diam = Math.max(300, Math.min(500, vw - (vw * .6)));
    const radius = diam / 2;
    canvas.width = diam;
    canvas.height = diam;
    globe.projection.scale(radius).translate([radius, radius]);
    var vpx = -0.2 * diam + 220;
    $(".visitor-body").css("padding-top", vpx + "px");
    $(".visitor-body").css("padding-bottom", vpx + "px");
}

6、监听空格键。

按下时地球停滞在中国上方。再次按下空格，继续转动。

/**
 * 监听空格键，按下时地球停在中国上方
 * 再次按下，继续转动
 */
$(document).keydown(function (event) {

    if (event.keyCode == 32) {
        var paused = globe.plugins.autorotate.ispaused();
        if (paused == false) {
            globe.projection.rotate([250, -20, 0]);
            globe.plugins.autorotate.pause();
        } else if (paused == true) {
            globe.plugins.autorotate.resume();
        }
        //去掉PC端固有的空格，下滑事件
        return false;
    }
});

后记

笔者的个人网站主页是：https://www.zksky.top/。
想看笔者实现的简单效果的朋友，欢迎访问！