Vue+Openlayers+elcheckboxgroup实现多选图层的显示与隐藏

场景

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122203044

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

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

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

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