Openlayers的问题

Question

我正在开发基于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参数）。 / p> 解决该问题的方法是：在方法开始时使用

'if'块，以解决以下问题：如果单击图像（即具有有效ctx的图像），则会恢复原始亮度。因此，我跟踪更改像素数据（currentImageData）的情况，如果使用有效的ctx进行调用，则只需将当前像素数据（currentImageData）放入ctx中，然后渲染地图并返回。

注意：这给我的印象是，从“后组合”上下文进行的调用尝试还原原始像素数据。但是我不确定。

现在遇到此代码所面临的问题：如果用户单击图像，则图像上的几何特征会重复。现在，每个功能都被另一个相似的功能覆盖。如果平移图像，则可以看到重复的功能（附加图像）。

Duplicate features

我在这里犯了什么错误？

编辑：也提出了github问题： Github issue

Answer 1

我怀疑您真正想要的是使图像褪色或增强强度，以保持颜色之间的比例。无需单独进行像素操作即可完成。

如果您不希望该图层比其自然状态更亮，则可以使用imageLayer.setOpacity()使其褪色。

如果您希望它既浓烈又褪色，可以使用强光混合色和灰色调来完成。

var background = 192;

imageLayer.on('precompose', function (evt) {
    evt.context.globalCompositeOperation = 'hard-light';
    evt.context.fillStyle = 'rgb(' + [background, background, background].toString() + ')';
    evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
});
imageLayer.on('postcompose', function (evt) {
    evt.context.globalCompositeOperation = 'source-over';
});

屏幕快照显示background = 192（正常值的一半）顶部和background = 0（黑色背景混合强度最大的底部）

您还可以结合使用从背景= 0到128（正常）的强光混合，然后从1（正常）到0（透明）的不透明度设置。

这是一个简单的工作演示http://mikenunn.16mb.com/demo/hardlight.htm