提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

Planetary.js 旋转地球插件

JS插件 旋转 地球
2023-06-13 09:17:08 时间

Planetary.js 是一款生成可交互地球模型的插件。

简介

特点

  • 完全可定制，包括颜色，旋转等等
  • 在任何具有自定义颜色和大小的位置显示动画
  • 支持鼠标拖动+缩放操作
  • 可扩展的基于插件的架构

效果展示

  • 先看效果吧

(function() { var canvas = document.getElementById('quakeCanvas'); // Create our Planetary.js planet and set some initial values; // we use several custom plugins, defined at the bottom of the file var planet = planetaryjs.planet(); planet.loadPlugin(autocenter({extraHeight: -120})); planet.loadPlugin(autoscale({extraHeight: -120})); planet.loadPlugin(planetaryjs.plugins.earth({ topojson: { file: 'https://101.43.39.125/HexoFiles/js/planetaryjs/world-110m.json' }, oceans: { fill: '#001320' }, land: { fill: '#06304e' }, borders: { stroke: '#001320' } })); planet.loadPlugin(planetaryjs.plugins.pings()); 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(autorotate(5)); planet.projection.rotate([100, -10, 0]); planet.draw(canvas); // Plugin to resize the canvas to fill the window and to // automatically center the planet when the window size changes function autocenter(options) { options = options || {}; var needsCentering = false; var globe = null; var resize = function() { var width = window.outerWidth /2 + (options.extraWidth || 0); var height = window.outerHeight/2 + (options.extraHeight || 0); globe.canvas.width = width; globe.canvas.height = height; globe.projection.translate([width / 2, height / 2]); }; return function(planet) { globe = planet; planet.onInit(function() { needsCentering = true; d3.select(window).on('resize', function() { needsCentering = true; }); }); planet.onDraw(function() { if (needsCentering) { resize(); needsCentering = false; } }); }; }; // Plugin to automatically scale the planet's projection based // on the window size when the planet is initialized function autoscale(options) { options = options || {}; return function(planet) { planet.onInit(function() { var width = window.innerWidth / 2 + (options.extraWidth || 0); var height = window.innerHeight / 2 + (options.extraHeight || 0); planet.projection.scale(Math.min(width, height) / 2); }); }; }; // Plugin to automatically rotate the globe around its vertical // axis a configured number of degrees every second. 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; } }); }; }; })();

核心 js 与 json 文件下载

  • 核心 js 有三个，名字叫 d3.v3.min.js、topojson.v1.min.js 和 planetaryjs.min.js
  • 需要使用的文件名字叫 world-110m.json
  • planetaryjs.min.js可以在官网下载：http://planetaryjs.com/download/
  • 另外两个 js 文件我是从 github 上面知道了地址自己扒下来的，两个带 http 开头的文件就是了

12345678910111213141516

Quick StartYou'll need to run this page from a web server of some kind so that Planetary.js can load the TopoJSON data via Ajax.HTML:<html><head> <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script> <script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script> <script type='text/javascript' src='planetaryjs.min.js'></script></head><body> <canvas id='globe' width='500' height='500'></canvas> <script type='text/javascript' src='yourApp.js'></script></body></html>

使用方法

  • 拿到文件后可以放在静态网页的某个文件夹，也可以放到自己的图床里，也可以直接引用原始的 js 文件，总之可以访问到就可以
  • 注意 ：直接本地运行是不能显示地球的，需要在 web 服务器上才能正确显示。

官网 demo

1234567891011

<html><head> <script type='text/javascript' src='https://101.43.39.125/HexoFiles/js/planetaryjs/d3.v3.min.js'></script> <script type='text/javascript' src='https://101.43.39.125/HexoFiles/js/planetaryjs/topojson.v1.min.js'></script> <script type='text/javascript' src='https://101.43.39.125/HexoFiles/js/planetaryjs/planetaryjs.min.js'></script></head><body> <canvas id='globe' width='500' height='500'></canvas> <script type='text/javascript' src='yourApp.js'></script></body></html>

  • 在 web 服务器访问该页面
  • 这就是最简单的 demo 了

展示 demo

  • 我上文展示的 demo 本质上是官网的 demo ，但是其中有一点 bug，我做了修改
  • 代码如下：

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798

<canvas id='quakeCanvas'></canvas><script type='text/javascript' src='https://101.43.39.125/HexoFiles/js/planetaryjs/d3.v3.min.js'></script><script type='text/javascript' src='https://101.43.39.125/HexoFiles/js/planetaryjs/topojson.v1.min.js'></script><script type='text/javascript' src='https://101.43.39.125/HexoFiles/js/planetaryjs/planetaryjs.min.js'></script><script>(function() { var canvas = document.getElementById('quakeCanvas'); // Create our Planetary.js planet and set some initial values; // we use several custom plugins, defined at the bottom of the file var planet = planetaryjs.planet(); planet.loadPlugin(autocenter({extraHeight: -120})); planet.loadPlugin(autoscale({extraHeight: -120})); planet.loadPlugin(planetaryjs.plugins.earth({ topojson: { file: 'https://101.43.39.125/HexoFiles/js/planetaryjs/world-110m.json' }, oceans: { fill: '#001320' }, land: { fill: '#06304e' }, borders: { stroke: '#001320' } })); planet.loadPlugin(planetaryjs.plugins.pings()); 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(autorotate(5)); planet.projection.rotate([100, -10, 0]); planet.draw(canvas); // Plugin to resize the canvas to fill the window and to // automatically center the planet when the window size changes function autocenter(options) { options = options || {}; var needsCentering = false; var globe = null; var resize = function() { var width = window.outerWidth /2 + (options.extraWidth || 0); var height = window.outerHeight/2 + (options.extraHeight || 0); globe.canvas.width = width; globe.canvas.height = height; globe.projection.translate([width / 2, height / 2]); }; return function(planet) { globe = planet; planet.onInit(function() { needsCentering = true; d3.select(window).on('resize', function() { needsCentering = true; }); }); planet.onDraw(function() { if (needsCentering) { resize(); needsCentering = false; } }); }; }; // Plugin to automatically scale the planet's projection based // on the window size when the planet is initialized function autoscale(options) { options = options || {}; return function(planet) { planet.onInit(function() { var width = window.innerWidth / 2 + (options.extraWidth || 0); var height = window.innerHeight / 2 + (options.extraHeight || 0); planet.projection.scale(Math.min(width, height) / 2); }); }; }; // Plugin to automatically rotate the globe around its vertical // axis a configured number of degrees every second. 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; } }); }; };})();</script>

  • 之后可以加入数据来让他展示指定地球上的位置，说不定可以用来展示用户访问之类的

参考资料

相关文章