专题图层设置透明度步骤
首先.勾销各个图层的单选机制，能够任意多选
rightData: [{ title: '2021版', key: 1, level: 0, children: [ { title: '专题图层', key: "21", disabled: true, level: 1, children: [{ title: '舞动', key: '2_WD', level: 2, value: 'WD', multiSelect: true, }, { title: '污区', key: "251", disabled: true, level: 2, children: [{ title: '污区', key: '2_WQ', level: 2, value: 'WQ', multiSelect: true, }, { title: '人口密度', key: '2_RKMD', value: 'RKMD', level: 2, multiSelect: true, }, ] }, { title: '山火', key: "201", disabled: true, level: 2, children: [{ title: '山火', key: '2_SH', level: 3, value: 'SH', multiSelect: true, }, { title: '植被信息', key: '2_ZB', value: 'ZB', level: 3, multiSelect: true, } ] }, ] } ] }],给每一个须要多选的树数据加上multiSelect: true这个属性，这样就能够多选了，详情请移步antdesignVue官网
1.获取以后用户勾选的图层是哪个
2.判断是专题图层还是根底图层
3.如果是专题图层
4.显示透明度拖拽条
以上是我本人干活时候写的伪代码，因为本人我的项目地图中不止有专题图层，还有别的不须要管制透明度的图层。贴在这里的目标也是心愿大家干活前先理顺思路，这样效率就会很快
5.将拖拽条值绑定到以后用户勾选的专题图层的透明度
5.1. 获取用户拖拽滑动条的实时的值
置信实时获取滑动条绑定的值不是什么难事，这里就间接贴代码了
<a-slider id="test" :tip-formatter="formatter" :default-value="100" :max="100" :min="0" @change="sliderChange" />sliderChange(val) { let opcity = val / 100 console.log('滑块变了------------值是：', opcity) },在翻阅大量文档的根底上（百度了一下），得悉了专题图有一个办法setOpacity()，属性传你想要批改的不透明度的值即可，也就是下面获取到的opcity
重难点在这一步
5.2 找到想要批改透明度的图层并去调用这个办法
找图层费了点劲，这个的话各个我的项目的状况可能都有所不同
还是贴代码吧
- 发现map组件中有个专题图对象,打印进去看看
- 打印后果如下
- 首先咱们确定了找到专题图的办法，这个ZB就是数据外面定义好的能够间接拿到，那么顺着这个对象点进去就能够拿到特定的layer了
- 上面咱们持续点进去看看
- 通过查找原型的形式，终于发现了这个办法，那么们就能够放心大胆地调用了
sliderChange(val) { let opcity = val / 100 let currentZzt = this.$refs.olMap.zttLayer[this.zztTypeFortransparence].layer currentZzt.setOpacity(opcity) },- 最终成果如下