前言(背景):
最近,笔者的个人网站的搭建接近完成,其中用到了一个比较有趣的插件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/。
想看笔者实现的简单效果的朋友,欢迎访问!
注:
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名,转载请标明出处。