博客支持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);
        });
    }