[英]How to draw over existing drawn canvas element?
I have an OpenLayers map which has WMS layers with time steps.我有一个 OpenLayers 地图,其中包含带有时间步长的 WMS 图层。 I am trying to create a loop which updates the time on each step and once rendered it saves the image.我正在尝试创建一个循环来更新每个步骤的时间,并且一旦呈现它就会保存图像。 Currently I have taken from the official OpenLayers documentation which creates a canvas element which then is populated by the map element.目前,我从官方OpenLayers 文档中获取,该文档创建了一个画布元素,然后由地图元素填充。 I have a loop that seems to work but it keeps downloading only the first step (even though I know my update time function works).我有一个似乎有效的循环,但它只继续下载第一步(即使我知道我的更新时间功能有效)。
mapToCanvasList: function () {
for(let i = 0 ; i < 10 ; i++)
{
this.renderflag = false;
this.setTimeSurface10();
this.map.renderSync();
this.myCallback();
this.map.on('rendercomplete', this.flagCallback());
if (this.renderflag) continue;
}
},
flagCallback: function () {
this.renderflag = true;
},
myCallback: function () {
this.renderflag = false
var mapCanvas = document.createElement('canvas');
var divElement = document.querySelector(".map");
mapCanvas.width = divElement.offsetWidth;//size[0];
mapCanvas.height = divElement.offsetHeight;//size[1];
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(
document.querySelectorAll('.ol-layer canvas'),
function (canvas) {
if (canvas.width > 0) {
const opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
const transform = canvas.style.transform;
const matrix = transform
.match(/^matrix\(([^\(]*)\)$/)[1] //eslint-disable-line
.split(',')
.map(Number);
CanvasRenderingContext2D.prototype.setTransform.apply(mapContext,matrix);
mapContext.drawImage(canvas, 0, 0);
}
}
);
this.gif.addFrame(mapCanvas, {copy:true, delay: 200});
mapCanvas.remove();
this.renderflag = true;
},
setTimeSurface10: function () {
if (this.currentTimeSurface10 === null) {
this.currentTimeSurface10 = this.startTimeSurface10;
} else if (this.currentTimeSurface10 >= this.endTimeSurface10) {
this.currentTimeSurface10 = this.startTimeSurface10;
} else {
this.currentTimeSurface10 = new Date(
this.currentTimeSurface10.setMinutes(this.currentTimeSurface10.getMinutes() + 60)
);
}
this.surface10.getSource().updateParams({ TIME: this.currentTimeSurface10.toISOString().split(".")[0] + "Z" });
}
ol-ext extension has a ol/control/VideoRecorder
to save maps as a video: https://viglino.github.io/ol-ext/examples/misc/map.control.videorecorder.html ol-ext 扩展有一个ol/control/VideoRecorder
可以将地图保存为视频: https : ol/control/VideoRecorder
You can dig in the code to see own it runs.您可以深入代码以查看自己的运行情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.