From beb1187ff71753ed7af06a53d94ac4f8ac5cd2f7 Mon Sep 17 00:00:00 2001
From: 13693261870 <252740454@qq.com>
Date: 星期一, 22 五月 2023 10:50:55 +0800
Subject: [PATCH] 1
---
src/views/Tools/LayerTree.vue | 409 +++++++++++++---------------------------------------------
1 files changed, 93 insertions(+), 316 deletions(-)
diff --git a/src/views/Tools/LayerTree.vue b/src/views/Tools/LayerTree.vue
index b1d5d9d..99ec7cd 100644
--- a/src/views/Tools/LayerTree.vue
+++ b/src/views/Tools/LayerTree.vue
@@ -47,8 +47,8 @@
autofocus
v-model="data.label"
:ref="'slotTreeInput' + data.id"
- @blur.stop="NodeBlur(node, data)"
- @keydown.native.enter="NodeBlur(node, data)"></el-input>
+ @blur.stop="nodeBlur(node, data)"
+ @keydown.native.enter="nodeBlur(node, data)"></el-input>
</span>
</span>
</el-tree>
@@ -78,47 +78,6 @@
<i class="el-icon-tickets"></i> 閽诲瓟鏌辩姸鍥�
</div>
</el-card>
- <el-dialog :title="appendNodetitle"
- :visible.sync="dialogVisible"
- width="30%"
- top="20vh"
- :modal="false"
- :before-close="handleClose">
- <el-form ref="form"
- :model="addFormServer"
- label-width="100px">
- <el-form-item label="鏈嶅姟绫诲瀷">
- <el-select style="width: 100%"
- :popper-append-to-body="false"
- v-model="addFormServer.serveType"
- 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.cnName"></el-input>
- </el-form-item>
- <el-form-item label="鏈嶅姟鍚嶇О">
- <el-input v-model="addFormServer.url"></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-slider v-model="addFormServer.opacity"></el-slider>
- </el-form-item>
- </el-form>
- <span slot="footer"
- class="dialog-footer">
- <el-button type="primary"
- @click="setAddServer">纭� 瀹�</el-button>
- </span>
- </el-dialog>
</div>
</template>
@@ -130,6 +89,7 @@
import { Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import { perms_selectLayers, comprehensive_selectPubById, project_selectDirAll, project_selectByDirid, } from "../../api/api.js";
+
export default {
name: "tree",
components: { queryinfo },
@@ -166,15 +126,13 @@
children: "children",
label: "cnName",
},
- options: [
- {
- value: "WMS",
- label: "WMS",
- },
- {
- value: "WFS",
- label: "WFS",
- },
+ options: [{
+ value: "WMS",
+ label: "WMS",
+ }, {
+ value: "WFS",
+ label: "WFS",
+ },
],
childOption: [],
mptLayer: [],
@@ -182,7 +140,84 @@
proValue: null,
};
},
+ watch: {
+ filterText (val) {
+ this.$refs.tree.filter(val);
+ },
+ },
+ mounted () {
+ this.getMenus()
+ this.$bus.$on("treeDataCopy", (res) => {
+ this.$store.state.treeData = this.treeData;
+ this.$store.state.checkedKeys = this.$refs.tree.getCheckedKeys();
+ });
+ if (this.$store.state.showAllLayers) {
+ this.layersStart();
+ this.$store.state.showAllLayers = false;
+ } else {
+ this.treeData = this.$store.state.treeData;
+ this.$refs.tree.setCheckedKeys(this.$store.state.checkedKeys);
+ }
+ },
methods: {
+ // 鑾峰彇鑿滃崟
+ async getMenus () {
+ let data = await project_selectDirAll();
+ if (data && data.code == 200) this.optionts = data.result;
+ },
+ // 鍒濆鍖栧浘灞�
+ async layersStart () {
+ let data = await perms_selectLayers();
+ if (data.code != 200) {
+ return this.$message.error("鍥惧眰鍒楄〃鏌ヨ澶辫触");
+ }
+
+ let checkKey = [], checkedLayers = [];
+ var layers = data.result.filter((lyr) => {
+ if (lyr.url && lyr.type == 2 && lyr.isShow == 1) {
+ checkKey.push(lyr.id);
+ if (lyr.serveType == "WMS") checkedLayers.push(lyr);
+ }
+ return lyr;
+ });
+ // 瀛樺偍閫変腑鍥惧眰
+ this.treeData = this.setTreeData(layers);
+ this.$refs.tree.setCheckedKeys(checkKey);
+ sessionStorage.setItem("checkedLayers", JSON.stringify(checkedLayers));
+ },
+ // 璁剧疆鏍戞暟鎹�
+ setTreeData (source) {
+ let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
+ return cloneData.filter((father) => {
+ // 寰幆鎵�鏈夐」
+ let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
+ branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+ // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛岄偅涔� a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭ｄ箞 a.c.d 涔熸槸=2锛�
+ // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋�
+ return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
+ });
+ },
+ // 鑺傜偣鑾峰緱鐒︾偣浜嬩欢
+ nodeBlur (node, data) {
+ if (!data.label.length) return this.$message.error("鑿滃崟鍚嶄笉鍙负绌猴紒");
+ if (data.isEdit) this.$set(data, "isEdit", false);
+ this.$nextTick(() => {
+ this.$refs["slotTreeInput" + data.id].$refs.input.focus();
+ });
+ },
+ // 榧犳爣宸﹀嚮浜嬩欢
+ handleLeftclick (data, node) {
+ this.rmListener();
+ },
+ // 鍙栨秷榧犳爣鐩戝惉浜嬩欢
+ rmListener () {
+ this.menuVisible = false;
+ // 瑕佸強鏃跺叧鎺夌洃鍚紝涓嶅叧鎺夌殑鏄竴涓潙锛屼笉淇′綘璇曡瘯锛岃櫧鐒跺墠鍙版樉绀虹殑鏃跺�欐病鏈夊暐姣涚梾锛屽姞涓�涓猘lert浣犲氨鐭ラ亾浜�
+ document.removeEventListener("click", this.rmListener);
+ },
+
+
+
//杞瓟鏌辩姸鍥�
async histogram () {
this.menuVisible = false
@@ -190,34 +225,6 @@
this.$store.state.mapSpaceQueryLayer = layer;
this.$store.state.mapPopBoxFlag = "2";
this.$store.state.showPopBoxFlag = true;
- },
- modelAttach () {
- this.menuVisible = false;
- this.$store.state.attachinfo = this.currentData;
- this.$store.state.attachModel = true;
- },
- NodeBlur (Node, data) {
- if (data.label.length === 0) {
- this.$message.error("鑿滃崟鍚嶄笉鍙负绌猴紒");
- return false;
- } else {
- if (data.isEdit) {
- this.$set(data, "isEdit", false);
- }
- this.$nextTick(() => {
- this.$refs["slotTreeInput" + data.id].$refs.input.focus();
- });
- }
- },
- allowDrop (draggingNode, dropNode, type) {
- if (dropNode.data.label === "浜岀骇 3-1") {
- return type !== "inner";
- } else {
- return true;
- }
- },
- allowDrag (draggingNode) {
- return draggingNode.data.label.indexOf("涓夌骇 3-2-2") === -1;
},
// 榧犳爣鍙冲嚮浜嬩欢
rightClick (event, object, Node, element) {
@@ -254,112 +261,9 @@
this.$refs.card.$el.style.left = event.pageX + 20 + "px";
this.$refs.card.$el.style.top = event.pageY + "px";
},
- // 榧犳爣宸﹀嚮浜嬩欢
- handleLeftclick (data, node) {
- this.foo();
- if (node.checked == true) {
- 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) {
- const img_layer = window.Viewer.imageryLayers._layers[i];
- }
- }
- }
- },
- // 鍙栨秷榧犳爣鐩戝惉浜嬩欢 鑿滃崟鏍�
- foo () {
- this.menuVisible = false;
- // 瑕佸強鏃跺叧鎺夌洃鍚紝涓嶅叧鎺夌殑鏄竴涓潙锛屼笉淇′綘璇曡瘯锛岃櫧鐒跺墠鍙版樉绀虹殑鏃跺�欐病鏈夊暐姣涚梾锛屽姞涓�涓猘lert浣犲氨鐭ラ亾浜�
- document.removeEventListener("click", this.foo);
- },
- // 澧炲姞鍚岀骇鑺傜偣浜嬩欢
- addSameLevelNode () {
- this.menuVisible = false
- this.foo();
- 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 () {
- this.foo();
- this.menuVisible = false
- // if (this.currentNode.level >= 2) {
- // this.$message.error("鏈�澶氬彧鏀袱绾э紒");
- // return false;
- // }
- this.appendNodetitle = this.currentData.label;
- this.dialogVisible = true;
- },
- handleClose () {
- this.dialogVisible = false;
- this.addFormServer = {
- opacity: 100,
- serveType: "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, val);
- this.handleClose();
- },
- // 鍒犻櫎鑺傜偣
- deleteNode () {
- this.foo();
- this.menuVisible = false
- var label = this.currentNode.data.cnName;
- if (this.currentNode.data.serveType == "WMS") {
- var value = this.$refs.tree.getCheckedNodes();
- this.$bus.$emit("showMenuLayer", value);
- } else if (this.currentNode.data.serveType == "WFS") {
- for (var i in window.Viewer.dataSources._dataSources) {
- if (window.Viewer.dataSources._dataSources[i].name == label) {
- window.Viewer.dataSources.remove(
- window.Viewer.dataSources._dataSources[i]
- );
- }
- }
- } else if (this.currentNode.data.serveType == "Tileset") {
- for (var i in Viewer.scene.primitives._primitives) {
- // Viewer.scene.primitives._primitives[i].show = checked;
- if (Viewer.scene.primitives._primitives[i].id == label) {
- Viewer.scene.primitives.remove(
- Viewer.scene.primitives._primitives[i]
- );
- }
- }
- var list = this.$store.state.setAlphaList;
- for (var i = 0; i < list.length; i++) {
- if (list[i].name == label) {
- list.splice(i, 1)
- }
- }
-
- }
- var layers_ol = window.map.getAllLayers();
- for (var i in layers_ol) {
- var layerOl = layers_ol[i];
- if (layerOl.values_.name == label) {
- window.map.removeLayer(layerOl); //鏄剧ず鍥惧眰
- }
- }
- this.$refs.tree.remove(this.currentNode);
- },
- //灞炴�ф樉绀�
+ // 灞炴�ф樉绀�
showLayerAttribute (data) {
- this.foo();
+ this.rmListener();
this.menuVisible = false
this.currentData = data ? data : this.currentData;
var layer = this.currentData.enName.replaceAll("_", "");
@@ -367,9 +271,9 @@
this.$store.state.showPopBoxFlag = true;
this.$store.state.mapPopBoxFlag = "2";
},
- //妯″瀷璁剧疆閫忔槑搴�
+ // 妯″瀷璁剧疆閫忔槑搴�
pellucidity () {
- this.foo();
+ this.rmListener();
this.menuVisible = false
var tile = this.currentData
for (var j in Viewer.scene.primitives._primitives) {
@@ -380,7 +284,7 @@
}
}
},
- //妯″瀷瀹氫綅
+ // 妯″瀷瀹氫綅
positioning () {
this.menuVisible = false
for (var i in Viewer.scene.primitives._primitives) {
@@ -393,7 +297,7 @@
},
// 缂栬緫鑺傜偣
editNode (data) {
- this.foo();
+ this.rmListener();
this.menuVisible = false
this.currentData = data ? data : this.currentData;
if (!this.currentData.isEdit) {
@@ -864,106 +768,6 @@
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
// Viewer.flyTo(tileset);
},
- setTreeData (source) {
- let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
- return cloneData.filter((father) => {
- // 寰幆鎵�鏈夐」
- let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
- branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
- // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭ｄ箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭ｄ箞 a.c.d 涔熸槸=2锛�
- // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋�
- return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
- });
- },
- async layersStart () {
- const data = await perms_selectLayers();
- if (data.code != 200) {
- return this.$message.error("鍥惧眰鍒楄〃鏌ヨ澶辫触");
- }
- var std = data.result;
- var that = this;
- var checkKey = [];
- let checkedLayers = [];
- var val = std.filter((str) => {
- if (str.type == 1) {
- return str;
- }
- if (str.url != null && str.type == 2) {
- if (str.isShow == 1) {
- checkKey.push(str.id);
- // that.setAddLayers(str);
- if (str.serveType == "WMS" && str.url) {
- checkedLayers.push(str);
- }
- }
- return str;
- }
- });
- //瀛樺偍閫変腑鍥惧眰
- sessionStorage.setItem("checkedLayers", JSON.stringify(checkedLayers));
- var res = this.setTreeData(val);
- this.treeData = res;
- this.$refs.tree.setCheckedKeys(checkKey);
- },
- async treelayersStart () {
- const data = await perms_selectLayers();
- if (data.code != 200) {
- return this.$message.error("鍥惧眰鍒楄〃鏌ヨ澶辫触");
- }
- var std = [];
- var layer_list = [];
- var layer_groups = [];
- for (var i in data.result) {
- if (data.result[i].type == 1) {
- layer_groups.push({
- id: data.result[i].id,
- label: data.result[i].cnName,
- type: data.result[i].type,
- isEdit: false,
- children: [],
- });
- } else if (data.result[i].type == 2) {
- if (data.result[i].url != null) {
- var layer_entity = {
- id: data.result[i].id,
- pid: data.result[i].pid,
- label: data.result[i].cnName,
- resource: data.result[i].url,
- type: data.result[i].type,
- isEdit: false,
- };
- layer_list.push(layer_entity);
- }
- }
- }
- for (var i in layer_list) {
- for (var j in layer_groups) {
- if (layer_list[i].pid === layer_groups[j].id) {
- layer_groups[j].children.push(layer_list[i]);
- }
- }
- }
- 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) {
- if (data.result[i].type == 2 && data.result[i].url != null) {
- for (var j = 0; j < window.Viewer.imageryLayers._layers.length; j++) {
- var val_id = window.Viewer.imageryLayers._layers[j];
- if (val_id.show == true) {
- if (val_id.imageryProvider.name == data.result[i].cnName) {
- std.push(data.result[i].id);
- }
- }
- }
- }
- }
- this.$refs.tree.setCheckedKeys(std);
- },
// 鏌ヨ
filterNode (value, data) {
@@ -1155,33 +959,6 @@
this.$bus.$emit("showMenuLayer", value);
}
},
- async getMenuProject () {
- const data = await project_selectDirAll();
- if (data.code != 200) {
- return
- }
- this.optionts = data.result;
- },
- },
- watch: {
- filterText (val) {
- this.$refs.tree.filter(val);
- },
- },
- mounted () {
- this.getMenuProject()
- this.$bus.$on("treeDataCopy", (res) => {
- this.$store.state.treeData = this.treeData;
- this.$store.state.checkedKeys = this.$refs.tree.getCheckedKeys();
- });
-
- if (this.$store.state.showAllLayers == true) {
- this.layersStart();
- this.$store.state.showAllLayers = false;
- } else {
- this.treeData = this.$store.state.treeData;
- this.$refs.tree.setCheckedKeys(this.$store.state.checkedKeys);
- }
},
};
</script>
--
Gitblit v1.9.3