From c2a6c53657baaf0830cd881e1a23a15af23ac6fa Mon Sep 17 00:00:00 2001 From: Surpriseplus <845948745@qq.com> Date: 星期四, 21 九月 2023 18:35:14 +0800 Subject: [PATCH] 代码更新 --- src/views/Tools/LayerTree.vue | 355 ++++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 245 insertions(+), 110 deletions(-) diff --git a/src/views/Tools/LayerTree.vue b/src/views/Tools/LayerTree.vue index 0cfa6b4..3a2e50f 100644 --- a/src/views/Tools/LayerTree.vue +++ b/src/views/Tools/LayerTree.vue @@ -2,84 +2,114 @@ <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" + > + <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> + <div + class="edit" + v-show="shwoAnnex" + @click="annexDownload()" + > + <i class="el-icon-tickets"></i> 闄勪欢 </div> </el-card> </div> @@ -95,7 +125,7 @@ export default { name: "tree", components: { queryinfo }, - data () { + data() { return { isBusy: false, // 姝e繖 lastPrjCode: "", // 鏈�鍚庨�夋嫨椤圭洰缂栫爜 @@ -105,6 +135,7 @@ showOpacity: false, // 涓嶉�忔槑搴� shwoTileDown: false, // 鐡︾墖涓嬭浇 menuVisible: false, // 鑿滃崟 + shwoAnnex: false,//闄勪欢 levelArray: [ // 楂樼▼鏁扮粍 0, 40000000, 20000000, 10000000, 5000000, 2000000, 1000000, 500000, 250000, 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200, @@ -132,11 +163,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; @@ -152,12 +183,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("鍥惧眰鍒楄〃鏌ヨ澶辫触"); @@ -178,7 +209,7 @@ sessionStorage.setItem("checkedLayers", JSON.stringify(checkedLayers)); }, // 璁剧疆鏍戞暟鎹� - setTreeData (source) { + setTreeData(source) { /*let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕 return cloneData.filter((father) => { // 寰幆鎵�鏈夐」 @@ -195,7 +226,7 @@ return arr; }, // 璁剧疆鏍戝瓙鑺傜偣鏁版嵁 - setTreeChildData (data, arr, pid) { + setTreeChildData(data, arr, pid) { let i = 0; while (i < data.length) { let d = data[i]; @@ -219,7 +250,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(() => { @@ -227,22 +258,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; @@ -255,12 +286,12 @@ this.showOpacity = ["Tileset", "3DML"].indexOf(object.serveType) > -1; // 涓嶉�忔槑搴� this.shwoTileDown = ["TMS", "DOM"].indexOf(object.serveType) > -1 && object.pubid; // 鐡︾墖涓嬭浇 this.menuVisible = this.showProp || this.shwoHistogram || this.showLocal || this.showOpacity || this.shwoTileDown; // 鑿滃崟 - + this.shwoAnnex = ['DEM', 'TMS'].indexOf(object.serveType) > -1;//闄勪欢 this.$refs.card.$el.style.left = event.pageX + 20 + "px"; 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("_", ""); @@ -269,8 +300,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) { @@ -287,18 +319,29 @@ let wkt = this.$wkt.parse(data.result.geom); let height = this.getHeight(wkt.coordinates[2]); Viewer.camera.flyTo({ - destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], height), // 2000 + destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], sceneConfig.extureHeight), // 2000 }); } return; } 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; @@ -306,7 +349,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) { @@ -317,13 +360,18 @@ } }, // 鑾峰彇楂樺害 - getHeight (level) { + getHeight(level) { if (level > -1 && level < 23) return this.levelArray[level]; - - return this.levelArray[this.levelArray.length - 1]; + var res = 7 + return this.levelArray[res]; }, + //闄勪欢涓嬭浇 + annexDownload() { + this.$bus.$emit('annexDownload', this.currentData) + }, + // 鐡︾墖涓嬭浇 - tileDownload () { + tileDownload() { this.rmListener(); var that = this; @@ -336,7 +384,7 @@ ); }, // 鑾峰彇鐡︾墖鍥涜嚦鑼冨洿 - getTileRectangle (res) { + getTileRectangle(res) { var value = res.rectangle.coordinates.getValue(); var val = { pubid: this.currentData.pubid, @@ -350,7 +398,7 @@ this.$bus.$emit("titleDown", val); }, // 鍥惧眰閫変腑浜嬩欢 - handleCheckChange (data, checked) { + handleCheckChange(data, checked) { if (this.isBusy) return; let nodes = []; @@ -379,14 +427,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]; @@ -401,7 +449,7 @@ } }, // 鑾峰彇鑺傜偣ID - getCheckNodesIds () { + getCheckNodesIds() { let nodes = this.$refs.tree.getCheckedNodes(); let ids = []; for (let i in nodes) { @@ -411,12 +459,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]; @@ -443,7 +491,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; @@ -454,7 +502,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, @@ -497,7 +545,7 @@ } }, // 鍒囨崲TMS - setChangeTMS (layers, checked) { + setChangeTMS(layers, checked) { let ids = this.getCheckNodesIds(), arr = []; for (let j in layers) { let layer = layers[j]; @@ -517,7 +565,8 @@ 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; @@ -532,12 +581,18 @@ maximumLevel: 22, enablePickFeatures: false }), 1); + layer.id = res.id; layer.name = res.cnName; + if (is_production) { + Viewer.imageryLayers.raiseToTop(layer);//灏嗗浘灞備笂绉讳竴灞� + Viewer.imageryLayers.lower(layer);//灏嗗浘灞備笂绉讳竴灞� + } + } }, // 鍒囨崲Mpt - setChangeMpt (layers, checked) { + setChangeMpt(layers, checked) { let ids = this.getCheckNodesIds(), arr = []; for (let j in layers) { let layer = layers[j]; @@ -557,21 +612,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]; @@ -585,7 +646,7 @@ this.addDEMLayers(url, null == url); }, // 娣诲姞DEM鍥惧眰 - addDEMLayers (url, useSG) { + addDEMLayers(url, useSG) { if (useSG) { if (Viewer.terrainProvider._isMPT) return; @@ -605,7 +666,7 @@ }); }, // 璁剧疆Tileset鍙傛暟 - async setTilesetArgs (tileset, res) { + async setTilesetArgs(tileset, res) { if (res.serveType == '3DML' || !res.pubid) { this.setTilesetHeigth(tileset, parseFloat(res.elev)); return; @@ -615,7 +676,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; //杩崱灏旂┖闂寸洿瑙掑潗鏍�=>鍦扮悊鍧愭爣锛堝姬搴﹀埗锛� @@ -630,7 +691,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; @@ -640,7 +701,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; @@ -660,6 +721,10 @@ let layer = Viewer.imageryLayers.addImageryProvider(provider, 1); layer.name = res.cnName; + if (is_production) { + Viewer.imageryLayers.raiseToTop(layer);//灏嗗浘灞備笂绉讳竴灞� + Viewer.imageryLayers.lower(layer);//灏嗗浘灞備笂绉讳竴灞� + } // if (data.result.geom) { // let wkt = this.$wkt.parse(data.result.geom); // Viewer.camera.flyTo({ @@ -668,8 +733,10 @@ // } }, // 鍒囨崲椤圭洰 - prjChanged (code) { + prjChanged(code) { + this.$store.state.pigCode = code; + //if (code) { this.isBusy = true; let checkedLayers = this.getCheckedLayersByCode(code); @@ -691,7 +758,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); @@ -700,7 +767,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]; @@ -710,8 +777,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; @@ -722,16 +794,17 @@ } }, // 鑾峰彇鏂版爲鏁版嵁 - getNewTreeData (code) { - if (!code) return this.sourceData; - + 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) { + setSubTreeData(data, code) { let j = 0; while (j < data.length) { let d = data[j]; @@ -749,8 +822,61 @@ } } }, + // 绉婚櫎椤圭洰鏍戞暟鎹� + 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=" + @@ -830,6 +956,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; } @@ -876,14 +1003,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%; @@ -893,6 +1023,7 @@ margin-top: 0px; z-index: 8; } + .tree-container /deep/ .el-tree-node @@ -947,9 +1078,11 @@ /deep/.el-card__body { padding: 10px !important; + > div { padding-bottom: 10px; border-bottom: 1px solid #ccc; + &:hover { color: #409eff; } @@ -967,10 +1100,12 @@ .text { font-size: 14px; } + .el-tree { width: 100%; margin-top: 10px; } + .search { width: 100%; } -- Gitblit v1.9.3