官网：http://planetaryjs.com
通用html文件：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--从官网下载js文件-->
<script type='text/javascript' src='d3.v3.min.js'></script>
<script type='text/javascript' src='topojson.v1.min.js'></script>
<script type='text/javascript' src='planetaryjs.min.js'></script>
<title>地球仪</title>
</head>
<body>
<canvas id='globe' width='500' height='500'></canvas>
<script type='text/javascript' src='index.js'></script>
</body>
</html>自定义index.js文件：
代码语言：javascript复制(function() {
var globe = planetaryjs.planet();
// 导入自定义旋转插件
globe.loadPlugin(autorotate(10));
// 导入json文件
// 设置海洋，大地，轮廓的颜色
globe.loadPlugin(planetaryjs.plugins.earth({
topojson: { file: 'world-110m-withlakes.json' },
oceans: { fill: '#000080' },
land: { fill: '#339966' },
borders: { stroke: '#008000' }
}));
// 导入自定义湖水插件
globe.loadPlugin(lakes({
fill: '#000080'
}));
// 导入ping插件
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(175).translate([175, 175]).rotate([0, -10, 0]);
// 在随机的点上ping
var colors = ['red', 'yellow', 'white', 'orange', 'green', 'cyan', 'pink'];
setInterval(function() {
var lat = Math.random() * 170 - 85;
var lng = Math.random() * 360 - 180;
var color = colors[Math.floor(Math.random() * colors.length)];
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
}, 150);
// 绘制地球
var canvas = document.getElementById('globe');
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;
}
});
};
};
// 自定义湖水插件
function lakes(options) {
options = options || {};
var lakes = null;
return function(planet) {
planet.onInit(function() {
var world = planet.plugins.topojson.world;
lakes = topojson.feature(world, world.objects.ne_110m_lakes);
});
planet.onDraw(function() {
planet.withSavedContext(function(context) {
context.beginPath();
planet.path.context(context)(lakes);
context.fillStyle = options.fill || 'black';
context.fill();
});
});
};
};
})();
