javascript - 向 Openlayers 贴图添加不透明度 slider

Question

使用以下代码行为栅格图层添加不透明度 slider 非常简单:

layer.setOpacity(this.value) to lyr_MyMapImage.setOpacity(this.value)

但是这很不整洁，因为 slider 位于 map 上方。

如何在 map 上插入 slider (水平或垂直)来控制图层的不透明度，使其看起来与其他 map 控件类似？有插件吗？

谢谢。

Answer 1

您可以使用 jQuery slider 。下面的例子:

$("#sliderLayer").slider({
    min: 0,
    max: 100,
    value: 100,
    slide: function(event, e) {
        lyr_MyMapImage.setOpacity(e.value / 100);
    },
    disabled: true
});

此外，这是 jsFiddle:

https://jsfiddle.net/Svinjica/L7edtgx3/19/

希望有帮助:)