将不透明度滑块添加到 Openlayers 地图

Question

使用这行代码为栅格图层添加不透明度滑块非常简单：

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

但这并不整洁，因为滑块位于地图上方。

如何在地图上插入滑块（水平或垂直）来控制图层的不透明度，使其看起来与其他地图控件相似？有插件吗？

谢谢。

Answer 1

您可以使用 jQuery 滑块。示例如下：

$("#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/

希望对您有所帮助:)

Answer 2

在我的 jsfiddle 中，我将滑块放置在适当的 openlayers 自定义控件中：

const sliderita = document.createElement('div');
sliderita.className = 'ol-control ol-unselectable slider';
sliderita.innerHTML = '<div id="sliderOSM"> <div id="custom-handle" class="ui-slider-handle"></div></div>';
map.addControl(new ol.control.Control({element: sliderita}));

https://jsfiddle.net/5w6sahx4/5/

将不透明度滑块添加到 Openlayers 地图

Adding an opacity slider to an Openlayers map

javascript

openlayers-3