<template>
|
<div class="inner-panel">
|
<div class="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 }}
|
</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>
|
</div>
|
</div>
|
</el-scrollbar>
|
</div>
|
<lc-service-layer-filter v-if="layerFilterVisible" 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 },
|
data () {
|
return {
|
layerFilterVisible: false
|
}
|
},
|
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()
|
},
|
swFilter (item) {
|
this.layerFilterVisible = !this.layerFilterVisible
|
},
|
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 {
|
.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;
|
width: 100%;
|
}
|
.layerbox {
|
width: 100%;
|
.layerbox-item {
|
display: flex;
|
flex-flow: row wrap;
|
margin-left: 15px;
|
margin-top: 5px;
|
|
.basemap-layer-item {
|
width: 50%;
|
}
|
}
|
}
|
}
|
}
|
|
</style>
|
