<template>
|
<div class="inner-panel">
|
<div class="wms-panel">
|
<div v-for="item in mapConfig.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 }} <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>
|
<lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter>
|
</div>
|
</template>
|
|
<script>
|
import WmsHelper from '../../helpers/WmsHelper'
|
import AjaxUtils from '@/utils/AjaxUtils'
|
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
|
|
export default {
|
name: 'LcServiceLayer',
|
components: { LcServiceLayerFilter },
|
data () {
|
return {
|
layerFilterVisible: false
|
}
|
},
|
computed: {
|
mapConfig () {
|
return this.$store.state.map.mapConfig.mapConfig
|
}
|
},
|
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 () {
|
AjaxUtils.GetDataAsynByUrl('http://xearth.cn:6289/server/ogcserver/PipeLineTest/wfs?version=1.0.0&TYPENAME=pipeline&REQUEST=getfeature&OUTPUTFORMAT=json&maxFeatures=20000', {}, (res) => {
|
window.L.geoJSON(res).addTo(window.map)
|
})
|
},
|
swWmsLayer (itm) {
|
itm.checked = !itm.checked
|
this.updateWms()
|
},
|
swFilter (item) {
|
this.layerFilterVisible = !this.layerFilterVisible
|
},
|
updateServiceLayerList () {
|
|
},
|
updateWms () {
|
var mapConfig = this.mapConfig
|
var wmsHelper = new WmsHelper()
|
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 {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.btn-filter {
|
cursor: pointer;
|
color: #ffffff;
|
}
|
|
.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>
|
