首页 文章

Openlayers的问题

提问于
浏览 次
-2

我正在开发基于Openlayers的应用程序 . 它基本上渲染图像，用户可以通过鼠标点击动作在图像上绘制线条，多边形等几何特征 .

我必须实现一种功能，其中用户可以通过移动滑块来改变图像亮度 .

我按照this link.I将我的像素操作代码放在方法'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;
}

因此，现在从2个场景调用此方法：一，当用户对滑块执行操作（ctx参数未定义）时，第二，当用户对图像执行某些操作时，如鼠标单击图像（定义了ctx参数） .

'if'在方法开始时需要阻止来解决如果单击图像（即使用有效的ctx）原始亮度恢复的问题 . 因此，我跟踪更改像素数据（currentImageData），如果使用有效的ctx进行调用，我只需将当前像素数据（currentImageData）放入ctx并渲染 Map 并返回 .

注意：这给我的印象是，来自'postcompose'上下文的调用尝试恢复原始像素数据 . 但我不确定 .

现在我遇到这个代码的问题：如果用户点击图像，图像上的几何特征有点复制 . 现在，每个功能都由另一个类似功能覆盖 . 如果图像被平移，则可以看到重复的特征（图像附加） .

Duplicate features

我在这里犯的错是什么？

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

openlayers

1 回答

  • 0

    我怀疑你真的想要的是淡化或强化图像，保持颜色之间的比例 . 这可以在没有单独像素操纵的情况下完成

    如果你从不希望图层比它的自然状态更亮，你可以简单地淡化它使用 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';
});

    屏幕截图显示背景= 192（正常的一半）顶部和背景= 0（黑色背景混合提供最大增加的强度）底部

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

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

    回复于

相关问题