<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";
|
import WmsHelper from "../../helpers/WmsHelper";
|
|
var wmsHelper = new WmsHelper()
|
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() {
|
var mapConfig = this.mapConfig
|
wmsHelper.initMapConfig(mapConfig)
|
var wmsLayersMap = wmsHelper.getWmsLayersMap()
|
//var filterURL = wmsHelper.getFilterURL()
|
console.log(wmsLayersMap)
|
for (var k in wmsLayersMap) {
|
var layers = wmsLayersMap[k]
|
var tileLayer = this.serviceLayerHelper.getTileLayer(k)
|
if (tileLayer) {
|
tileLayer.setParams({layers: layers}, true)
|
}
|
}
|
}
|
},
|
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>
|
