From 7c515e10fcdffcff295a04533b5789a373aee59d Mon Sep 17 00:00:00 2001 From: Surpriseplus <845948745@qq.com> Date: 星期三, 02 八月 2023 17:50:26 +0800 Subject: [PATCH] 1 --- src/views/Tools/LayerTree.vue | 348 +++++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 246 insertions(+), 102 deletions(-) diff --git a/src/views/Tools/LayerTree.vue b/src/views/Tools/LayerTree.vue index 1c74736..94a139b 100644 --- a/src/views/Tools/LayerTree.vue +++ b/src/views/Tools/LayerTree.vue @@ -2,83 +2,107 @@ <div class="lalala tree-container"> <el-form ref="form"> <el-form-item> - <el-select v-model="$store.state.pigCode" - clearable - filterable - style="width :100%" - @change="prjChanged" - placeholder="璇烽�夋嫨椤圭洰"> - <el-option v-for="item in menus" - :key="item.code" - :label="item.name" - :value="item.code"> + <el-select + v-model="$store.state.pigCode" + clearable + filterable + style="width :100%" + @change="prjChanged" + placeholder="璇烽�夋嫨椤圭洰" + > + <el-option + v-for="item in menus" + :key="item.code" + :label="item.name" + :value="item.code" + > </el-option> </el-select> </el-form-item> <el-form-item> - <el-input placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" - v-model="filterText" - class="search"> + <el-input + placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" + v-model="filterText" + class="search" + > </el-input> </el-form-item> </el-form> - <el-tree ref="tree" - :data="treeData" - node-key="id" - show-checkbox - :props="defaultProps" - @node-click="handleLeftclick" - @node-contextmenu="rightClick" - @check="handleCheckChange" - :default-checked-keys="handleTreeCheck" - :expand-on-click-node="false" - :filter-node-method="filterNode" - draggable> - <span class="slot-t-node" - slot-scope="{ node, data }"> + <el-tree + ref="tree" + :data="treeData" + node-key="id" + show-checkbox + :props="defaultProps" + @node-click="handleLeftclick" + @node-contextmenu="rightClick" + @check="handleCheckChange" + :default-checked-keys="handleTreeCheck" + :expand-on-click-node="false" + :filter-node-method="filterNode" + draggable + > + <span + class="slot-t-node" + slot-scope="{ node, data }" + > <span v-show="!data.isEdit"> <span :class="[data.id >= 99 ? 'slot-t-node--label' : '']">{{ - node.label - }}</span> + node.label + }}</span> </span> <span v-show="data.isEdit"> - <el-input class="slot-t-input" - size="mini" - autofocus - v-model="data.label" - :ref="'slotTreeInput' + data.id" - @blur.stop="nodeBlur(node, data)" - @keydown.native.enter="nodeBlur(node, data)"></el-input> + <el-input + class="slot-t-input" + size="mini" + autofocus + v-model="data.label" + :ref="'slotTreeInput' + data.id" + @blur.stop="nodeBlur(node, data)" + @keydown.native.enter="nodeBlur(node, data)" + ></el-input> </span> </span> </el-tree> - <el-card class="box-card" - ref="card" - :style="{ ...rightClickMenuStyle }" - v-show="menuVisible"> - <div class="edit" - @click="showLayerAttribute()" - v-if="showProp && !shwoHistogram"> + <el-card + class="box-card" + ref="card" + :style="{ ...rightClickMenuStyle }" + v-show="menuVisible" + > + <div + class="edit" + @click="showLayerAttribute()" + v-if="showProp && !shwoHistogram" + > <i class="el-icon-tickets"></i> 灞炴�� </div> - <div class="edit" - @click="positioning()" - v-if="showLocal"> + <div + class="edit" + @click="positioning()" + v-if="showLocal" + > <i class="el-icon-tickets"></i> 瀹氫綅 </div> - <div class="edit" - @click="pellucidity()" - v-if="showOpacity"> + <div + class="edit" + @click="pellucidity()" + v-if="showOpacity" + > <i class="el-icon-tickets"></i> 閫忔槑搴� </div> - <div class="edit" - @click="histogram()" - v-show="shwoHistogram"> + <div + class="edit" + @click="histogram()" + v-show="shwoHistogram" + > <i class="el-icon-tickets"></i> 閽诲瓟鏌辩姸鍥� </div> - <div class="edit" - v-show="shwoTileDown" - @click="tileDownload()"> + <div + class="edit" + v-show="shwoTileDown" + @click="tileDownload()" + > <i class="el-icon-download"></i> 鐡︾墖涓嬭浇 </div> </el-card> @@ -95,7 +119,7 @@ export default { name: "tree", components: { queryinfo }, - data () { + data() { return { isBusy: false, // 姝e繖 lastPrjCode: "", // 鏈�鍚庨�夋嫨椤圭洰缂栫爜 @@ -122,6 +146,7 @@ "m_sitepoint", ], treeData: [], // 鏍戞暟鎹� + sourceData: [], // 婧愭暟鎹� defaultProps: { // 榛樿灞炴�у�� children: "children", label: "cnName", @@ -131,11 +156,11 @@ }; }, watch: { - filterText (val) { + filterText(val) { this.$refs.tree.filter(val); }, }, - mounted () { + mounted() { this.getMenus(); this.$bus.$on("treeDataCopy", (res) => { this.$store.state.treeData = this.treeData; @@ -151,12 +176,12 @@ }, methods: { // 鑾峰彇鑿滃崟 - async getMenus () { + async getMenus() { let data = await project_selectDirAll(); if (data && data.code == 200) this.menus = data.result; }, // 鍒濆鍖栧浘灞� - async layersStart () { + async layersStart() { let data = await perms_selectLayers(); if (data.code != 200) { return this.$message.error("鍥惧眰鍒楄〃鏌ヨ澶辫触"); @@ -172,11 +197,12 @@ }); // 瀛樺偍閫変腑鍥惧眰 this.treeData = this.setTreeData(layers); + this.sourceData = JSON.parse(JSON.stringify(this.treeData)); this.$refs.tree.setCheckedKeys(checkKey); sessionStorage.setItem("checkedLayers", JSON.stringify(checkedLayers)); }, // 璁剧疆鏍戞暟鎹� - setTreeData (source) { + setTreeData(source) { /*let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕 return cloneData.filter((father) => { // 寰幆鎵�鏈夐」 @@ -193,7 +219,7 @@ return arr; }, // 璁剧疆鏍戝瓙鑺傜偣鏁版嵁 - setTreeChildData (data, arr, pid) { + setTreeChildData(data, arr, pid) { let i = 0; while (i < data.length) { let d = data[i]; @@ -217,7 +243,7 @@ } }, // 鑺傜偣鑾峰緱鐒︾偣浜嬩欢 - nodeBlur (node, data) { + nodeBlur(node, data) { if (!data.label.length) return this.$message.error("鑿滃崟鍚嶄笉鍙负绌猴紒"); if (data.isEdit) this.$set(data, "isEdit", false); this.$nextTick(() => { @@ -225,22 +251,22 @@ }); }, // 榧犳爣宸﹀嚮浜嬩欢 - handleLeftclick (data, node) { + handleLeftclick(data, node) { this.rmListener(); }, // 鍙栨秷榧犳爣鐩戝惉浜嬩欢 - rmListener () { + rmListener() { this.menuVisible = false; // 瑕佸強鏃跺叧鎺夌洃鍚紝涓嶅叧鎺夌殑鏄竴涓潙锛屼笉淇′綘璇曡瘯锛岃櫧鐒跺墠鍙版樉绀虹殑鏃跺�欐病鏈夊暐姣涚梾锛屽姞涓�涓猘lert浣犲氨鐭ラ亾浜� document.removeEventListener("click", this.rmListener); }, // 杩囨护鑺傜偣 - filterNode (value, data) { + filterNode(value, data) { if (!value) return true; return data.cnName.indexOf(value) !== -1; }, // 榧犳爣鍙冲嚮浜嬩欢 - rightClick (event, object, node, element) { + rightClick(event, object, node, element) { if (object.type == 1 || node.data.children != null) return; this.currentNode = node; @@ -258,7 +284,7 @@ this.$refs.card.$el.style.top = event.pageY + "px"; }, // 灞炴�ф樉绀� - showLayerAttribute (data) { + showLayerAttribute(data) { this.rmListener(); this.currentData = data ? data : this.currentData; let layer = this.currentData.enName.replaceAll("_", ""); @@ -267,8 +293,9 @@ this.$store.state.mapPopBoxFlag = "2"; }, // 瀹氫綅 - async positioning () { + async positioning() { this.rmListener(); + if (["Tileset", "3DML"].indexOf(this.currentData.serveType) > -1) { for (let i in Viewer.scene.primitives._primitives) { if (Viewer.scene.primitives._primitives[i].id == this.currentData.cnName) { @@ -292,11 +319,22 @@ } if ("Mpt" == this.currentData.serveType) { - viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(101.8, 37.9, 10000000.0) }); // 涓浗 + if (this.currentData.json) { + var json = JSON.parse(this.currentData.json); + if (json.west) { + Viewer.camera.flyTo({ + destination: Cesium.Rectangle.fromDegrees(json.west, json.south, json.east, json.north) + }) + } + } else { + + Viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(101.8, 37.9, 10000000.0) }); // 涓浗 + } + } }, // 閽诲瓟鏌辩姸鍥� - async histogram () { + async histogram() { this.rmListener(); let layer = this.currentData.enName.replaceAll("_", ""); this.$store.state.mapSpaceQueryLayer = layer; @@ -304,7 +342,7 @@ this.$store.state.showPopBoxFlag = true; }, // 閫忔槑搴� - pellucidity () { + pellucidity() { this.rmListener(); for (let j in Viewer.scene.primitives._primitives) { if (Viewer.scene.primitives._primitives[j].id == this.currentData.cnName) { @@ -315,13 +353,13 @@ } }, // 鑾峰彇楂樺害 - getHeight (level) { + getHeight(level) { if (level > -1 && level < 23) return this.levelArray[level]; return this.levelArray[this.levelArray.length - 1]; }, // 鐡︾墖涓嬭浇 - tileDownload () { + tileDownload() { this.rmListener(); var that = this; @@ -334,7 +372,7 @@ ); }, // 鑾峰彇鐡︾墖鍥涜嚦鑼冨洿 - getTileRectangle (res) { + getTileRectangle(res) { var value = res.rectangle.coordinates.getValue(); var val = { pubid: this.currentData.pubid, @@ -348,7 +386,7 @@ this.$bus.$emit("titleDown", val); }, // 鍥惧眰閫変腑浜嬩欢 - handleCheckChange (data, checked) { + handleCheckChange(data, checked) { if (this.isBusy) return; let nodes = []; @@ -377,14 +415,14 @@ } } - if (obj.TMS.length) this.setChangeDEM(obj.DEM, checked); + if (obj.DEM.length) this.setChangeDEM(obj.DEM, checked); if (obj.TMS.length) this.setChangeTMS(obj.TMS, checked); if (obj.Mpt.length) this.setChangeMpt(obj.Mpt, checked); if (obj.Tileset.length) this.setChangeTileset(obj.Tileset, checked); if (obj.WMS.length) this.setChangeWMS(obj.WMS, checked); }, // 鑾峰彇瀛愯妭鐐� - getNodes (data, arr) { + getNodes(data, arr) { if (data.children) { for (let i = 0, c = data.children.length; i < c; i++) { let node = data.children[i]; @@ -399,7 +437,7 @@ } }, // 鑾峰彇鑺傜偣ID - getCheckNodesIds () { + getCheckNodesIds() { let nodes = this.$refs.tree.getCheckedNodes(); let ids = []; for (let i in nodes) { @@ -409,12 +447,12 @@ return ids; }, // 鍒囨崲WMS鏈嶅姟 - setChangeWMS (layers, checked) { + setChangeWMS(layers, checked) { let value = this.$refs.tree.getCheckedNodes(); this.$bus.$emit("showMenuLayer", value); }, // 鍒囨崲Tileset - setChangeTileset (layers, checked) { + setChangeTileset(layers, checked) { let ids = this.getCheckNodesIds(), arr = []; for (let k in layers) { let layer = layers[k]; @@ -441,7 +479,7 @@ if (arr.length) this.addTilesetLayers(arr); }, // 娣诲姞Tileset鍥惧眰 - addTilesetLayers (layers) { + addTilesetLayers(layers) { for (let i in layers) { let res = layers[i]; let url = res.url.indexOf("{host}") > -1 ? res.url.replace("{host}", iisHost) : modelUrl + "/" + res.url; @@ -452,7 +490,7 @@ url: url, skipLevelOfDetail: true, // 鍦ㄩ亶鍘嗘椂鍊欒烦杩囪鎯咃細false baseScreenSpaceError: 1024, - maximumScreenSpaceError: 64, // 鏈�澶у睆骞曠┖闂撮敊璇細16锛屾暟鍊煎姞澶ц兘璁╂渶缁堟垚鍍忓彉妯$硦 + maximumScreenSpaceError: url.indexOf("/pnts/") > -1 ? 16 : 64, // 鏈�澶у睆骞曠┖闂撮敊璇細16锛屾暟鍊煎姞澶ц兘璁╂渶缁堟垚鍍忓彉妯$硦 skipScreenSpaceErrorFactor: 16, skipLevels: 1, immediatelyLoadDesiredLevelOfDetail: false, @@ -495,7 +533,7 @@ } }, // 鍒囨崲TMS - setChangeTMS (layers, checked) { + setChangeTMS(layers, checked) { let ids = this.getCheckNodesIds(), arr = []; for (let j in layers) { let layer = layers[j]; @@ -515,7 +553,7 @@ if (arr.length) this.addTMSLayers(arr); }, // 娣诲姞TMS鍥惧眰 - addTMSLayers (layers) { + addTMSLayers(layers) { for (let i in layers) { let res = layers[i]; res.url = res.url.indexOf("{host}") > -1 ? res.url.replace("{host}", iisHost) : res.url; @@ -535,7 +573,7 @@ } }, // 鍒囨崲Mpt - setChangeMpt (layers, checked) { + setChangeMpt(layers, checked) { let ids = this.getCheckNodesIds(), arr = []; for (let j in layers) { let layer = layers[j]; @@ -555,21 +593,27 @@ if (arr.length) this.addMptLayers(arr); }, // 娣诲姞Mpt鍥惧眰 - addMptLayers (layers) { + addMptLayers(layers) { for (let i in layers) { let res = layers[i]; if (res.url.indexOf("{host}") > -1) res.url = res.url.replace("{host}", iisHost); - let urls = res.url.split(';') - let layer = sgworld.Creator.createImageryProvider(res.cnName, "wms", { + let urls = res.url.split(';'); + var ops = { url: urls[0], layers: urls[1] - }, "0", undefined, true, ""); + }; + if (res && res.json) { + var rs = JSON.parse(res.json); + ops.rectangle = Cesium.Rectangle.fromDegrees(rs.west, rs.south, rs.east, rs.north); + } + + let layer = sgworld.Creator.createImageryProvider(res.cnName, "wms", ops, "0", undefined, true, ""); this.mptLayer.push(layer); } }, // 鍒囨崲DEM - setChangeDEM (layers, checked) { + setChangeDEM(layers, checked) { let ids = this.getCheckNodesIds(), arr = []; for (let i in layers) { let layer = layers[i]; @@ -583,7 +627,7 @@ this.addDEMLayers(url, null == url); }, // 娣诲姞DEM鍥惧眰 - addDEMLayers (url, useSG) { + addDEMLayers(url, useSG) { if (useSG) { if (Viewer.terrainProvider._isMPT) return; @@ -603,7 +647,7 @@ }); }, // 璁剧疆Tileset鍙傛暟 - async setTilesetArgs (tileset, res) { + async setTilesetArgs(tileset, res) { if (res.serveType == '3DML' || !res.pubid) { this.setTilesetHeigth(tileset, parseFloat(res.elev)); return; @@ -613,7 +657,7 @@ if (data.code == 200 && data.result.json) this.setTilesetCoord(tileset, data.result.json); }, // 璁剧疆Tileset楂樺害 - setTilesetHeigth (tileset, height) { + setTilesetHeigth(tileset, height) { //3dtile妯″瀷鐨勮竟鐣岀悆浣� let boundingSphere = tileset.boundingSphere; //杩崱灏旂┖闂寸洿瑙掑潗鏍�=>鍦扮悊鍧愭爣锛堝姬搴﹀埗锛� @@ -628,7 +672,7 @@ // Viewer.flyTo(tileset); }, // 璁剧疆Tileset鍧愭爣 - setTilesetCoord (tileset, json) { + setTilesetCoord(tileset, json) { let vm = JSON.parse(json); let pos = Cesium.Cartesian3.fromDegrees(vm.lon, vm.lat, vm.height); let converter = Cesium.Transforms.eastNorthUpToFixedFrame; @@ -638,7 +682,7 @@ // Viewer.flyTo(tileset); }, // 鏍规嵁Pubid璁剧疆TMS鍥惧眰 - async setTMSLayerByPubid (res) { + async setTMSLayerByPubid(res) { const data = await comprehensive_selectPubById({ id: res.pubid }); if (!data || data.code != 200) return; @@ -666,8 +710,10 @@ // } }, // 鍒囨崲椤圭洰 - prjChanged (code) { + prjChanged(code) { + this.$store.state.pigCode = code; + //if (code) { this.isBusy = true; let checkedLayers = this.getCheckedLayersByCode(code); @@ -677,6 +723,8 @@ checkedKeys.push(checkedLayers[i].id); } + this.treeData = this.getNewTreeData(code); + this.$store.state.treeData = this.treeData; this.$refs.tree.setCheckedKeys(checkedKeys); sessionStorage.setItem("checkedLayers", JSON.stringify(checkedLayers)); this.isBusy = false; @@ -687,7 +735,7 @@ } }, // 鏍规嵁椤圭洰缂栫爜鑾峰彇閫変腑鍥惧眰 - getCheckedLayersByCode (code) { + getCheckedLayersByCode(code) { let layers = []; for (let i = 0, c = this.treeData.length; i < c; i++) { this.getCheckedChildLayersByCode(this.treeData[i], code, layers, false); @@ -696,7 +744,7 @@ return layers; }, // 鏍规嵁椤圭洰缂栫爜鑾峰彇閫変腑瀛愬浘灞� - getCheckedChildLayersByCode (data, code, layers, isPrj) { + getCheckedChildLayersByCode(data, code, layers, isPrj) { if (data.children && data.children.length) { for (let i = 0, c = data.children.length; i < c; i++) { let layer = data.children[i]; @@ -706,8 +754,13 @@ continue; } - if (layer.type == 2 && (layer.isProject || isPrj)) { - layers.push(layer); + //if (layer.type == 2 && (layer.isProject || isPrj)) { + // layers.push(layer); + //} + if (code) { + if (layer.type == 2 && (layer.isProject || isPrj)) layers.push(layer); + } else { + if (layer.isShow) layers.push(layer); } } return; @@ -717,8 +770,90 @@ layers.push(data); } }, + // 鑾峰彇鏂版爲鏁版嵁 + getNewTreeData(code) { + let data = JSON.parse(JSON.stringify(this.sourceData)); + if (!code) return data; + + this.setSubTreeData(data, code); + this.rmPrjTreeData(data, code); + + return data; + }, + // 璁剧疆鏍戞暟鎹瓙鑺傜偣 + setSubTreeData(data, code) { + let j = 0; + while (j < data.length) { + let d = data[j]; + if (d.type == 1 && d.isProject && d.enName != code) { + data.splice(j, 1); + continue; + } + + j++; + } + + for (let i = 0, c = data.length; i < c; i++) { + if (data[i].children && data[i].children.length) { + this.setSubTreeData(data[i].children, code); + } + } + }, + // 绉婚櫎椤圭洰鏍戞暟鎹� + rmPrjTreeData(data, code) { + /*let j = 0; + while (j < data.length) { + let d = data[j]; + if (d.type == 1 && d.isProject && d.enName == code) { + data.splice(j, 1); + data.concat(d.children); + continue; + } + + j++; + } + + for (let i = 0, c = data.length; i < c; i++) { + if (data[i].children && data[i].children.length) { + this.rmPrjTreeData(data[i].children, code); + } + }*/ + + let i = 0; + while (i < data.length) { + let d = data[i]; + if (!d.children) { + i++; + continue; + } + if (!d.children.length) { + data.splice(i, 1); + continue; + } + + let j = 0; + while (j < d.children.length) { + let e = d.children[j]; + if (e.type == 1 && e.isProject && e.enName == code) { + d.children.splice(j, 1); + if (e.children && e.children.length) d.children = d.children.concat(e.children); + continue; + } + + j++; + } + + i++; + } + + for (let i = 0, c = data.length; i < c; i++) { + if (data[i].children && data[i].children.length) { + this.rmPrjTreeData(data[i].children, code); + } + } + }, // 娣诲姞WFS鍥惧眰 * - addWFSLayers (res) { + addWFSLayers(res) { let url = res.resource + "?service=WFS&version=1.0.0&request=GetFeature&typeName=" + @@ -798,6 +933,7 @@ .tree-container /deep/ .el-tree > .el-tree-node:after { border-top: none; } + .tree-container /deep/ .el-tree > .el-tree-node:before { border-left: none; } @@ -844,14 +980,17 @@ .tree-container { margin: 10px; } + .tree-container /deep/ .el-tree .el-tree-node { position: relative; } + .tree-container /deep/ .el-tree-node .el-tree-node__content { height: 34px; padding-left: 0px !important; border: none; } + .tree-container /deep/ .el-tree-node .el-tree-node__content::before { border-left: 1px dashed #ccc; height: 100%; @@ -861,6 +1000,7 @@ margin-top: 0px; z-index: 8; } + .tree-container /deep/ .el-tree-node @@ -915,9 +1055,11 @@ /deep/.el-card__body { padding: 10px !important; + > div { padding-bottom: 10px; border-bottom: 1px solid #ccc; + &:hover { color: #409eff; } @@ -935,10 +1077,12 @@ .text { font-size: 14px; } + .el-tree { width: 100%; margin-top: 10px; } + .search { width: 100%; } -- Gitblit v1.9.3