Planetary.js 旋转地球插件

为为为什么

发布于 2023-02-21 13:14:39

4.1K0

发布于 2023-02-21 13:14:39

文章被收录于专栏：又见苍岚又见苍岚

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

简介

Planetary.js 可以生成一个性能（UI）良好可交互的地球。
官网：http://planetaryjs.com/
Github：https://github.com/BinaryMuse/planetary.js

特点

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

效果展示

先看效果吧

核心 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 开头的文件就是了

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>

另外 world-110m.json 文件在 github 仓库里可以下载到 https://github.com/BinaryMuse/planetary.js/tree/master/dist

使用方法

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

官网 demo

github 仓库中有 demo 示例
https://github.com/BinaryMuse/planetary.js
配置好 js 文件后，在 index.html 文件中输入如下代码 (JS 文件地址可以换成自己的）：

<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，我做了修改
代码如下：

<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>