From 243c4782ce378d9238a60ae8cd41723657675d69 Mon Sep 17 00:00:00 2001
From: wangrui <zephyrs0894@163.com>
Date: 星期四, 24 十二月 2020 15:43:49 +0800
Subject: [PATCH] 服务图层，动态生成
---
src/conf/MapConfig.js | 322 +++++++++++++++++++++++++++++++++++
src/views/MapTemplate.vue | 10 +
src/components/helpers/ServiceLayerHelper.js | 59 +++++-
src/components/LayerController/modules/LcServiceLayer.vue | 119 +++++++++++++
4 files changed, 493 insertions(+), 17 deletions(-)
diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue
new file mode 100644
index 0000000..d855b87
--- /dev/null
+++ b/src/components/LayerController/modules/LcServiceLayer.vue
@@ -0,0 +1,119 @@
+<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" :value="item.code" @change="swAllLayers"/>{{item.name}}</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>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from "vuex";
+export default {
+ name: "LcServiceLayer",
+ components: {},
+ data() {
+ return {
+ selectedLineLayer: [], // 閫変腑鐨勭绾垮浘灞�
+ selectedSubsidiaryLayer: [], // 閫変腑鐨勯檮灞炶绱�
+ serviceTileLayerList: [], // Tile鍥惧眰鍒楄〃
+ serviceWmtsLayerList: [], // Wmts鍥惧眰鍒楄〃
+ serviceWmsLayerList: [] // 鍥惧眰鍒楄〃
+ };
+ },
+ computed: {
+ ...mapState({
+ serviceLayerHelper: (state) => {
+ return state.serviceLayerHelper;
+ },
+ }),
+ },
+ mounted() {
+ // console.log('03姝ラ锛�', this.helper)
+ },
+ methods: {
+ ...mapMutations([]),
+ swAllLayers(){
+
+ },
+ swTileLayer(){
+ console.log('璇ILE鏂规硶鏈疄鐜帮紒')
+ },
+ swWmtsLayer(){
+ console.log('璇MTS鏂规硶鏈疄鐜帮紒')
+ },
+ swWmsLayer(){
+
+ },
+ 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)
+ }
+ }
+ }
+ },
+ watch: {
+ serviceLayerHelper(newVal) {
+ if (newVal != null) {
+ this.updateServiceLayerList();
+ }
+ },
+ },
+};
+</script>
+
+<style scoped lang="less">
+.inner-panel {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .wms-panel{
+ display:flex;
+ flex-flow: column;
+ .layerbox{
+ width: 100%;
+ display:flex;
+ flex-flow: column;
+
+ .layerbox-item{
+ display:flex;
+ flex-flow: row;
+ .basemap-layer-item{
+ width: 50%;
+ }
+ }
+ }
+ }
+}
+
+</style>
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 9f9140e..b571d98 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -8,7 +8,9 @@
this.map = options.map
this.L = options.L
this.tileLayersMap = new Map()
- this.tileLayersArray = []
+ this.tileLayersWMSArray = []
+ this.tileLayersWMTSArray = []
+ this.tileLayersTileArray = []
this.mapConfig = {}
}
@@ -30,11 +32,11 @@
for(let i = 0, len = mapConfig.mapConfig.ServiceLayers.length; i < len; ++i) {
let opt = mapConfig.mapConfig.ServiceLayers[i]
if(opt.type === 'wmts') {
- this.loadWmtsLayer(opt, isAddToMap)
+ this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
}else if(opt.type === 'wms') {
- this.loadWmsLayer(opt, isAddToMap)
+ this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
}else if(opt.type === 'tile') {
- this.loadTileLayer(opt, isAddToMap)
+ this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
}
}
}
@@ -44,28 +46,30 @@
* @param {}} options
* @param {*} isAddToMap
*/
- loadWmtsLayer(options, isAddToMap = true) {
+ loadWmtsLayer(options, isAddToMap = true, config) {
const layer = this.L.tileLayer(options.url, options.option);
-
+ layer.config = config
+
if(isAddToMap) {
layer.addTo(this.map)
}
this.tileLayersMap.set(options.code, layer)
- this.tileLayersArray.push(layer)
+ this.tileLayersWMTSArray.push(layer)
}
/**
* 寰�鍦板浘涓姞鍏ヤ竴涓猈MS鏈嶅姟
* @param {}} options
* @param {*} isAddToMap
*/
- loadWmsLayer(options, isAddToMap = true) {
+ loadWmsLayer(options, isAddToMap = true, config) {
const layer =this.L.tileLayer.wms(options.url, options.option);
-
+ layer.config = config
+
if(isAddToMap) {
layer.addTo(this.map)
}
this.tileLayersMap.set(options.code, layer)
- this.tileLayersArray.push(layer)
+ this.tileLayersWMSArray.push(layer)
}
/**
@@ -73,7 +77,7 @@
* @param {}} options
* @param {*} isAddToMap
*/
- loadTileLayer(options, isAddToMap = true) {
+ loadTileLayer(options, isAddToMap = true, config) {
const layer =this.L.tileLayer(options.url, {
layers: options.layers || 'all',//country
format: options.format || "image/png",
@@ -83,12 +87,13 @@
minZoom: options.minZoom || 1,
zoomOffset: options.zoomOffset || 0
});
+ layer.config = config
if(isAddToMap) {
layer.addTo(this.map)
}
this.tileLayersMap.set(options.code , layer)
- this.tileLayersArray.push(layer)
+ this.tileLayersTileArray.push(layer)
}
/**
* 闅愯棌鏈嶅姟鍥惧眰
@@ -112,10 +117,36 @@
}
/**
- * 鑾峰彇鎵�鏈夌殑鏈嶅姟鍥惧眰
+ * 鑾峰彇鎵�鏈夌殑TILE鏈嶅姟鍥惧眰
*/
getTileLayers(){
- return this.tilelayersArray
+ return this.tileLayersTileArray
+ }
+ /**
+ * 鑾峰彇鎵�鏈夌殑WMTS鏈嶅姟鍥惧眰
+ */
+ getWmtsLayers(){
+ return this.tileLayersWMTSArray
+ }
+ /**
+ * 鑾峰彇鎵�鏈夌殑WMS鏈嶅姟鍥惧眰
+ */
+ getWmsLayers(){
+ return this.tileLayersWMSArray
+ }
+
+ /**
+ * 閫氳繃code鏌ユ壘WMS鐨勬湇鍔￠厤缃�
+ * @param {} code wms鏈嶅姟閰嶇疆鐨刢ode
+ */
+ getWMSConfig(code){
+ let mc = this.mapConfig
+ for(let i = 0, len = mc.mapConfig.ServiceLayers.length; i < len; ++i) {
+ if(code == mc.mapConfig.ServiceLayers[i].code && mc.mapConfig.ServiceLayers[i].type === 'wms'){
+ return mc.mapConfig.ServiceLayers[i]
+ }
+ }
+ return null
}
}
export default ServiceLayerHelper
diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js
index 17c3b02..1eeab68 100644
--- a/src/conf/MapConfig.js
+++ b/src/conf/MapConfig.js
@@ -17,6 +17,12 @@
// 鑷畾涔変富鏈洪厤缃�
const BLUEMAP_HOST = APP_GIS_HOST // 鍏徃鍙戝竷鐨勫湴鍥炬湇鍔★紝鐢ㄤ簬娴嬭瘯鐨勫湴鍧�
+// 鍑犱綍绫诲瀷甯搁噺
+const GEOM_POINT = 'POINT'
+const GEOM_POLYLINE = 'POLYLINE'
+const GEOM_POLYGON = 'POLYGON'
+console.log(GEOM_POINT, GEOM_POLYLINE, GEOM_POLYGON)
+
const mapOptions = {
crs: L.CRS.EPSG4326,
minZoom: 3,
@@ -200,17 +206,19 @@
icon_deactived: '',
type:'wmts',
url: APP_GIS_HOST + '/server/ogcserver/whp_guojie/wmts?x={x}&y={y}&z={z}',
+ inLegend: false,
option:{
zoomOffset: 1
}
},
{
code:'pipeline',
- name:'绠＄綉',
+ name:'绠＄綉鏁版嵁',
icon_actived: '',
icon_deactived: '',
type:'wms',
url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLine/wms?version=1.1.1',
+ inLegend: true,
option:{
layers:'all',
styles:'', // Comma-separated list of WMS styles.
@@ -219,7 +227,317 @@
version:'1.1.1', // Version of the WMS service to use
crs:L.CRS.EPSG4326, // Coordinate Reference System to use for the WMS requests, defaults to map CRS. Don't change this if you're not sure what it means.
uppercase:false
- }
+ },
+ layers:[
+ {
+ code:'rainline',
+ name:'闆ㄦ按绾�',
+ sname:'闆ㄦ按',
+ filter:{}
+ },
+ {
+ code:'rainline',
+ name:'鍚补姹℃按绾�',
+ sname:'鍚补姹℃按',
+ filter:{}
+ },
+ {
+ code:'rainline',
+ name:'鍚洂姹℃按绾�',
+ sname:'鍚洂姹℃按',
+ filter:{}
+ },
+ {
+ code:'rainline',
+ name:'鍚⒈姹℃按绾�',
+ sname:'鍚⒈姹℃按',
+ filter:{}
+ },
+ {
+ code:'rainline',
+ name:'鎺掑彛',
+ sname:'鎺掑彛',
+ filter:{}
+ },
+ {
+ code:'rainline',
+ name:'浜嬫晠姘寸嚎',
+ sname:'浜嬫晠姘�',
+ filter:{}
+ },
+ {
+ code:'rainline',
+ name:'寰幆姘寸嚎',
+ sname:'寰幆姘�',
+ filter:{}
+ },
+ {
+ code:'rainline',
+ name:'鍑�鍖栨按绾�',
+ sname:'鍑�鍖栨按',
+ filter:{}
+ },
+ {
+ code:'rainline',
+ name:'鐢熸椿姹℃按',
+ sname:'鐢熸椿姹℃按',
+ filter:{}
+ },
+ {
+ code:'rainline',
+ name:'鍖哄煙淇℃伅',
+ sname:'鍖哄煙淇℃伅',
+ filter:{}
+ },
+ ],
+ filtersGroup:[
+ {
+ code:'fsss',
+ name:'闄勫睘璁炬柦',
+ filters:[
+ {
+ code:'鍥涢��',
+ name:'鍥涢��',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'涓夐��',
+ name:'涓夐��',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'绠℃灦(澧�)',
+ name:'绠℃灦(澧�)',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'绠″粖(甯�)',
+ name:'绠″粖(甯�)',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'娴佸悜',
+ name:'娴佸悜',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'绠＄綉',
+ name:'绠＄綉',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'闃�闂�',
+ name:'闃�闂�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'寮ご',
+ name:'寮ご',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ ]
+ },
+ {
+ code:'hbss',
+ name:'鐜繚璁炬柦',
+ filters:[
+ {
+ code:'绐ㄤ簳',
+ name:'绐ㄤ簳',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'闃茬伀鍫�',
+ name:'闃茬伀鍫�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'闆ㄧ瀛�',
+ name:'闆ㄧ瀛�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'婧㈡祦鍫�',
+ name:'婧㈡祦鍫�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'鎴祦闂�',
+ name:'鎴祦闂�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'闆嗘按姹�(缃�)',
+ name:'闆嗘按姹�(缃�)',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'闅旀补姹�',
+ name:'闅旀补姹�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ ]
+ },
+ {
+ code:'pk',
+ name:'鎺掑彛',
+ filters:[
+ {
+ code:'鎺掓斁鍙�',
+ name:'鎺掓斁鍙�',
+ sname:'',
+ geom: GEOM_POINT
+ }
+ ]
+ },
+ {
+ code:'qyxx',
+ name:'鍖哄煙淇℃伅',
+ filters:[
+ {
+ code:'绗笁鏂圭閬�',
+ name:'绗笁鏂圭閬�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'娑堥槻鍗曚綅',
+ name:'娑堥槻鍗曚綅',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'搴旀�ョ墿璧�',
+ name:'搴旀�ョ墿璧�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'绀句細涓撲笟搴旀�ユ晳鎻撮槦浼�',
+ name:'绀句細涓撲笟搴旀�ユ晳鎻撮槦浼�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'缁存姠淇槦浼�',
+ name:'缁存姠淇槦浼�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'鍖婚櫌',
+ name:'鍖婚櫌',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'鑷劧淇濇姢鍖�',
+ name:'鑷劧淇濇姢鍖�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'姘翠綋',
+ name:'姘翠綋',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'鏁忔劅鐩爣',
+ name:'鏁忔劅鐩爣',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'鐜鐩戞祴鍗曚綅',
+ name:'鐜鐩戞祴鍗曚綅',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'鐩戞祴鐐规薄鏌撶墿鎸囨爣淇℃伅',
+ name:'鐩戞祴鐐规薄鏌撶墿鎸囨爣淇℃伅',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'鎺掓斁鍙ｅ懆杈圭幆澧冩晱鎰熶俊鎭�',
+ name:'鎺掓斁鍙ｅ懆杈圭幆澧冩晱鎰熶俊鎭�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'娉�',
+ name:'娉�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'娑蹭綅璁�',
+ name:'娑蹭綅璁�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'娴侀噺璁�',
+ name:'娴侀噺璁�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'瑙嗛鐩戞帶閰嶇疆',
+ name:'瑙嗛鐩戞帶閰嶇疆',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'鍦ㄧ嚎鐩戞祴璁惧閰嶇疆',
+ name:'鍦ㄧ嚎鐩戞祴璁惧閰嶇疆',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'鍙噧姘斾綋鎶ヨ璁惧閰嶇疆',
+ name:'鍙噧姘斾綋鎶ヨ璁惧閰嶇疆',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'H2S娴撳害鎶ヨ璁惧閰嶇疆',
+ name:'H2S娴撳害鎶ヨ璁惧閰嶇疆',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'绠＄嚎鐐�',
+ name:'绠＄嚎鐐�',
+ sname:'',
+ geom: GEOM_POINT
+ },
+ {
+ code:'绠℃',
+ name:'绠℃',
+ sname:'',
+ geom: GEOM_POINT
+ }
+ ]
+ }
+ ]
}
]
}
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 0d5cabd..2c19186 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -3,6 +3,8 @@
<div id="map" ref="rootmap"></div>
<sgis-layer-controller :preset="'warningPreset'">
<lc-basemap></lc-basemap>
+ <div class="barline"></div>
+ <lc-service-layer></lc-service-layer>
</sgis-layer-controller>
<monitor-panel></monitor-panel>
</div>
@@ -14,12 +16,13 @@
import mapConfig from '@/conf/MapConfig'
import SgisLayerController from '@components/LayerController/LayerController'
import LcBasemap from '@components/LayerController/modules/LcBaseMap'
+import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer'
import MonitorPanel from '@components/panel/MonitorPanel'
import { mapMutations } from 'vuex'
export default {
name: 'MapTemplate',
- components: {SgisLayerController, MonitorPanel, LcBasemap},
+ components: {SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer},
data(){
return {
basemapHelper: {},
@@ -73,5 +76,10 @@
height: 100%;
width: 100%;
}
+ .barline{
+ width: 100%;
+ height: 1px;
+ background-color: #0661AE;
+ }
}
</style>>
--
Gitblit v1.8.0