場景

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