From 9cd476f875b661eca3eb5c4908ce0e744f48cbfe Mon Sep 17 00:00:00 2001
From: wangrui <zephyrs0894@163.com>
Date: 星期四, 24 十二月 2020 17:36:01 +0800
Subject: [PATCH] 配置过滤条件
---
src/store/index.js | 21 ++-
src/components/LayerController/modules/LcServiceLayerFilter.vue | 106 +++++++++++++++++
src/conf/MapConfig.js | 139 +++++++++++++++-------
src/views/MapTemplate.vue | 13 +
src/components/LayerController/modules/LcServiceLayer.vue | 36 ++++-
5 files changed, 251 insertions(+), 64 deletions(-)
diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue
index d855b87..9f7892f 100644
--- a/src/components/LayerController/modules/LcServiceLayer.vue
+++ b/src/components/LayerController/modules/LcServiceLayer.vue
@@ -8,9 +8,9 @@
</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>
@@ -35,16 +35,21 @@
...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('璇ILE鏂规硶鏈疄鐜帮紒')
@@ -52,8 +57,13 @@
swWmtsLayer(){
console.log('璇MTS鏂规硶鏈疄鐜帮紒')
},
- 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
@@ -79,6 +89,9 @@
this.serviceWmsLayerList.push(wmsCfg[i].config)
}
}
+ },
+ updateWms(){
+
}
},
watch: {
@@ -97,6 +110,9 @@
justify-content: center;
align-items: center;
+ .btn-filter{
+ cursor: pointer;
+ }
.wms-panel{
display:flex;
flex-flow: column;
@@ -107,7 +123,9 @@
.layerbox-item{
display:flex;
- flex-flow: row;
+ flex-flow: row wrap;
+ margin-left: 15px;
+ margin-top: 5px;
.basemap-layer-item{
width: 50%;
}
diff --git a/src/components/LayerController/modules/LcServiceLayerFilter.vue b/src/components/LayerController/modules/LcServiceLayerFilter.vue
new file mode 100644
index 0000000..c267079
--- /dev/null
+++ b/src/components/LayerController/modules/LcServiceLayerFilter.vue
@@ -0,0 +1,106 @@
+<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>
diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js
index 1eeab68..f7f7c82 100644
--- a/src/conf/MapConfig.js
+++ b/src/conf/MapConfig.js
@@ -233,60 +233,70 @@
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:{}
},
],
@@ -298,49 +308,57 @@
{
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
},
]
@@ -352,43 +370,50 @@
{
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
},
]
@@ -400,7 +425,8 @@
{
code:'鎺掓斁鍙�',
name:'鎺掓斁鍙�',
- sname:'',
+ sname:'鎺掓斁鍙�',
+ checked: true, // 榛樿閫変腑鐘舵��
geom: GEOM_POINT
}
]
@@ -412,127 +438,148 @@
{
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
}
]
diff --git a/src/store/index.js b/src/store/index.js
index d5e9e1a..e174d05 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -15,13 +15,16 @@
serviceLayerHelper: {}, // 鏈嶅姟鍥惧眰鎺у埗鍣ㄥ疄鐜板姪鎵嬬▼搴�
vectoryLayerHelper: {}, // 鍔ㄦ�佸浘灞傛帶鍒跺櫒瀹炵幇鍔╂墜绋嬪簭
layerControllerVisible: { // 鍥惧眰鎺у埗闈㈡澘鐨勬樉绀虹姸鎬佲�衡��
- layerController: true, // 鐖哥埜鏍忕洰锛氭槸鍚︽樉绀哄浘灞傛帶鍒堕潰鏉�
- }
+ layerController: true, // 鐖哥埜鏍忕洰锛氭槸鍚︽樉绀哄浘灞傛帶鍒堕潰鏉�
+ },
+
+ showServiceLayerFilter: false, // Service鍥惧眰杩囨护鍣�
+ selectedServiceLayer: '', // 浣跨敤杩囨护鍣ㄦ椂锛岃鎵撳紑鐨刉MS鏈嶅姟鐨凜ODE
},
mutations: {
setMapObj(state, mObject) {
- state.L = mObject.L
- state.map = mObject.map
+ state.L = mObject.L
+ state.map = mObject.map
},
setBasemapHelper(state, layerHelper) {
state.basemapHelper = layerHelper
@@ -30,11 +33,17 @@
state.serviceLayerHelper = layerHelper
},
setVectorLayerHelper(state, layerHelper) {
- state.vectoryLayerHelper = layerHelper
+ state.vectoryLayerHelper = layerHelper
},
updateLayerControllerVisible(state, preset) {
- state.layerControllerVisible = preset
+ state.layerControllerVisible = preset
},
+ setSelectedServiceLayer(state, selectedServiceLayer){
+ state.selectedServiceLayer = selectedServiceLayer
+ },
+ toggleServiceLayerFilter(state){
+ state.showServiceLayerFilter = !state.showServiceLayerFilter
+ }
},
actions: {
//
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 2c19186..8ba690c 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -6,6 +6,7 @@
<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>
@@ -17,18 +18,24 @@
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(() => {
@@ -40,7 +47,7 @@
setMapObj: 'setMapObj',
setBasemapHelper: 'setBasemapHelper',
setServiceLayerHelper: 'setServiceLayerHelper',
- setVectorLayerHelper: 'setVectorLayerHelper',
+ setVectorLayerHelper: 'setVectorLayerHelper'
}),
init() {
const mapcontainer = this.$refs.rootmap
--
Gitblit v1.8.0