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

场景

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

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

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

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

 

注：

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

实现

1、页面添加el-checkbox-group

            
显示图层：
            
                {{layer}}
            

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