<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">
|
<!-- 一级图层遍历 -->
|
<div style="padding-left:10px;padding-top:10px">
|
<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="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)"/>{{ layer.name }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-scrollbar>
|
</div>
|
<lc-service-layer-filter ref="serviceLayerFilter"></lc-service-layer-filter>
|
</div>
|
</template>
|
|
<script>
|
import WfsHelper from '../../helpers/WfsHelper'
|
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
|
import AjaxUtils from '../../../utils/AjaxUtils'
|
|
export default {
|
name: 'LcServiceLayer',
|
components: { LcServiceLayerFilter },
|
computed: {
|
serviceLayers () {
|
return this.$store.state.map.serviceLayers.LayerSewersLine
|
}
|
},
|
mounted () {
|
// console.log('03步骤：', this.helper)
|
this.updateServiceLayerList()
|
},
|
methods: {
|
swAllLayers (item) {
|
// eslint-disable-next-line no-debugger
|
item.checked = !item.checked
|
for (let i = 0, len = item.layers.length; i < len; ++i) {
|
item.layers[i].checked = item.checked
|
}
|
this.updateWms()
|
},
|
loadWfs () {
|
var wfsHelper = new WfsHelper()
|
wfsHelper.addTypeName('管线点')
|
wfsHelper.addEquals('pipename', '研究院01路YS000001')
|
|
AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => {
|
console.log(res)
|
})
|
},
|
swWmsLayer (itm) {
|
itm.checked = !itm.checked
|
if (itm.checked) {
|
window.layerFactory.show(itm)
|
} else {
|
window.layerFactory.hide(itm)
|
}
|
// this.updateWms()
|
},
|
updateServiceLayerList () {
|
|
},
|
updateWms () {
|
var mapConfig = this.mapConfig
|
var wmsHelper = new WfsHelper()
|
wmsHelper.initMapConfig(mapConfig)
|
var wmsLayersMap = wmsHelper.getWmsLayersMap()
|
for (var k in wmsLayersMap) {
|
var layers = wmsLayersMap[k]
|
var tileLayer = window.serviceLayerHelper.getTileLayer(k)
|
if (tileLayer) {
|
tileLayer.setParams({ layers: layers.join(',') }, false)
|
tileLayer.setUrl(tileLayer.config.url, false)
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.inner-panel {
|
.btn-filter {
|
cursor: pointer;
|
color: #ffffff;
|
}
|
|
.wms-panel {
|
|
.wms-panel-scrollbar{
|
height: 457px;
|
width: 100%;
|
font-size: 14px;
|
}
|
.layerbox {
|
width: 100%;
|
.layerbox-item {
|
padding-left: 30px;
|
padding-top: 5px;
|
.basemap-layer-item {
|
margin-bottom: 5px;
|
}
|
}
|
.layerbox-item-3{
|
padding-left: 20px;
|
padding-top: 5px;
|
display: flex;
|
flex-wrap: wrap;
|
.basemap-layer-item{width: 50%}
|
}
|
}
|
}
|
}
|
|
</style>
|
