将 webgl earth canvas 的输出绘制到 2d canvas
Draw the ouput of a webglearth canvas to a 2d canvas
我正在尝试复制 canvas 运行 webglearth 的输出(http://www.webglearth.org/) to a standard 2d canvas. I followed the answer to this 问题,但我只能看到 canvas 的背景颜色。
我的代码是:
<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>
事实证明这是一个问题:
https://github.com/webglearth/webglearth2/issues/104 ,其中 canvas 的上下文在第一次获取时需要 "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 方法的表现并不令人惊讶。
我正在尝试复制 canvas 运行 webglearth 的输出(http://www.webglearth.org/) to a standard 2d canvas. I followed the answer to this 问题,但我只能看到 canvas 的背景颜色。
我的代码是:
<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>
事实证明这是一个问题: https://github.com/webglearth/webglearth2/issues/104 ,其中 canvas 的上下文在第一次获取时需要 "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 方法的表现并不令人惊讶。