博客支持webgl 3D地球了
现在我们网站的主页支持在背景显示一个动态的地球了。而且上面还有实时的天气云图哦。
然后支持这个功能其实不需要做特别多的东西,主要是借鉴一个开源项目WebGlEarth2。开源地址:https://github.com/webglearth/webglearth2
这个是他们的API使用手册,和一些demo。https://sites.google.com/site/webglearth/
不过官网开始推荐一个更新功能更强大的开源项目cesium了。https://github.com/CesiumGS/cesium
由于webglearth2的功能已经足够强大了,所以没有升级到最新。效果还是蛮惊人的。
你可以通过网站的右下键的按钮来关闭3D地球的功能,和星空模式。
核心运行代码:
var earth;
var bRemove = false;
function initialize() {
var toggle = Cookies.get("earth_toggle");
if (toggle == "off") {
return;
}
var earth_sky = Cookies.get("earth_sky");
var options = {atmosphere: true, zoom: 5, sky: earth_sky=="true", dragging: true, scrollWheelZoom: false};
earth = new WE.map('earth_div', options);
earth.setView([46.8011, 48.2266], 3);
var nasaurl = 'https://tileserver.maptiler.com/nasa/{z}/{x}/{y}.jpg';//地球当前的贴图
WE.tileLayer(nasaurl, {
minZoom: 0,
maxZoom: 9,
attribution: 'NASA'
}).addTo(earth);
var url2 = 'https://tileserver.maptiler.com/nasa/weather/{z}/{x}/{y}.jpg';//当前的大气贴图
WE.tileLayer(url2, {
minZoom: 0,
maxZoom: 9,
attribution: 'NASA',
opacity: 0.6,
}).addTo(earth);
earth.setHeading(0);//一直朝向北方
earth.setAltitude(4272952.356193082);
earth.setPosition(10.903122678249053, 118.38346738829173);
earth.setZoom(4.236);//安静,不说话,2333
// Start a simple rotation animation
var before = null;
requestAnimationFrame(function animate(now) {
//var c = earth.getPosition();
var c = earth.getCenter();
var elapsed = before ? now - before : 0;
before = now;
earth.setCenter([c[0], c[1] - 0.1 * (elapsed / 30)]);
earth.setTilt(30);
if (bRemove) {
cancelAnimationFrame(animate);
return;
}
requestAnimationFrame(animate);
});
}