关闭
星空
  • 我不去想是否能够成功
    既然选择了远方 便只顾风雨兼程

    我不去想能否赢得爱情
    既然钟情于玫瑰 就勇敢地吐露真诚

    我不去想身后会不会袭来寒风冷雨
    既然目标是地平线 留给世界的只能是背影

  • 知道为什么天妒英才吗? 因为没人去管笨蛋活了多久。

现在流的泪,都是当初脑子进的水。

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


标签webgl 3D地球

最新评论