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修改图层透明度的更多相关文章

  1. vue 修改数据界面没有及时更新nextTick

    使用场景:有些时候,我们使用vue修改了一些数据,但是页面上的DOM还没有更新,这个时候我们就需要使用到nextTick. vm.$nextTick( [callback] ) 说明: 将回调延迟到下 ...

  2. vue修改端口号

    vue修改端口号   默认端口号 修改端口号 重新启动项目 npm run dev        

  3. vue修改数组元素方法

    示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  4. AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层

    AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层 AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层我理解的图层的作用大概是把 ...

  5. CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)

    一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通 ...

  6. vue修改对象的属性值后页面不重新渲染

    原文地址:vue修改对象的属性值后页面不重新渲染 最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: [html] view plain copy &l ...

  7. Vue 修改成功之后我做了什么

    Vue 修改成功之后我做了什么 背景:前端将修改的数据传递到后端,后端返回成功之后,我们要将数据及时显示出来. 霸道方法一:重新请求接口 柔和方法二:修改成功之后的数据传递到源数据中,进行双向绑定显示 ...

  8. vue修改elementUI的分页组件视图没更新问题

    转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...

  9. 修改图层的symbol(AE+C#)

    取出一个图层的symbol 在其基础上对其进行修改 private void button1_Click(object sender, EventArgs e)        {  mp;nbsp;  ...

随机推荐

  1. db2 事务日志

    曾经因为对DB2 的 NOT LOGGED INITIALLY 属性认识不足而吃了亏.当时需要往表中插入大量的数据,最初也没有考虑太多就使用了传统的insert 命令,由于数据量实在过于巨大,而且系统 ...

  2. Git:本地建服务器及入门使用方法

    1. 安装与配置Git服务器 sudo apt-get install git 1.1 注册一个git账号, 用于运行和维护git sudo adduser git 1.2 创建证书登录: 收集所有需 ...

  3. 虚拟机搭建和安装Hadoop及启动

    马士兵hadoop第一课:虚拟机搭建和安装hadoop及启动 马士兵hadoop第二课:hdfs集群集中管理和hadoop文件操作 马士兵hadoop第三课:java开发hdfs 马士兵hadoop第 ...

  4. iOS 7 UI 过渡指南 - 開始之前(iOS 7 UI Transition Guide - Before You Start)

    iOS 7 UI Transition Guide Preparing for Transition Before You Start Scoping the Project Supporting i ...

  5. android:Button控件

    Button 是程序用于和用户进行交互的一个重要控件,相信你对这个控件已经是非常熟悉 了,因为我们在上一章用了太多次 Button.它可配置的属性和 TextView 是差不多的,我们 可以在 act ...

  6. windows 2003 iis 360防黑加固后不能使用

    最近在使用360的防黑加固加固2003系统,发现IIS居然不能够使用了,报401.1错误,查找解决方案如下: 1.我的电脑-〉属性-〉管理-〉本地用户和组,查看IUSER用户是否开启,如果未开启开启后 ...

  7. Recover database using backup controlfile until cancel

    http://searchoracle.techtarget.com/answer/Recover-database-using-backup-controlfile-until-cancel Wha ...

  8. Load 和 DOMContentLoaded 区别

    Load 事件触发代表页面中的 DOM,CSS,JS,图片已经全部加载完毕. DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析,不需要等待 CSS,JS,图片加载.

  9. 【CLR】解析AppDomain

    目录结构: contents structure [+] 什么是AppDomain 跨越AppDomain边界访问对象 按引用封送(Marshal-by-Reference) 按值封送(Marshal ...

  10. Lua:Nginx Lua环境配置,第一个Nginx Lua代码

    一.编译安装LuaJIT Lua:编译安装LuaJIT,第一个Lua程序 http://blog.csdn.net/guowenyan001/article/details/48250427 二.下载 ...