<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" :value="item.code" @change="swAllLayers"/>{{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" :value="item.code" @change="swAllLayers"/>{{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;
|
},
|
}),
|
},
|
mounted() {
|
// console.log('03步骤：', this.helper)
|
},
|
methods: {
|
...mapMutations([]),
|
swAllLayers(){
|
|
},
|
swTileLayer(){
|
console.log('该TILE方法未实现！')
|
},
|
swWmtsLayer(){
|
console.log('该WMTS方法未实现！')
|
},
|
swWmsLayer(){
|
|
},
|
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)
|
}
|
}
|
}
|
},
|
watch: {
|
serviceLayerHelper(newVal) {
|
if (newVal != null) {
|
this.updateServiceLayerList();
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.inner-panel {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.wms-panel{
|
display:flex;
|
flex-flow: column;
|
.layerbox{
|
width: 100%;
|
display:flex;
|
flex-flow: column;
|
|
.layerbox-item{
|
display:flex;
|
flex-flow: row;
|
.basemap-layer-item{
|
width: 50%;
|
}
|
}
|
}
|
}
|
}
|
|
</style>
|
