| | |
| | | </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><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.inLegend" :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" :value="item.code" @change="swAllLayers"/>{{itm.sname}}</div> |
| | | <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> |
| | |
| | | ...mapState({ |
| | | serviceLayerHelper: (state) => { |
| | | return state.serviceLayerHelper; |
| | | }, |
| | | } |
| | | }), |
| | | }, |
| | | mounted() { |
| | | // console.log('03步骤:', this.helper) |
| | | }, |
| | | methods: { |
| | | ...mapMutations([]), |
| | | swAllLayers(){ |
| | | |
| | | ...mapMutations(['setSelectedServiceLayer','toggleServiceLayerFilter']), |
| | | swAllLayers(item){ |
| | | // eslint-disable-next-line no-debugger |
| | | item.inLegend = !item.inLegend |
| | | for(let i = 0, len = item.layers.length; i < len; ++i){ |
| | | item.layers[i].checked = item.inLegend |
| | | } |
| | | this.updateWms() |
| | | }, |
| | | swTileLayer(){ |
| | | console.log('该TILE方法未实现!') |
| | |
| | | swWmtsLayer(){ |
| | | console.log('该WMTS方法未实现!') |
| | | }, |
| | | swWmsLayer(){ |
| | | |
| | | 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 |
| | |
| | | this.serviceWmsLayerList.push(wmsCfg[i].config) |
| | | } |
| | | } |
| | | }, |
| | | updateWms(){ |
| | | |
| | | } |
| | | }, |
| | | watch: { |
| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | |
| | | .btn-filter{ |
| | | cursor: pointer; |
| | | } |
| | | .wms-panel{ |
| | | display:flex; |
| | | flex-flow: column; |
| | |
| | | |
| | | .layerbox-item{ |
| | | display:flex; |
| | | flex-flow: row; |
| | | flex-flow: row wrap; |
| | | margin-left: 15px; |
| | | margin-top: 5px; |
| | | .basemap-layer-item{ |
| | | width: 50%; |
| | | } |
New file |
| | |
| | | <template> |
| | | <div class="inner-panel"> |
| | | <div class="filter-group"> |
| | | <div v-for="item in filterConfig" :key="item.code" class="filter-item"> |
| | | <div class="title"><input type="checkbox" :value="item.code">{{item.name}}</div> |
| | | <div class="content"> |
| | | <div v-for="filter in item.filters" :key="filter.code"> |
| | | <input type="checkbox" :value="filter.code"><label :title="filter.name">{{filter.sname}}</label> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapState, mapMutations } from "vuex"; |
| | | export default { |
| | | name: "LcServiceLayerFilter", |
| | | components: {}, |
| | | data() { |
| | | return { |
| | | filterConfig: [], // 附属要素 |
| | | }; |
| | | }, |
| | | computed: { |
| | | ...mapState({ |
| | | serviceLayerHelper: (state) => { |
| | | return state.serviceLayerHelper |
| | | }, |
| | | selectedServiceLayer: (state) => { |
| | | return state.selectedServiceLayer |
| | | }, |
| | | }), |
| | | }, |
| | | mounted() { |
| | | |
| | | }, |
| | | methods: { |
| | | ...mapMutations([]), |
| | | getFilterConfig(){ |
| | | return this.filterConfig |
| | | } |
| | | }, |
| | | watch: { |
| | | selectedServiceLayer(newVal){ |
| | | this.filterConfig = this.serviceLayerHelper.getWMSConfig(newVal).filtersGroup |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | .inner-panel { |
| | | color:#90c8e0; |
| | | font-size: 13px; |
| | | |
| | | position: absolute; |
| | | left: 250px; |
| | | bottom: 10px; |
| | | z-index: 1000; |
| | | height: 220px; |
| | | width: 500px; |
| | | |
| | | .filter-group{ |
| | | display: flex; |
| | | flex-flow: row; |
| | | |
| | | .filter-item{ |
| | | width: 120px; |
| | | height: 100%; |
| | | margin-right: 5px; |
| | | |
| | | .title{ |
| | | height: '25px'; |
| | | background-color: #091331; |
| | | border: 1px solid #10488c; |
| | | } |
| | | .content{ |
| | | background-color: rgba(44,62,80, 0.6); |
| | | border: 1px solid #10488c; |
| | | max-height: 200px; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | ::-webkit-scrollbar{ |
| | | width: 7px; |
| | | height: 5px !important; |
| | | } |
| | | ::-webkit-scrollbar-thumb { |
| | | /*滚动条里面小方块*/ |
| | | border-radius: 10px; |
| | | box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); |
| | | background : #0661AE; |
| | | border: 1px solid transparent; |
| | | } |
| | | ::-webkit-scrollbar-track { |
| | | /*滚动条里面轨道*/ |
| | | // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); |
| | | border-radius: 0px; |
| | | background : #0E3565; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | code:'rainline', |
| | | name:'雨水线', |
| | | sname:'雨水', |
| | | checked: true, // 默认选中状态 |
| | | filter:{} |
| | | }, |
| | | { |
| | | code:'rainline', |
| | | code:'oilline', |
| | | name:'含油污水线', |
| | | sname:'含油污水', |
| | | checked: true, // 默认选中状态 |
| | | filter:{} |
| | | }, |
| | | { |
| | | code:'rainline', |
| | | code:'saltline', |
| | | name:'含盐污水线', |
| | | sname:'含盐污水', |
| | | checked: true, // 默认选中状态 |
| | | filter:{} |
| | | }, |
| | | { |
| | | code:'rainline', |
| | | code:'alkaliline', |
| | | name:'含碱污水线', |
| | | sname:'含碱污水', |
| | | checked: true, // 默认选中状态 |
| | | filter:{} |
| | | }, |
| | | { |
| | | code:'rainline', |
| | | code:'outlet', |
| | | name:'排口', |
| | | sname:'排口', |
| | | checked: true, // 默认选中状态 |
| | | filter:{} |
| | | }, |
| | | { |
| | | code:'rainline', |
| | | code:'accidentline', |
| | | name:'事故水线', |
| | | sname:'事故水', |
| | | checked: true, // 默认选中状态 |
| | | filter:{} |
| | | }, |
| | | { |
| | | code:'rainline', |
| | | code:'loopline', |
| | | name:'循环水线', |
| | | sname:'循环水', |
| | | checked: true, // 默认选中状态 |
| | | filter:{} |
| | | }, |
| | | { |
| | | code:'rainline', |
| | | code:'purifyline', |
| | | name:'净化水线', |
| | | sname:'净化水', |
| | | checked: true, // 默认选中状态 |
| | | filter:{} |
| | | }, |
| | | { |
| | | code:'rainline', |
| | | code:'lifeline', |
| | | name:'生活污水', |
| | | sname:'生活污水', |
| | | checked: true, // 默认选中状态 |
| | | filter:{} |
| | | }, |
| | | { |
| | | code:'rainline', |
| | | code:'areainfo', |
| | | name:'区域信息', |
| | | sname:'区域信息', |
| | | checked: true, // 默认选中状态 |
| | | filter:{} |
| | | }, |
| | | ], |
| | |
| | | { |
| | | code:'四通', |
| | | name:'四通', |
| | | sname:'', |
| | | sname:'四通', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'三通', |
| | | name:'三通', |
| | | sname:'', |
| | | sname:'三通', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'管架(墩)', |
| | | name:'管架(墩)', |
| | | sname:'', |
| | | sname:'管架', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'管廊(带)', |
| | | name:'管廊(带)', |
| | | sname:'', |
| | | sname:'管廊', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'流向', |
| | | name:'流向', |
| | | sname:'', |
| | | sname:'流向', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'管网', |
| | | name:'管网', |
| | | sname:'', |
| | | sname:'管网', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'阀门', |
| | | name:'阀门', |
| | | sname:'', |
| | | sname:'阀门', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'弯头', |
| | | name:'弯头', |
| | | sname:'', |
| | | sname:'弯头', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | ] |
| | |
| | | { |
| | | code:'窨井', |
| | | name:'窨井', |
| | | sname:'', |
| | | sname:'窨井', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'防火堤', |
| | | name:'防火堤', |
| | | sname:'', |
| | | sname:'防火堤', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'雨篦子', |
| | | name:'雨篦子', |
| | | sname:'', |
| | | sname:'雨篦子', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'溢流堰', |
| | | name:'溢流堰', |
| | | sname:'', |
| | | sname:'溢流堰', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'截流闸', |
| | | name:'截流闸', |
| | | sname:'', |
| | | sname:'截流闸', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'集水池(罐)', |
| | | name:'集水池(罐)', |
| | | sname:'', |
| | | sname:'集水池', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'隔油池', |
| | | name:'隔油池', |
| | | sname:'', |
| | | sname:'隔油池', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | ] |
| | |
| | | { |
| | | code:'排放口', |
| | | name:'排放口', |
| | | sname:'', |
| | | sname:'排放口', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | } |
| | | ] |
| | |
| | | { |
| | | code:'第三方管道', |
| | | name:'第三方管道', |
| | | sname:'', |
| | | sname:'第三方管道', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'消防单位', |
| | | name:'消防单位', |
| | | sname:'', |
| | | sname:'消防单位', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'应急物资', |
| | | name:'应急物资', |
| | | sname:'', |
| | | sname:'应急物资', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'社会专业应急救援队伍', |
| | | name:'社会专业应急救援队伍', |
| | | sname:'', |
| | | sname:'专业应急救援', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'维抢修队伍', |
| | | name:'维抢修队伍', |
| | | sname:'', |
| | | sname:'维抢修队伍', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'医院', |
| | | name:'医院', |
| | | sname:'', |
| | | sname:'医院', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'自然保护区', |
| | | name:'自然保护区', |
| | | sname:'', |
| | | sname:'自然保护区', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'水体', |
| | | name:'水体', |
| | | sname:'', |
| | | sname:'水体', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'敏感目标', |
| | | name:'敏感目标', |
| | | sname:'', |
| | | sname:'敏感目标', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'环境监测单位', |
| | | name:'环境监测单位', |
| | | sname:'', |
| | | sname:'环境监测单位', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'监测点污染物指标信息', |
| | | name:'监测点污染物指标信息', |
| | | sname:'', |
| | | sname:'污染物指标', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'排放口周边环境敏感信息', |
| | | name:'排放口周边环境敏感信息', |
| | | sname:'', |
| | | sname:'排放口周边环境', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'泵', |
| | | name:'泵', |
| | | sname:'', |
| | | sname:'泵', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'液位计', |
| | | name:'液位计', |
| | | sname:'', |
| | | sname:'液位计', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'流量计', |
| | | name:'流量计', |
| | | sname:'', |
| | | sname:'流量计', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'视频监控配置', |
| | | name:'视频监控配置', |
| | | sname:'', |
| | | sname:'视频监控', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'在线监测设备配置', |
| | | name:'在线监测设备配置', |
| | | sname:'', |
| | | sname:'在线监测', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'可燃气体报警设备配置', |
| | | name:'可燃气体报警设备配置', |
| | | sname:'', |
| | | sname:'可燃气体报警', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'H2S浓度报警设备配置', |
| | | name:'H2S浓度报警设备配置', |
| | | sname:'', |
| | | sname:'H2S浓度报警', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'管线点', |
| | | name:'管线点', |
| | | sname:'', |
| | | sname:'管线点', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | }, |
| | | { |
| | | code:'管段', |
| | | name:'管段', |
| | | sname:'', |
| | | sname:'管段', |
| | | checked: true, // 默认选中状态 |
| | | geom: GEOM_POINT |
| | | } |
| | | ] |
| | |
| | | vectoryLayerHelper: {}, // 动态图层控制器实现助手程序 |
| | | layerControllerVisible: { // 图层控制面板的显示状态›› |
| | | layerController: true, // 爸爸栏目:是否显示图层控制面板 |
| | | } |
| | | }, |
| | | |
| | | showServiceLayerFilter: false, // Service图层过滤器 |
| | | selectedServiceLayer: '', // 使用过滤器时,被打开的WMS服务的CODE |
| | | }, |
| | | mutations: { |
| | | setMapObj(state, mObject) { |
| | |
| | | updateLayerControllerVisible(state, preset) { |
| | | state.layerControllerVisible = preset |
| | | }, |
| | | setSelectedServiceLayer(state, selectedServiceLayer){ |
| | | state.selectedServiceLayer = selectedServiceLayer |
| | | }, |
| | | toggleServiceLayerFilter(state){ |
| | | state.showServiceLayerFilter = !state.showServiceLayerFilter |
| | | } |
| | | }, |
| | | actions: { |
| | | // |
| | |
| | | <div class="barline"></div> |
| | | <lc-service-layer></lc-service-layer> |
| | | </sgis-layer-controller> |
| | | <lc-service-layer-filter v-show="showServiceLayerFilter"></lc-service-layer-filter> |
| | | <monitor-panel></monitor-panel> |
| | | </div> |
| | | </template> |
| | |
| | | import SgisLayerController from '@components/LayerController/LayerController' |
| | | import LcBasemap from '@components/LayerController/modules/LcBaseMap' |
| | | import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer' |
| | | import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter' |
| | | import MonitorPanel from '@components/panel/MonitorPanel' |
| | | import { mapMutations } from 'vuex' |
| | | import { mapMutations, mapState } from 'vuex' |
| | | |
| | | export default { |
| | | name: 'MapTemplate', |
| | | components: {SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer}, |
| | | components: {SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer, LcServiceLayerFilter}, |
| | | data(){ |
| | | return { |
| | | basemapHelper: {}, |
| | | serviceLayerHelper: {}, |
| | | vectorLayerHelper: {} |
| | | } |
| | | }, |
| | | computed:{ |
| | | ...mapState({ |
| | | showServiceLayerFilter: state => state.showServiceLayerFilter |
| | | }) |
| | | }, |
| | | beforeMount(){ |
| | | this.$nextTick(() => { |
| | |
| | | setMapObj: 'setMapObj', |
| | | setBasemapHelper: 'setBasemapHelper', |
| | | setServiceLayerHelper: 'setServiceLayerHelper', |
| | | setVectorLayerHelper: 'setVectorLayerHelper', |
| | | setVectorLayerHelper: 'setVectorLayerHelper' |
| | | }), |
| | | init() { |
| | | const mapcontainer = this.$refs.rootmap |