From 8ee4edce98711de3917d9da85e928ad7285bf914 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期三, 12 五月 2021 15:11:47 +0800
Subject: [PATCH] 图层控制修改
---
src/components/LayerController/service/WmsLayerService.js | 76 +++++++++---------
src/conf/layers/LayerPipeLines.js | 30 +++++--
src/conf/layers/LayerFsss.js | 8 +-
src/components/LayerController/dataset/WmsLayerList.js | 70 +++++++++++++++++
src/conf/layers/LayerHbss.js | 13 +-
src/components/LayerController/service/LayerFactory.js | 2
src/components/LayerController/service/WmsLayerGroupService.js | 27 +++---
7 files changed, 153 insertions(+), 73 deletions(-)
diff --git a/src/components/LayerController/dataset/WmsLayerList.js b/src/components/LayerController/dataset/WmsLayerList.js
new file mode 100644
index 0000000..af11119
--- /dev/null
+++ b/src/components/LayerController/dataset/WmsLayerList.js
@@ -0,0 +1,70 @@
+
+class WmsLayerList {
+ constructor () {
+ // {鍥惧眰鍚嶇О锛歔{typeName:xxx,filter:yyy}]}
+ this.layers = []
+ }
+
+ addConfig (config) {
+ const typeName = config.typeName
+ const layerGroup = config.layerGroup || typeName
+ const filter = config.filter
+ if (layerGroup) {
+ this.addLayer(layerGroup, typeName, filter)
+ }
+ }
+
+ addLayer (layerGroup, typeName, filter) {
+ const layers = this.layers
+ const layer = layers[layerGroup]
+ if (layer) {
+ layers[layerGroup].push({ typeName: typeName, filter: filter || 'INCLUDE' })
+ } else {
+ layers[layerGroup] = [{ typeName: typeName, filter: filter || 'INCLUDE' }]
+ }
+ }
+
+ remove (typeName, filter) {
+ const layers = this.layers
+ for (const k in layers) {
+ if (k === typeName) {
+ delete this.layers[k]
+ break
+ }
+ for (let i = 0; i < layers[k].length; i++) {
+ const layer = layers[k][i]
+ if (typeName === layer.typeName && filter === layer.filter) {
+ this.layers[k].splice(i, 1)
+ if (this.layers[k].length === 0) {
+ delete this.layers[k]
+ }
+ break
+ }
+ }
+ }
+ }
+
+ getLayers () {
+ const layers = this.layers
+ const _layers = []
+ for (const k in layers) {
+ _layers.push(k)
+ }
+ return _layers.join(',')
+ }
+
+ getFilters () {
+ const layers = this.layers
+ const cqlFilters = []
+ for (const k in layers) {
+ const filters = []
+ for (let i = 0; i < layers[k].length; i++) {
+ filters.push(layers[k][i].filter)
+ }
+ cqlFilters.push(filters.join(' OR '))
+ }
+ return cqlFilters.join(';')
+ }
+}
+
+export default WmsLayerList
diff --git a/src/components/LayerController/service/LayerFactory.js b/src/components/LayerController/service/LayerFactory.js
index f781247..0a661d6 100644
--- a/src/components/LayerController/service/LayerFactory.js
+++ b/src/components/LayerController/service/LayerFactory.js
@@ -36,7 +36,7 @@
var childLayer = config.childLayer
var checked = config.checked
/* if (config.groupName) {
- const wmsGroupLayerService = new WmsGroupLayerService(config)
+ const wmsGroupLayerService = new WmsLayerGroupService(config)
wmsGroupLayerService.init()
continue
} */
diff --git a/src/components/LayerController/service/WmsGroupLayerService.js b/src/components/LayerController/service/WmsLayerGroupService.js
similarity index 97%
rename from src/components/LayerController/service/WmsGroupLayerService.js
rename to src/components/LayerController/service/WmsLayerGroupService.js
index 81e0e18..6f948d5 100644
--- a/src/components/LayerController/service/WmsGroupLayerService.js
+++ b/src/components/LayerController/service/WmsLayerGroupService.js
@@ -4,7 +4,7 @@
/**
* wms 鍥惧眰缁勭殑绠＄悊
*/
-class WmsGroupLayerService {
+class WmsLayerGroupService {
constructor (config) {
this.config = config
this.L = window.L
@@ -13,8 +13,18 @@
this.map = window.map
this.popupComp = window.popupComp
// {groupName:{url:'.../wms',layers:[]}}
- this.groups = []
this.map.on('click', (e) => this.click(e))
+ }
+
+ load () {
+ for (var k in this.groups) {
+ console.log(k)
+ this.L.tileLayer.wms(PIPELINE_WMS, {
+ format: 'image/png', // 杩斿洖鐨勬暟鎹牸寮�
+ transparent: true,
+ layers: k // todo
+ }).addTo(this.layer).bringToFront()
+ }
}
init () {
@@ -53,17 +63,6 @@
layers: [layerName]
}
}
- }
- }
-
- load () {
- for (var k in this.groups) {
- console.log(k)
- this.L.tileLayer.wms(PIPELINE_WMS, {
- format: 'image/png', // 杩斿洖鐨勬暟鎹牸寮�
- transparent: true,
- layers: k // todo
- }).addTo(this.layer).bringToFront()
}
}
@@ -114,4 +113,4 @@
}
}
-export default WmsGroupLayerService
+export default WmsLayerGroupService
diff --git a/src/components/LayerController/service/WmsLayerService.js b/src/components/LayerController/service/WmsLayerService.js
index fe4ba3c..999783e 100644
--- a/src/components/LayerController/service/WmsLayerService.js
+++ b/src/components/LayerController/service/WmsLayerService.js
@@ -1,7 +1,7 @@
import AjaxUtils from '../../../utils/AjaxUtils'
import { PIPELINE_WMS } from '../../../conf/Constants'
import Popup from '@views/popup/Popup'
-import List from '../../../utils/List'
+import WmsLayerList from '../dataset/WmsLayerList'
/**
* todo 寰楄�冭檻涓�涓浘灞傞厤缃簡澶氫釜 wmsLayers鐨勬儏鍐�
@@ -28,57 +28,59 @@
// 瀛樻斁getfeatureinfo鐨勫浘灞傜粍
this.featureGroup = this.L.featureGroup({}).addTo(this.map)
- this.layers = new List()
- this.filters = new List()
+ this.wmsLayerList = new WmsLayerList()
for (var i = 0; i < layersConfig.length; i++) {
const config = layersConfig[i]
- const typeName = config.typeName
- if (typeName) {
- this.layers.add(config.index, typeName)
- if (config.filter) {
- this.filters.addEnd(config.filter)
- }
- }
+ this.wmsLayerList.addConfig(config)
}
+ this.load()
}
init () {
- if (this.layers) {
- this.load(this.layers)
- this.clickListener()
- }
+ this.clickListener()
}
add (config) {
- const typeName = config.typeName
- if (typeName) {
- if (!this.layers.contains(typeName)) {
- this.layers.add(config.index, typeName)
- if (config.filter) {
- this.filters.addEnd(config.filter)
- }
- this.wmsLayer.setParams({ cql_filter: this.filters.join(' and ') })
- }
+ this.wmsLayerList.addConfig(config)
+ const layers = this.wmsLayerList.getLayers()
+ const filter = this.wmsLayerList.getFilters()
+ const params = {}
+ if (filter) {
+ params.cql_filter = filter
}
+ if (layers) {
+ params.layers = layers
+ }
+ this.wmsLayer.setParams(params)
}
remove (config) {
console.log(config)
- const typeName = config.typeName
- this.layers.remove(typeName)
- if (config.filter) {
- this.filters.remove(config.filter)
+ this.wmsLayerList.remove(config.typeName, config.filter)
+ const layers = this.wmsLayerList.getLayers()
+ const filter = this.wmsLayerList.getFilters()
+ const params = { layers: layers }
+ if (filter) {
+ params.cql_filter = filter
}
- this.wmsLayer.setParams({ cql_filter: this.filters.join(' and ') })
+ this.wmsLayer.setParams(params)
}
- load (layers) {
- this.wmsLayer = this.L.tileLayer.wms(PIPELINE_WMS, {
+ load () {
+ const layers = this.wmsLayerList.getLayers()
+ const filter = this.wmsLayerList.getFilters()
+ const params = {
format: 'image/png', // 杩斿洖鐨勬暟鎹牸寮�
transparent: true,
- layers: 'sewer:pipesegment', // this.layers.join(','),
- cql_filter: this.filters.join(' and ')
- }).addTo(this.map)
+ BBOX: this.map.getBounds().toBBoxString()
+ }
+ if (layers) {
+ params.layers = layers
+ }
+ if (filter.length > 0) {
+ params.cql_filter = filter
+ }
+ this.wmsLayer = this.L.tileLayer.wms(PIPELINE_WMS, params).addTo(this.map)
}
clickListener () {
@@ -88,11 +90,11 @@
var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom())
var size = this.map.getSize()
// const bbox = this.L.latLngBounds(this.L.latLng(e.latlng.lng, e.latlng.lat)).toBBoxString()
-
- if (this.layers.length() > 0) {
+ const layers = this.wmsLayerList.getLayers()
+ if (layers.length > 0) {
const params = Object.assign({
- LAYERS: this.layers.join(','),
- QUERY_LAYERS: this.layers.join(','),
+ LAYERS: layers,
+ QUERY_LAYERS: layers,
WIDTH: size.x,
HEIGHT: size.y,
X: Math.round(point.x),
diff --git a/src/conf/layers/LayerFsss.js b/src/conf/layers/LayerFsss.js
index 6cc183a..b0e4350 100644
--- a/src/conf/layers/LayerFsss.js
+++ b/src/conf/layers/LayerFsss.js
@@ -1,8 +1,8 @@
/**
* 鍖哄煙
*/
-import { PIPELINE_WFS, SERVICE_TYPE } from '../Constants'
-const WFS_URL = PIPELINE_WFS
+import { SERVICE_TYPE } from '../Constants'
+
export const LayerFsss = {
code: 'sewersFsss',
name: '闄勫睘璁炬柦',
@@ -46,7 +46,7 @@
sname: 'PipeRack',
minZoom: 16,
type: SERVICE_TYPE.WMS,
- typeName: WFS_URL + '?TYPENAME=绠℃灦',
+ typeName: 'sewer:piperack',
checked: false
},
{
@@ -55,7 +55,7 @@
sname: 'PipeGallery',
minZoom: 16,
type: SERVICE_TYPE.WMS,
- typeName: '?TYPENAME=绠″粖',
+ typeName: 'sewer:pipegallery',
checked: false
},
{
diff --git a/src/conf/layers/LayerHbss.js b/src/conf/layers/LayerHbss.js
index dafb46d..f93be09 100644
--- a/src/conf/layers/LayerHbss.js
+++ b/src/conf/layers/LayerHbss.js
@@ -1,8 +1,7 @@
/**
* 鍖哄煙
*/
-import { PIPELINE_WFS, SERVICE_TYPE } from '../Constants'
-const WFS_URL = PIPELINE_WFS
+import { SERVICE_TYPE } from '../Constants'
export const LayerHbss = {
code: 'sewersHbss',
name: '鐜繚璁炬柦',
@@ -35,7 +34,7 @@
sname: '闃茬伀鍫�',
minZoom: 16,
type: SERVICE_TYPE.WMS,
- wfs: WFS_URL + '?TYPENAME=闃茬伀鍫�',
+ typeName: 'sewer:firedike',
checked: false
},
{
@@ -43,7 +42,7 @@
name: '闆嗘按姹�',
sname: '闆嗘按姹�',
minZoom: 16,
- wfs: WFS_URL + '?TYPENAME=闆嗘按姹�',
+ typeName: 'sewer:collectingbasin',
checked: false,
type: SERVICE_TYPE.WMS,
icon: 'sewers/闆嗘按姹�.png'
@@ -53,7 +52,7 @@
name: '鎴祦闂�',
sname: '鎴祦闂�',
type: SERVICE_TYPE.WMS,
- wfs: WFS_URL + '?TYPENAME=鎴祦闂�',
+ typeName: 'sewer:collectingbasin',
checked: false
},
{
@@ -62,7 +61,7 @@
sname: '婧㈡祦鍫�',
minZoom: 16,
type: SERVICE_TYPE.WMS,
- wfs: WFS_URL + '?TYPENAME=婧㈡祦鍫�',
+ typeName: 'ewer:overflowweir',
checked: false
},
{
@@ -72,7 +71,7 @@
minZoom: 16,
checked: false,
type: SERVICE_TYPE.WMS,
- wfs: WFS_URL + '?TYPENAME=闅旀补姹�',
+ typeName: 'ewer:oilseparator',
icon: 'sewers/闅旀补姹�.png'
}
]
diff --git a/src/conf/layers/LayerPipeLines.js b/src/conf/layers/LayerPipeLines.js
index d3de90e..cf545c9 100644
--- a/src/conf/layers/LayerPipeLines.js
+++ b/src/conf/layers/LayerPipeLines.js
@@ -19,7 +19,8 @@
sname: '绠＄綉',
checked: false,
type: SERVICE_TYPE.WMS,
- typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
+ layerGroup: 'sewer:pipeline_group',
+ typeName: 'sewer:pipeline',
icon: 'sewers/闆ㄦ按绾�.png',
color: '#0070ff',
minZoom: 13,
@@ -36,7 +37,8 @@
sname: '浜嬫晠姘�',
checked: false,
type: SERVICE_TYPE.WMS,
- typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
+ layerGroup: 'sewer:pipeline_group',
+ typeName: 'sewer:pipeline',
minZoom: 13,
filter: 'mediumtype = \'浜嬫晠姘碶'',
index: 1
@@ -47,7 +49,8 @@
sname: '鍚补姹℃按',
checked: false,
type: SERVICE_TYPE.WMS,
- typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
+ layerGroup: 'sewer:pipeline_group',
+ typeName: 'sewer:pipeline',
minZoom: 13,
color: '#ffaa00',
filter: 'mediumtype = \'鍚补姹℃按\'',
@@ -63,7 +66,8 @@
sname: '鍚洂姹℃按',
checked: false,
type: SERVICE_TYPE.WMS,
- typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
+ layerGroup: 'sewer:pipeline_group',
+ typeName: 'sewer:pipeline',
minZoom: 13,
filter: 'mediumtype = \'鍚洂姹℃按\'',
index: 1
@@ -74,7 +78,8 @@
sname: '鍚⒈姹℃按',
checked: false,
type: SERVICE_TYPE.WMS,
- typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
+ layerGroup: 'sewer:pipeline_group',
+ typeName: 'sewer:pipeline',
filter: 'mediumtype = \'鍚⒈姹℃按\'',
minZoom: 10,
index: 1
@@ -85,7 +90,8 @@
sname: '鍚～姹℃按',
checked: false,
type: SERVICE_TYPE.WMS,
- typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
+ layerGroup: 'sewer:pipeline_group',
+ typeName: 'sewer:pipeline',
filter: 'mediumtype = \'鍚～姹℃按\'',
minZoom: 10,
index: 1
@@ -96,7 +102,8 @@
sname: '鐢熸椿姹℃按',
checked: false,
type: SERVICE_TYPE.WMS,
- typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
+ layerGroup: 'sewer:pipeline_group',
+ typeName: 'sewer:pipeline',
filter: 'mediumtype = \'鐢熸椿姹℃按\'',
minZoom: 13,
index: 1
@@ -107,7 +114,8 @@
sname: '鍑�鍖栨按',
checked: false,
type: SERVICE_TYPE.WMS,
- typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
+ layerGroup: 'sewer:pipeline_group',
+ typeName: 'sewer:pipeline',
filter: 'mediumtype = \'鍑�鍖栨按\'',
minZoom: 13,
index: 1
@@ -117,7 +125,8 @@
name: '寰幆姘�',
sname: '寰幆姘�',
type: SERVICE_TYPE.WMS,
- typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
+ layerGroup: 'sewer:pipeline_group',
+ typeName: 'sewer:pipeline',
filter: 'mediumtype = \'寰幆姘碶'',
checked: false,
minZoom: 13,
@@ -129,7 +138,8 @@
sname: '鐢熶骇姹℃按',
checked: false,
type: SERVICE_TYPE.WMS,
- typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
+ layerGroup: 'sewer:pipeline_group',
+ typeName: 'sewer:pipeline',
filter: 'mediumtype = \'鐢熶骇姹℃按\'',
minZoom: 13,
color: '#a8a800',
--
Gitblit v1.8.0