Openlayers的问题
Openlayers的问题
提问于 2018-08-26 12:18:42
我正在开发一个基于Openlayers的应用程序。它基本上渲染一个图像，用户可以通过鼠标单击操作在图像上绘制几何特征，如线，多边形等。
我必须实现一个功能，其中用户可以通过移动滑块改变图像的亮度。
我关注了this链接，我已经将我的像素操作代码放在了一个名为“updateBrightness”的方法中，如链接所示。
imageLayer.on('postcompose', (event) => {
this.updateBrightness(this.currentBrightness, event.context);
});
updateBrightness(val, ctx) {
if(ctx && this.currentImageData){
ctx.putImageData(this.currentImageData, 0, 0);
this.map.render;
return;
}
var brightnessVar = val - this.currentBrightness;
this.currentBrightness = val;
var canvas = this.map.renderer_.canvas_;
var ctx = canvas.getContext('2d');
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height).data;
var output = ctx.createImageData(canvas.width, canvas.height);
var outputData = output.data;
console.log('Input length:' + imgData.length)
for (var i = 0; i < imgData.length; i += 4) {
outputData[i] = imgData[i] + brightnessVar;
if(outputData[i] > 255) {
outputData[i] = 255;
}
outputData[i + 1] = imgData[i + 1] + brightnessVar;
if(outputData[i + 1] > 255) {
outputData[i + 1] = 255;
}
outputData[i + 2] = imgData[i + 2] + brightnessVar;
if(outputData[i + 2] > 255) {
outputData[i + 2] = 255;
}
outputData[i + 3] = imgData[i + 3];
}
console.log('Output length:' + output.data.length)
ctx.putImageData(output, 0, 0);
this.map.render;
this.currentImageData = output;
}因此，此方法现在从两个场景中调用:第一，当用户操作滑块时(ctx参数未定义)；第二，当用户在图像上执行某些操作时，如鼠标单击图像(定义了ctx参数)。
如果在方法开始时需要“if”块，以解决如果图像被单击(即使用有效的ctx)，则恢复原始亮度的问题。因此，我跟踪变化的像素数据(CurrentImageData)，如果使用有效的ctx进行调用，我只需将当前像素数据(CurrentImageData)放入ctx中，然后呈现地图并返回。
注意:这给我的印象是，从“postcompose”上下文发出的调用试图恢复原始像素数据。但我不确定。
现在来看我在这段代码中遇到的问题:如果用户点击图像，图像上的几何特征就会被复制。现在，每个功能都被另一个类似的功能所覆盖。如果图像被平移，则可以看到重复的特征(附加图像)。
我在这里犯的错误是什么？
编辑:也引发了github的问题：Github issue
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52023146
复制相关文章
相似问题