| | |
| | | <template> |
| | | <div class="inner-panel"> |
| | | <div class="title"> |
| | | 图层控制 |
| | | </div> |
| | | <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"> |
| | | <div> |
| | | <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item)"/>{{ item.name }} |
| | | <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"> |
| | | <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item)"/>{{ item.name }} |
| | | </div> |
| | | <div class="layerbox-item"> |
| | | <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="swWmsLayer(itm)"/>{{ 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="swWmsLayer(layer)"/> |
| | | <span :style="'color:'+layer.color">{{ layer.name }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-scrollbar> |
| | | </div> |
| | | <lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter> |
| | | <lc-service-layer-filter ref="serviceLayerFilter"></lc-service-layer-filter> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | export default { |
| | | name: 'LcServiceLayer', |
| | | components: { LcServiceLayerFilter }, |
| | | data () { |
| | | return { |
| | | layerFilterVisible: false |
| | | } |
| | | }, |
| | | computed: { |
| | | serviceLayers () { |
| | | return this.$store.state.map.serviceLayers.LayerSewersLine |
| | |
| | | } |
| | | // this.updateWms() |
| | | }, |
| | | swFilter (item) { |
| | | this.layerFilterVisible = !this.layerFilterVisible |
| | | }, |
| | | updateServiceLayerList () { |
| | | |
| | | }, |
| | |
| | | |
| | | <style scoped lang="less"> |
| | | .inner-panel { |
| | | .title{ |
| | | color: #ffffff; |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | margin: 10px; |
| | | text-align: center; |
| | | } |
| | | .btn-filter { |
| | | cursor: pointer; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | .wms-panel { |
| | | width: 1.79167rem; |
| | | |
| | | .wms-panel-scrollbar{ |
| | | height: 50vh; |
| | | height: 457px; |
| | | width: 100%; |
| | | 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 { |
| | | display: flex; |
| | | flex-flow: row wrap; |
| | | margin-left: 15px; |
| | | margin-top: 5px; |
| | | |
| | | padding-left: 30px; |
| | | padding-top: 5px; |
| | | .basemap-layer-item { |
| | | width: 50%; |
| | | margin-bottom: 5px; |
| | | } |
| | | } |
| | | .layerbox-item-3{ |
| | | padding-left: 20px; |
| | | padding-top: 5px; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | .basemap-layer-item{width: 50%} |
| | | } |
| | | } |
| | | } |
| | | } |