<template>
|
<div class="inner-panel">
|
<div class="panel-title"> 图层控制 </div>
|
<div class="wms-panel">
|
<el-scrollbar class="wms-panel-scrollbar">
|
<div v-for="item in serviceLayers" :key="item.code" class="layerbox">
|
<i class="downUp el-icon-caret-bottom" @click="item.isShow=!item.isShow" :class="item.isShow?'':'active'" ></i><!-- el-icon-arrow-down -->
|
<!-- 一级图层遍历 -->
|
<div style="padding-left:25px;padding-top:10px;color:#fff;font-size: 16px;">
|
<input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item,'')"/>{{ item.name }}
|
</div>
|
<div class="layerbox-item" v-show="item.isShow">
|
<!-- 二级图层遍历 -->
|
<div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code">
|
<input type="checkbox"
|
:name="'wmsSublayers_'+item.code+'_'+itm.code"
|
:checked="itm.checked"
|
:value="itm.code"
|
@change="swAllLayers(itm,item.name)"/>{{ itm.name }}
|
<!-- 三级图层遍历 -->
|
<div class="layerbox-item-3">
|
<div class="basemap-layer-item" v-for="layer in itm.layers" :key="layer.code">
|
<input type="checkbox"
|
:name="'wmsSublayers_'+item.code+'_'+layer.code"
|
:checked="layer.checked"
|
:value="layer.code"
|
@change="swAllLayers(layer,'')"/>
|
<span :style="'color:'+layer.color">{{ layer.name }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-scrollbar>
|
</div>
|
<lc-service-layer-filter ref="serviceLayerFilter"></lc-service-layer-filter>
|
</div>
|
</template>
|
|
<script>
|
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
|
import bus from '@/eventBus'
|
export default {
|
name: 'LcServiceLayer',
|
components: { LcServiceLayerFilter },
|
computed: {
|
serviceLayers () {
|
return this.$store.state.map.serviceLayers.LayerSewersLine
|
}
|
},
|
mounted () {
|
},
|
methods: {
|
swAllLayers (item, v) {
|
// eslint-disable-next-line no-debugger
|
item.checked = !item.checked
|
this.toggleLayer(item)
|
this.swLayers(item.layers, item.checked)
|
if (v === '专题图层') {
|
bus.$emit('changeSearchBar', item)
|
}
|
},
|
swLayers (layers, checked) {
|
if (layers) {
|
for (let i = 0, len = layers.length; i < len; ++i) {
|
var layer = layers[i]
|
layer.checked = checked
|
this.toggleLayer(layer)
|
if (layer.layers) {
|
this.swLayers(layer.layers, checked)
|
}
|
}
|
}
|
},
|
toggleLayer (itm) {
|
if (itm.checked) {
|
window.layerFactory.show(itm)
|
} else {
|
window.layerFactory.hide(itm)
|
}
|
// this.updateWms()
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.inner-panel {
|
.btn-filter {
|
cursor: pointer;
|
color: #ffffff;
|
}
|
|
.wms-panel {
|
|
.wms-panel-scrollbar{
|
height: 457px;
|
width: 285px;
|
//width: 2.5rem;
|
font-size: 14px;
|
}
|
.layerbox {
|
width: 100%;
|
position: relative;
|
.downUp{
|
position: absolute;
|
top:3px;
|
left: -2px;
|
height: 30px;
|
width: 30px;
|
text-align: center;
|
line-height: 30px;
|
cursor: pointer;
|
font-size: 20px;
|
transition: all 1.5s;
|
}
|
.downUp.active{
|
transform: rotate(-90deg);
|
}
|
.downUp:hover{font-size: 26px;font-weight: 900}
|
.layerbox-item {
|
padding-left: 30px;
|
padding-top: 5px;
|
.basemap-layer-item {
|
margin-bottom: 5px;
|
input[type="checkbox"]{width:10px;height:10px;display: inline-block;text-align: center;vertical-align: middle; line-height: 10px;position: relative;}
|
input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
|
input[type="checkbox"]:checked::before{content: "\2713";background-color: @color-highlight;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #fff700;color:@background-color;font-size: 10px;font-weight: bold;}
|
|
}
|
}
|
.layerbox-item-3{
|
padding-left: 20px;
|
padding-top: 5px;
|
display: flex;
|
flex-wrap: wrap;
|
.basemap-layer-item{width: 50%}
|
}
|
}
|
}
|
}
|
|
</style>
|
