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的cavasglobe.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，最小值为300const 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/。
想看笔者实现的简单效果的朋友，欢迎访问！