将 webgl 地球画布的输出绘制到 2d 画布答案

【问题标题】：Draw the ouput of a webglearth canvas to a 2d canvas将 webgl 地球画布的输出绘制到 2d 画布
【发布时间】：2019-03-20 18:12:53
【问题描述】：

我正在尝试将运行 webglearth (http://www.webglearth.org/) 的画布的输出复制到标准的 2d 画布。我按照this问题的答案，但我只能看到画布的背景颜色。

我的代码是：

<html>
<body>
    <div id="earthDiv" style="background-color:rgba(255,0,255,0.5); width:500px; height: 500px;"></div>
    <canvas id="canvas" style="background-color:rgba(0,255,0,0.5); width:500px; height: 500px;"></canvas>

    <script src="http://www.webglearth.com/v2/api.js"></script>

    <script type="text/javascript">
        window.onload = function () {

            var earth = new WE.map("earthDiv");
            var earthCanvas = earth.canvas;
            var earthContext = earthCanvas.getContext("webgl", {
                preserveDrawingBuffer: true,
            });

            WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(earth);

            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            setInterval(function () {
                context.drawImage(earthContext.canvas, 0, 0);
            }, 1000);
        };
    </script>
</body>
</html>

【问题讨论】：

标签： javascript html canvas webgl webgl-earth

【解决方案1】：

原来这是一个问题： https://github.com/webglearth/webglearth2/issues/104 ，第一次获取画布的上下文时需要“preserveDrawingBuffer: true”。

可以通过修改来解决

 Cesium.Scene({
            canvas: this.canvas,
            contextOptions: { webgl: { alpha: !0 !== c.sky } }
        });

在http://www.webglearth.com/v2/api.js 到

Cesium.Scene({
            canvas: this.canvas,
            contextOptions: { webgl: { alpha: !0 !== c.sky, preserveDrawingBuffer: true } }
        });

（然后将其保存并用作本地文件）。

可以通过使用

获取 png 图像来解决此问题

earth.getScreenshot(function(dataUrl) {...}))

（见 https://github.com/webglearth/webglearth2/issues/60)

然而 png 方法的表现并不令人惊讶。

【讨论】：

欢迎来到stackoverflow。请把答案放在答案本身中。不要只链接到其他地方的答案。谢谢！