Vue+Openlayers+el-checkbox-group实现多选图层的显示与隐藏

╰+攻爆jí腚メ 2023-09-30 12:18 5阅读 0赞

## 场景 ##

Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏：

[Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏\_霸道流氓气质的博客-CSDN博客][Vue_Openlayers_el-checkbox_-CSDN]

上面通过el-checkbox以及图层点的setVisble属性为true或者false来实现图层的显示与隐藏。

也可以使用el-checkbox-group，代码逻辑使用switch判断的方式决定隐藏和显示。

![08243a3a1d4b41479e430f5979238cef.gif][]

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、页面添加el-checkbox-group

<p style="color:red">显示图层：</p>
                <el-checkbox-group v-model="checkedLayers" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="layer in showlayers" :label="layer" :key="layer">{
       {layer}}</el-checkbox>
                </el-checkbox-group>

2、声明绑定选项值数组

const layersOptions = ['点', '面'];
        export default {
            components: {},
            data() {
                return {
                    checkedLayers: ['点','面'],
                    showlayers: layersOptions,
                };
            },

3、实现其change事件

//选择图层显示改变事件
                handleCheckedCitiesChange(value) {
                    let self = this;
                    self.monitorPointLayer.setVisible(false);      
                    self.pointLayer.setVisible(false);
                    self.polygonLayer.setVisible(false);
                    if(value.length > 0){
                        //全部不显示
                        value.forEach(item =>{
                            debugger
                            switch(item){
                                case '点':
                                    self.monitorPointLayer.setVisible(true);
                                    break;
                                case '面':
                                    self.pointLayer.setVisible(true);
                                    self.polygonLayer.setVisible(true);
                                    break;
                            }
                        });
                    }
                },

[Vue_Openlayers_el-checkbox_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122203044
[08243a3a1d4b41479e430f5979238cef.gif]: https://img-blog.csdnimg.cn/08243a3a1d4b41479e430f5979238cef.gif
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi