<template>
|
<div class="inner-panel">
|
<div class="tile-panel">
|
<div v-for="item in serviceTileLayerList" :key="item.code"><input type="checkbox" :value="item.name" @change="swTileLayer"/></div>
|
</div>
|
<div class="wmts-panel">
|
<div v-for="item in serviceWmtsLayerList" :key="item.code"><input type="checkbox" :value="item.name" @change="swWmtsLayer"/></div>
|
</div>
|
<div class="wms-panel">
|
<div v-for="item in serviceWmsLayerList" :key="item.code" class="layerbox">
|
<div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item)"/>{{item.name}} <span @click="swFilter(item)" class="btn-filter">过滤</span></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.sname}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapState, mapMutations } from "vuex";
|
export default {
|
name: "LcServiceLayer",
|
components: {},
|
data() {
|
return {
|
selectedLineLayer: [], // 选中的管线图层
|
selectedSubsidiaryLayer: [], // 选中的附属要素
|
serviceTileLayerList: [], // Tile图层列表
|
serviceWmtsLayerList: [], // Wmts图层列表
|
serviceWmsLayerList: [] // 图层列表
|
};
|
},
|
computed: {
|
...mapState({
|
serviceLayerHelper: (state) => {
|
return state.serviceLayerHelper
|
},
|
mapConfig: (state) => {
|
return state.mapConfig
|
}
|
}),
|
},
|
mounted() {
|
// console.log('03步骤：', this.helper)
|
},
|
methods: {
|
...mapMutations(['setSelectedServiceLayer','toggleServiceLayerFilter']),
|
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()
|
|
console.log(this.mapConfig)
|
},
|
swTileLayer(){
|
console.log('该TILE方法未实现！')
|
},
|
swWmtsLayer(){
|
console.log('该WMTS方法未实现！')
|
},
|
swWmsLayer(itm){
|
itm.checked = !itm.checked
|
this.updateWms()
|
},
|
swFilter(item){
|
this.$store.commit('setSelectedServiceLayer', item.code)
|
this.$store.commit('toggleServiceLayerFilter')
|
},
|
updateServiceLayerList(){
|
// eslint-disable-next-line no-debugger
|
// debugger
|
let tileCfg = this.serviceLayerHelper.getTileLayers()
|
this.serviceTileLayerList = []
|
for(let i = 0,len = tileCfg.length; i < len; ++i) {
|
if(tileCfg[i].config.inLegend){
|
console.log(tileCfg[i])
|
}
|
}
|
let wmtsCfg = this.serviceLayerHelper.getWmtsLayers()
|
this.serviceWmtsLayerList = []
|
for(let i = 0,len = wmtsCfg.length; i < len; ++i) {
|
if(wmtsCfg[i].config.inLegend){
|
console.log(wmtsCfg[i])
|
}
|
}
|
let wmsCfg = this.serviceLayerHelper.getWmsLayers()
|
this.serviceWmsLayerList = []
|
for(let i = 0,len = wmsCfg.length; i < len; ++i) {
|
if(wmsCfg[i].config.inLegend){
|
this.serviceWmsLayerList.push(wmsCfg[i].config)
|
}
|
}
|
},
|
updateWms(){
|
|
}
|
},
|
watch: {
|
serviceLayerHelper(newVal) {
|
if (newVal != null) {
|
this.updateServiceLayerList();
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.inner-panel {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.btn-filter{
|
cursor: pointer;
|
}
|
.wms-panel{
|
display:flex;
|
flex-flow: column;
|
.layerbox{
|
width: 100%;
|
display:flex;
|
flex-flow: column;
|
|
.layerbox-item{
|
display:flex;
|
flex-flow: row wrap;
|
margin-left: 15px;
|
margin-top: 5px;
|
.basemap-layer-item{
|
width: 50%;
|
}
|
}
|
}
|
}
|
}
|
|
</style>
|
