將不透明度 slider 添加到 Openlayers map

Question

使用這行代碼可以直接為柵格圖層添加不透明度 slider：

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

但這是不整潔的，因為 slider 位於 map 之上。

如何將 slider（水平或垂直）插入 map 以控制圖層的不透明度，使其看起來與其他 map 控件相似？ 有插件嗎？

謝謝。

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 中，我 position slider 在適當的 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/