一、插件下载
npm install planetaryjs - S
二、插件使用
import * as planetaryjs from 'planetary.js'
import fileJson from './data/world.json'
showEarth= ( ) = > {
var globe = planetaryjs. planet ( ) ;
globe. loadPlugin ( autorotate ( 20 ) ) ;
globe. loadPlugin ( planetaryjs. plugins. earth ( {
topojson: { file: fileJson} ,
oceans: { fill: 'rgba(190,190,190,0.5)' } ,
land: { fill: '#FFFAFA' } ,
borders: { stroke: '#FFFAFA' }
} ) ) ;
globe. loadPlugin ( planetaryjs. plugins. pings ( ) ) ;
globe. loadPlugin ( planetaryjs. plugins. zoom ( {
scaleExtent: [ 100 , 300 ]
} ) ) ;
globe. loadPlugin ( planetaryjs. plugins. drag ( {
onDragStart: function ( ) {
this. plugins. autorotate. pause ( ) ;
} ,
onDragEnd: function ( ) {
this. plugins. autorotate. resume ( ) ;
}
} ) ) ;
globe. projection. scale ( 240 ) . translate ( [ 300 , 300 ] ) . rotate ( [ 0 , - 10 , 0 ] ) ;
setInterval ( function ( ) {
var lat = Math. random ( ) * 170 - 85 ;
var lng = Math. random ( ) * 360 - 180
globe. plugins. pings. add ( lng, lat, { color: "red" , ttl: 2000 , angle: 2 } ) ;
} , 50 ) ;
var canvas = document. getElementById ( 'rotatingGlobe' ) ;
globe. draw ( canvas) ;
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;
}
} ) ;
} ;
} ;
}
三、world.json文件获取
方式1:你可以直接通过调用接口获取:http://planetaryjs.com/world-110m-withlakes.json,该方式有可能会跨域,所以你要处理下跨域问题才能正常得到数据 方式2:直接本地保存一份,但这种方式需要对planetary.js原代码进行一些改动,改动如下:
planet. onInit ( function ( done) {
if ( config. world) {
planet. plugins. topojson. world = config. world;
setTimeout ( done, 0 ) ;
} else {
var file = config. file || 'world-110m.json' ;
console. log ( 'file' , file) ;
planet. plugins. topojson. world = file;
done ( ) ;
}
} ) ;
四、最终效果展示