【GIS】Vue修改图层透明度

时间:2023-03-09 07:57:36
【GIS】Vue修改图层透明度

1、添加透明度控制条

    <input
id="slider"
type="range"
min="0"
max="1"
step="0.1"
value="1"
v-model="opacity"
@input="changeOpactiy"
>

2、在export default的data中加入观测值

export default {
data() {
return {
opacity: 1}
}
}

3、添加事件

      var value = this.opacity;
this.leftLayer ? this.leftLayer.setOpacity(value) : "";

4、添加图层

leftLayer 即为图层
采用L.tileLayer.wms添加图层
var envLayer = L.tileLayer
.wms(Url, {
layers: layers,
format: "image/png",
transparent: true,
version: "1.3.0",
crs: L.CRS.EPSG3857
})
.addTo(map);

5、效果

【GIS】Vue修改图层透明度