关于javascript:地图openLayer让用户自由设置专题图层的透明度antdesignVue

专题图层设置透明度步骤

首先. 勾销各个图层的单选机制，能够任意多选

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)
    },

• 最终成果如下
  

打完出工，又是秃头的一天