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 | 284 +++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 195 insertions(+), 89 deletions(-) diff --git a/src/views/Tools/LayerTree.vue b/src/views/Tools/LayerTree.vue index decb1b3..3a2e50f 100644 --- a/src/views/Tools/LayerTree.vue +++ b/src/views/Tools/LayerTree.vue @@ -2,53 +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 }"> - <span v-show="!data.isEdit"> - <span :class="[data.id >= 99 ? 'slot-t-node--label' : '']">{{ - 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> - </span> + <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> + </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> + </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> @@ -64,7 +125,7 @@ export default { name: "tree", components: { queryinfo }, - data () { + data() { return { isBusy: false, // 姝e繖 lastPrjCode: "", // 鏈�鍚庨�夋嫨椤圭洰缂栫爜 @@ -74,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, @@ -101,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; @@ -121,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("鍥惧眰鍒楄〃鏌ヨ澶辫触"); @@ -147,7 +209,7 @@ sessionStorage.setItem("checkedLayers", JSON.stringify(checkedLayers)); }, // 璁剧疆鏍戞暟鎹� - setTreeData (source) { + setTreeData(source) { /*let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕 return cloneData.filter((father) => { // 寰幆鎵�鏈夐」 @@ -164,7 +226,7 @@ return arr; }, // 璁剧疆鏍戝瓙鑺傜偣鏁版嵁 - setTreeChildData (data, arr, pid) { + setTreeChildData(data, arr, pid) { let i = 0; while (i < data.length) { let d = data[i]; @@ -188,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(() => { @@ -196,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; @@ -224,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("_", ""); @@ -238,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) { @@ -256,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; @@ -275,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) { @@ -286,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; @@ -305,7 +384,7 @@ ); }, // 鑾峰彇鐡︾墖鍥涜嚦鑼冨洿 - getTileRectangle (res) { + getTileRectangle(res) { var value = res.rectangle.coordinates.getValue(); var val = { pubid: this.currentData.pubid, @@ -319,7 +398,7 @@ this.$bus.$emit("titleDown", val); }, // 鍥惧眰閫変腑浜嬩欢 - handleCheckChange (data, checked) { + handleCheckChange(data, checked) { if (this.isBusy) return; let nodes = []; @@ -348,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]; @@ -370,7 +449,7 @@ } }, // 鑾峰彇鑺傜偣ID - getCheckNodesIds () { + getCheckNodesIds() { let nodes = this.$refs.tree.getCheckedNodes(); let ids = []; for (let i in nodes) { @@ -380,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]; @@ -412,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; @@ -466,7 +545,7 @@ } }, // 鍒囨崲TMS - setChangeTMS (layers, checked) { + setChangeTMS(layers, checked) { let ids = this.getCheckNodesIds(), arr = []; for (let j in layers) { let layer = layers[j]; @@ -486,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; @@ -501,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]; @@ -526,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]; @@ -554,7 +646,7 @@ this.addDEMLayers(url, null == url); }, // 娣诲姞DEM鍥惧眰 - addDEMLayers (url, useSG) { + addDEMLayers(url, useSG) { if (useSG) { if (Viewer.terrainProvider._isMPT) return; @@ -574,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; @@ -584,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; //杩崱灏旂┖闂寸洿瑙掑潗鏍�=>鍦扮悊鍧愭爣锛堝姬搴﹀埗锛� @@ -599,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; @@ -609,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; @@ -629,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({ @@ -637,8 +733,10 @@ // } }, // 鍒囨崲椤圭洰 - prjChanged (code) { + prjChanged(code) { + this.$store.state.pigCode = code; + //if (code) { this.isBusy = true; let checkedLayers = this.getCheckedLayersByCode(code); @@ -660,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); @@ -669,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]; @@ -696,7 +794,7 @@ } }, // 鑾峰彇鏂版爲鏁版嵁 - getNewTreeData (code) { + getNewTreeData(code) { let data = JSON.parse(JSON.stringify(this.sourceData)); if (!code) return data; @@ -706,7 +804,7 @@ return data; }, // 璁剧疆鏍戞暟鎹瓙鑺傜偣 - setSubTreeData (data, code) { + setSubTreeData(data, code) { let j = 0; while (j < data.length) { let d = data[j]; @@ -725,7 +823,7 @@ } }, // 绉婚櫎椤圭洰鏍戞暟鎹� - rmPrjTreeData (data, code) { + rmPrjTreeData(data, code) { /*let j = 0; while (j < data.length) { let d = data[j]; @@ -778,7 +876,7 @@ } }, // 娣诲姞WFS鍥惧眰 * - addWFSLayers (res) { + addWFSLayers(res) { let url = res.resource + "?service=WFS&version=1.0.0&request=GetFeature&typeName=" + @@ -819,7 +917,7 @@ </script> <style scoped lang="less"> /* 鐐瑰嚮鑺傜偣鏃剁殑閫変腑棰滆壊 */ -.tree-container /deep/.el-tree-node.is-current>.el-tree-node__content { +.tree-container /deep/.el-tree-node.is-current > .el-tree-node__content { color: #409eff !important; } @@ -851,19 +949,19 @@ padding-left: 16px; } -.tree-container /deep/ .el-tree>.el-tree-node:before { +.tree-container /deep/ .el-tree > .el-tree-node:before { border-left: none; } -.tree-container /deep/ .el-tree>.el-tree-node:after { +.tree-container /deep/ .el-tree > .el-tree-node:after { border-top: none; } -.tree-container /deep/ .el-tree>.el-tree-node:before { +.tree-container /deep/ .el-tree > .el-tree-node:before { border-left: none; } -.tree-container /deep/ .el-tree>.el-tree-node:after { +.tree-container /deep/ .el-tree > .el-tree-node:after { border-top: none; } @@ -926,7 +1024,11 @@ z-index: 8; } -.tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::before { +.tree-container + /deep/ + .el-tree-node + .el-tree-node__children + .el-tree-node__content::before { border-left: 0px dashed #ccc; height: 100%; top: 0; @@ -946,7 +1048,7 @@ } .tree-container /deep/ .el-tree-node { - .is-leaf+.el-checkbox .el-checkbox__inner { + .is-leaf + .el-checkbox .el-checkbox__inner { display: inline-block; } @@ -955,7 +1057,11 @@ } } -.tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::after { +.tree-container + /deep/ + .el-tree-node + .el-tree-node__children + .el-tree-node__content::after { border-top: 0px dashed #ccc; } @@ -973,7 +1079,7 @@ /deep/.el-card__body { padding: 10px !important; - >div { + > div { padding-bottom: 10px; border-bottom: 1px solid #ccc; -- Gitblit v1.9.3