openlayers图层透明度

前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。
     本人不是专业GIS开发，只是记录，方便后续查找。

参考资料：
openlayers官网：https://openlayers.org/
geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector
地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint/index.html

openlayers核心：Map对象、View视图、Layer图层、Source来源、Feature特征等

注：图层如何添加请参考 openlayers学习——7、openlayers加图层
这里不做过多展示和代码描述

透明度控件DOM

<input
  id="opacity-input" type="range" min="0" max="1"
  step="0.01" value="1" style="width: 150px;display: inline-block;margin-right: 10px;margin-left: 8px;vertical-align: bottom;"
>

监听该DOM

mounted () {
  // 改变了就触发，鼠标不用松开，change事件，鼠标需要松开才能触发
  document.getElementById('opacity-input').addEventListener('input', this.opacityChange)
}

设置透明度处理函数

// 透明度处理函数
// 核心就是图层对象的setOpacity方法
opacityChange () {
  if (this.layer) {
    this.layer.setOpacity(parseFloat(document.getElementById('opacity-input').value))
  }
}

效果如下