From c1514cfc69b679d05398bb1def6b24c772426aa0 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期二, 14 二月 2023 09:11:46 +0800
Subject: [PATCH] 综合展示图层管理图标切换
---
src/views/Tools/LayerTree.vue | 298 ++++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 203 insertions(+), 95 deletions(-)
diff --git a/src/views/Tools/LayerTree.vue b/src/views/Tools/LayerTree.vue
index f73c16e..2e1a70b 100644
--- a/src/views/Tools/LayerTree.vue
+++ b/src/views/Tools/LayerTree.vue
@@ -12,21 +12,10 @@
default-expand-all
show-checkbox
@node-click="handleLeftclick"
- @node-drag-start="handleDragStart"
- @node-drag-enter="handleDragEnter"
- @node-drag-leave="handleDragLeave"
- @node-drag-over="handleDragOver"
- @node-drag-end="handleDragEnd"
- @node-drop="handleDrop"
@node-contextmenu="rightClick"
- :filter-node-method="filterNode"
@check-change="handleCheckChange"
:default-checked-keys="handleTreeCheck"
- draggable
- :allow-drop="allowDrop"
- :allow-drag="allowDrag"
- ref="tree"
- >
+ ref="tree" >
<span
class="slot-t-node"
slot-scope="{ node, data }"
@@ -49,6 +38,7 @@
></el-input>
</span>
</span>
+
</el-tree>
<el-card
@@ -57,15 +47,13 @@
:style="{ ...rightClickMenuStyle }"
v-show="menuVisible"
>
- <div
- @click="addSameLevelNode()"
- v-show="firstLevel"
- >
+ <div @click="addSameLevelNode()">
<i class="el-icon-circle-plus-outline"></i> 鍚岀骇澧炲姞
</div>
<div
class="add"
@click="addChildNode()"
+ v-show="firstLevel"
>
<i class="el-icon-circle-plus-outline"></i> 瀛愮骇澧炲姞
</div>
@@ -81,6 +69,18 @@
>
<i class="el-icon-edit"></i> 淇敼鑺傜偣
</div>
+ <!-- <div
+ class="edit"
+ @click="menuMoveF( 'up')"
+ >
+ <i class="el-icon-top"></i> 涓婄Щ
+ </div>
+ <div
+ class="edit"
+ @click="menuMoveF( 'down')"
+ >
+ <i class="el-icon-bottom"></i> 涓嬬Щ
+ </div> -->
</el-card>
<el-dialog
:title="appendNodetitle"
@@ -95,11 +95,35 @@
:model="addFormServer"
label-width="100px"
>
- <el-form-item label="鏈嶅姟鍚嶇О">
+ <el-form-item label="鏈嶅姟绫诲瀷">
+ <!-- <el-input v-model="addFormServer.type"></el-input> -->
+ <el-select
+ style="width:100%"
+ :popper-append-to-body="false"
+ v-model="addFormServer.layerType"
+ placeholder="璇烽�夋嫨"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鍥惧眰鍚嶇О">
<el-input v-model="addFormServer.label"></el-input>
</el-form-item>
+ <el-form-item label="鏈嶅姟鍚嶇О">
+ <el-input v-model="addFormServer.resource"></el-input>
+ </el-form-item>
+
<el-form-item label="鏈嶅姟鍦板潃">
- <el-input v-model="addFormServer.value"></el-input>
+ <el-input v-model="addFormServer.url"></el-input>
+ </el-form-item>
+ <el-form-item label="閫忔槑搴�">
+ <el-slider v-model="addFormServer.opacity"></el-slider>
</el-form-item>
</el-form>
<span
@@ -136,7 +160,11 @@
rightClickMenuStyle: {},
handleTreeCheck: [],
dialogVisible: false,
- addFormServer: {},
+ addFormServer: {
+ opacity: 100,
+ layerType: 'WMS',
+ type: 2,
+ },
layerId: [
'm_pipeline',
'th_strategic_channel',
@@ -149,7 +177,15 @@
defaultProps: {
children: 'children',
label: 'label',
+
},
+ options: [{
+ value: 'WMS',
+ label: 'WMS'
+ }, {
+ value: 'WFS',
+ label: 'WFS'
+ }],
};
},
methods: {
@@ -184,7 +220,7 @@
},
// 榧犳爣鍙冲嚮浜嬩欢
rightClick(event, object, Node, element) {
- console.log(event, object);
+
this.currentData = object;
this.currentNode = Node;
if (Node.level === 1) {
@@ -218,10 +254,16 @@
},
// 澧炲姞鍚岀骇鑺傜偣浜嬩欢
addSameLevelNode() {
+
this.foo();
- let id = Math.ceil(Math.random() * 100);
- var data = { id: id, label: '鏂板鑺傜偣' };
- this.$refs.tree.append(data, this.currentNode.parent);
+ if (this.currentNode.level == 2) {
+ this.appendNodetitle = this.currentData.label;
+ this.dialogVisible = true;
+ } else {
+ let id = Math.ceil(Math.random() * 100);
+ var data = { id: id, label: '鏂板鑺傜偣' };
+ this.$refs.tree.append(data, this.currentNode.parent);
+ }
},
// 澧炲姞瀛愮骇鑺傜偣浜嬩欢
addChildNode() {
@@ -232,34 +274,35 @@
}
this.appendNodetitle = this.currentData.label;
this.dialogVisible = true;
-
- // let id = Math.ceil(Math.random() * 100);
- // var data = { id: id, label: '鏂板鑺傜偣' };
- // this.$refs.tree.append(data, this.currentNode);
},
handleClose() {
this.dialogVisible = false;
- this.addFormServer = {};
+ this.addFormServer = {
+ opacity: 100,
+ layerType: 'WMS',
+ type: 2,
+ };
},
setAddServer() {
+ var val = this.currentNode;
+ if (this.currentNode.level == 2) {
+ val = this.currentNode.parent;
+ }
var data = this.addFormServer;
data.id = Math.ceil(Math.random() * 100);
- this.$refs.tree.append(data, this.currentNode);
+ this.$refs.tree.append(data, val);
this.handleClose();
},
// 鍒犻櫎鑺傜偣
deleteNode() {
- this.foo();
- if (this.currentNode.level == 1) {
- this.$message.error('褰撳墠绾у埆鏃犳硶鍒犻櫎!');
- return false;
- }
+
this.foo();
this.$refs.tree.remove(this.currentNode);
},
// 缂栬緫鑺傜偣
editNode(data) {
+
this.foo();
this.currentData = data ? data : this.currentData;
if (!this.currentData.isEdit) {
@@ -270,6 +313,47 @@
this.$refs['slotTreeInput' + this.currentData.id].focus();
});
},
+
+
+
+ menuMoveF(type) {
+ // 灏嗗彉鍔ㄤ箣鍓嶇殑node澶囦唤
+ var node= this.currentNode;
+ var data = this.currentData;
+ let copyNode = this.currentNode
+ debugger
+ // copyNode.previousSibling = {...node. }
+ // copyNode.nextSibling = {...node.nextSibling}
+ // window.sessionStorage.setItem('menuNode',CircularJSON.stringify(copyNode))
+ let nodeData = {}
+ if (type==='up') {
+ // 涓婄Щ
+ if (node.previousSibling) {
+ // 鍒犻櫎鍘熷厛鐨刵ode
+ this.$refs.tree.remove(node.data)
+ // 鎷垮埌copy鐨刵ode
+ // nodeData = CircularJSON.parse(window.sessionStorage.getItem('menuNode'))
+ // // 澶嶅埗璇ode鍒版寚瀹氫綅缃�(鍙傛暟锛�1. 瑕佸鍔犵殑鑺傜偣鐨� data 2. 瑕佸鍔犵殑鑺傜偣鐨勫悗涓�涓妭鐐圭殑 data銆乲ey 鎴栬�� node)
+ // this.$refs.tree.insertBefore(nodeData.data,nodeData.previousSibling.data)
+ window.sessionStorage.removeItem('menuNode')
+ } else {
+ this.$message.warning('璇ヨ彍鍗曞凡缁忔槸褰撳墠灞傛渶涓婄骇')
+ }
+ } else {
+ // 涓嬬Щ
+ if (node.nextSibling) {
+ this.$refs.tree.remove(node.data)
+ nodeData = CircularJSON.parse(window.sessionStorage.getItem('menuNode'))
+ // 鍙傛暟锛�1. 瑕佸鍔犵殑鑺傜偣鐨� data 2. 瑕佸鍔犵殑鑺傜偣鐨勫墠涓�涓妭鐐圭殑 data銆乲ey 鎴栬�� node
+ this.$refs.tree.insertAfter(nodeData.data,nodeData.nextSibling.data)
+ window.sessionStorage.removeItem('menuNode')
+ } else {
+ this.$message.warning('璇ヨ彍鍗曞凡缁忔槸褰撳墠灞傛渶涓嬬骇')
+ }
+ }
+ },
+
+
handleDragStart(node, ev) {
console.log('drag start', node);
},
@@ -292,42 +376,86 @@
if (data.type != 2) return;
var std = [];
- var layers_ol = window.map.getAllLayers();
- for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
- var val_id = window.Viewer.imageryLayers._layers[i].imageryProvider.name;
- if (val_id == data.label) {
+ if (data.layerType == 'WMS') {
+ var layers_ol = window.map.getAllLayers();
+ for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
+ var val_id = window.Viewer.imageryLayers._layers[i].imageryProvider.name;
+ if (val_id == data.label) {
- std.push(data.label)
+ std.push(data.label)
- const img_layer = window.Viewer.imageryLayers._layers[i];
- img_layer.show = checked;
+ const img_layer = window.Viewer.imageryLayers._layers[i];
+ img_layer.show = checked;
+ }
+ }
+
+ for (var i in layers_ol) {
+ var layerOl = layers_ol[i];
+ if (layerOl.values_.name == data.label) {
+ layerOl.setVisible(checked); //鏄剧ず鍥惧眰
+ }
+ }
+ } else if (data.layerType == 'WFS') {
+
+ if (window.Viewer.dataSources._dataSources.length == 0) {
+ this.setAddLayers(data);
+ } else {
+ for (var i in window.Viewer.dataSources._dataSources) {
+ if (window.Viewer.dataSources._dataSources[i].name == data.label) {
+ window.Viewer.dataSources._dataSources[i].show = checked;
+ std.push(data.label)
+ }
+ }
}
}
-
if (std.length == 0 && checked == true) {
this.setAddLayers(data)
}
-
- for (var i in layers_ol) {
- var layerOl = layers_ol[i];
- if (layerOl.values_.name == data.label) {
- layerOl.setVisible(checked); //鏄剧ず鍥惧眰
- }
- }
},
setAddLayers(res) {
- let layerWMS = new Cesium.WebMapServiceImageryProvider({
- url: geoServerURl,
- layers: res.resource,
- parameters: {
- transparent: true,
- format: 'image/png',
- },
- });
- layerWMS.name = res.label;
- window.Viewer.imageryLayers.addImageryProvider(layerWMS);
+ if (res.layerType == 'WMS') {
+ var url = geoServerURl;
+ if (res.url != null && res.url != undefined) {
+ url = res.url
+ }
+ let layerWMS = new Cesium.WebMapServiceImageryProvider({
+ url: url,
+ layers: res.resource,
+ parameters: {
+ transparent: true,
+ format: 'image/png',
+ },
+ });
+ layerWMS.name = res.label;
+ window.Viewer.imageryLayers.addImageryProvider(layerWMS);
+ } else if (res.layerType == 'WFS') {
+
+ var url = res.url + "?service=WFS&version=1.0.0&request=GetFeature&typeName=" + res.resource + "&outputFormat=application%2Fjson"
+ $.ajax({
+ url: url,
+ cache: false,
+ async: true,
+ success: function (data) {
+ var datasource = Cesium.GeoJsonDataSource.load(data, {
+ stroke: Cesium.Color.YELLOW,
+ fill: Cesium.Color.YELLOW.withAlpha(0.5),
+ strokeWidth: 8,
+ clampToGround: true //鏄惁璐村湴
+ });
+ datasource.then((data) => {
+ data.name = res.label;
+ window.Viewer.dataSources.add(data);
+ })
+
+ },
+ error: function (data) {
+ console.log("error");
+ }
+ });
+ }
+
},
@@ -337,6 +465,8 @@
return this.$message.error("鍥惧眰鍒楄〃鏌ヨ澶辫触");
}
+ this.newData = data.result;
+ this.oriData = data.result;
var std = [];
var layer_list = [];
var layer_groups = [];
@@ -350,6 +480,7 @@
children: [],
})
} else if (data.result[i].type == 2) {
+
if (data.result[i].url != null) {
var layer_entity = {
id: data.result[i].id,
@@ -358,6 +489,7 @@
resource: data.result[i].url,
type: data.result[i].type,
isEdit: false,
+ layerType: data.result[i].serveType
}
layer_list.push(layer_entity)
@@ -377,6 +509,11 @@
}
}
}
+ layer_groups = layer_groups.filter((res) => {
+ if (res.children && res.children.length != 0) {
+ return res
+ }
+ })
this.treeData = layer_groups;
this.$refs.tree.setCheckedKeys(std);
},
@@ -418,6 +555,11 @@
}
}
}
+ layer_groups = layer_groups.filter((res) => {
+ if (res.children && res.children.length != 0) {
+ return res
+ }
+ })
this.treeData = layer_groups;
for (var i in data.result) {
@@ -452,7 +594,7 @@
this.treelayersStart();
}
-
+
},
};
</script>
@@ -652,43 +794,9 @@
position: fixed;
display: block;
z-index: 10000;
-
- padding: 10px 0;
+ padding: 0px 0px;
border: 1px solid #ebeef5;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-/deep/ .el-dialog {
- background: rgba(0, 0, 0, 0.6);
-}
-/deep/.el-range-editor.is-active,
-.el-range-editor.is-active:hover,
-.el-select .el-input.is-focus .el-input__inner {
- border: 1px solid;
-}
-/deep/.el-dialog__title {
- color: white;
-}
-/deep/ .el-select .el-input__inner {
- border-color: #fff !important;
-}
-/deep/.el-cascader .el-input__inner {
- border-color: #fff !important;
-}
-// 璁剧疆杈撳叆妗嗙殑鑳屾櫙鑹层�佸瓧浣撻鑹层�佽竟妗嗗睘鎬ц缃紱
-/deep/.el-input__inner {
- background-color: transparent !important ;
- color: #fff !important;
- border: 1px solid !important;
-}
-/deep/.el-tree .el-tree-node__content:hover {
- background-color: transparent !important;
-}
-/deep/.el-tree {
- color: white !important;
- background: transparent !important;
-}
-/deep/.el-tree-node:focus > .el-tree-node__content {
- background: transparent !important;
}
</style>
--
Gitblit v1.9.3