场景
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
<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;
}
});
}
},版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136041.html
