Vue+Openlayers+el-checkbox-group實現多選圖層的顯示與隱藏
阿新 • • 發佈:2022-04-01
場景
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; } }); } },