From 2cbbc0e4c0357260f370c47365810608c19131c9 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期一, 01 四月 2024 09:31:56 +0800
Subject: [PATCH] 代码更新
---
src/components/Screen/ProjectTree.vue | 600 ++++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 505 insertions(+), 95 deletions(-)
diff --git a/src/components/Screen/ProjectTree.vue b/src/components/Screen/ProjectTree.vue
index d174aaa..7082ed5 100644
--- a/src/components/Screen/ProjectTree.vue
+++ b/src/components/Screen/ProjectTree.vue
@@ -1,27 +1,15 @@
<template>
<div class="project_tree" :class="{ left_main_show: !leftMenuOpen }">
+ <div class="project_tree__title">宸ョ▼椤圭洰</div>
+ <el-input style="width: 80%" placeholder="杈撳叆鍏抽敭瀛楄繘琛屾煡璇�" suffix-icon="el-icon-search" v-model="filterText" size="mini"
+ :filter-node-method="filterNode">
+ </el-input>
<div class="tree-container">
- <el-tree
- :data="treeData"
- show-checkbox
- node-key="id"
- default-expand-all
- :props="defaultProps"
- ref="tree"
- class="el-tree"
- @check-change="handleCheckChange"
- >
- <div
- style="display: flex"
- class="custom-tree-node"
- slot-scope="{ node, data }"
- >
+ <el-tree :data="treeData" show-checkbox node-key="id" :props="defaultProps" ref="tree" class="el-tree"
+ @check="handleCheckChange" :filter-node-method="filterNode" @node-click="handleLeftclick">
+ <div style="display: flex" class="custom-tree-node" slot-scope="{ node, data }">
<div style="">
- <i
- v-if="data.children && data.children.length > 0"
- style="color: yellow"
- class="el-icon-folder-opened"
- ></i>
+ <i v-if="data.children && data.children.length > 0" style="color: yellow" class="el-icon-folder-opened"></i>
<i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
</div>
<!-- <div style="">
@@ -32,35 +20,30 @@
></i>
<i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
</div> -->
- <div
- :style="
- data.children && data.children.length > 0
- ? 'padding-left: 20px'
- : 'padding-left: 20px'
- "
- class="tree-label"
- :title="node.label || '-'"
- >
+ <div :style="data.children && data.children.length > 0
+ ? 'padding-left: 20px'
+ : 'padding-left: 20px'
+ " class="tree-label" :title="node.label || '-'">
{{ node.label }}
</div>
</div>
</el-tree>
</div>
- <div class="changeBaseLayer">
+ <!-- <div class="changeBaseLayer">
<div @click="changeMenulayer" class="CenDiv">
<div
id="cenBg"
v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
></div>
</div>
- </div>
+ </div> -->
</div>
</template>
<script>
import { right_menu, right_list, image_layer } from "@/assets/js/index.js"
-import { perms_selectLayers } from "@/api/api.js"
+import { perms_selectLayers, comprehensive_selectPubById } from "@/api/api.js"
export default {
data() {
@@ -68,7 +51,7 @@
treeData: [],
defaultProps: {
children: "children",
- label: "label",
+ label: "cnName",
},
typeIndex: null,
leftMenuOpen: false,
@@ -82,6 +65,8 @@
isActive: false,
isMenuLayer: true,
openEcharts: false,
+ filterText: "",
+ mptLayer: [],
}
},
@@ -90,81 +75,438 @@
this.rightMenu = right_menu
this.changeSelectli = this.rightList[0].id
this.changeSelectStyle = this.rightMenu[0].id
- this.addImageLayer()
+
+ this.$bus.$on("changeProjectLayer", (res) => {
+ this.setShowCheckedLayer();
+ })
+ },
+ watch: {
+ filterText(val) {
+ this.$refs.tree.filter(val)
+ },
+ obj(newVal, oldVal) {
+ if (newVal) {
+ this.addImageLayer()
+ }
+ }
+ },
+ computed: {
+ obj() {
+ return this.$store.state.showThematicFlag
+ }
},
methods: {
+ // 鏌ヨ
+ filterNode(value, data) {
+
+ if (!value) return true;
+ return data.cnName.indexOf(value) !== -1;
+ },
+ setShowCheckedLayer() {
+ var value = this.$refs.tree.getCheckedNodes();
+ var std = [];
+ for (var i in value) {
+ std.push(value[i].id)
+ }
+ if (std.indexOf(3) == -1) {
+ std.push(3);
+ this.$refs.tree.setCheckedKeys(std)
+ }
+ this.getWMSLayer();
+
+ },
async addImageLayer() {
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)
- if (data.result[i].isShow == 1) {
- std.push(data.result[i].id)
- this.setAddImageLayer(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])
- }
- }
- }
- this.treeData = layer_groups
+ var std = data.result;
+ var that = this;
+ var checkKey = [];
- this.$refs.tree.setCheckedKeys(std)
+ 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);
+ }
+ return str;
+ }
+ });
+ var value = std.filter((str) => {
+ if (str.url != null && str.type == 2 && str.isShow == 1) {
+ return str;
+ }
+ })
+ this.$refs.tree.setCheckedKeys(checkKey)
+ var res = this.setTreeData(val);
+ this.treeData = res
+ this.setShowImageLayer(value)
+ },
+ 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; // 杩斿洖涓�绾ц彍鍗�
+ });
},
handleCheckChange(data, checked, indeterminate) {
- if (data.children != null) return
- var std = []
- for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
- var val_id = Viewer.imageryLayers._layers[i].imageryProvider.name
- if (val_id == data.label) {
- std.push(data.label)
- const img_layer = Viewer.imageryLayers._layers[i]
- img_layer.show = checked
+
+
+
+ // var wmsLayer = [];
+ // var tilesetLayer = [];
+ // var tmsLayer = [];
+ // var mptLayer = [];
+ // for (var i in data) {
+ // if (data[i].type == 2) {
+ // switch (data[i].serveType) {
+ // case "WMS":
+ // wmsLayer.push(data[i])
+ // break;
+ // case "Tileset":
+ // tilesetLayer.push(data[i])
+ // break;
+ // case "TMS":
+ // tmsLayer.push(data[i])
+ // break;
+ // case "Mpt":
+ // mptLayer.push(data[i])
+ // break;
+ // }
+ // }
+ // }
+
+
+ if (data.type == 1) {
+ this.childOption = [];
+ this.getchilds(data);
+ var listWMS = [];
+ var listWFS = [];
+ var listTileset = [];
+ var listTMS = [];
+ var listMpt = [];
+ for (var i in this.childOption) {
+ switch (this.childOption[i].serveType) {
+ case 'WMS':
+ listWMS.push(this.childOption[i])
+ break;
+ case 'Tileset':
+ listTileset.push(this.childOption[i])
+ break;
+ case 'Mpt':
+ listMpt.push(this.childOption[i])
+ break;
+ case 'TMS':
+ listTMS.push(this.childOption[i])
+ break;
+
+ }
+ }
+ this.getWMSLayer();
+ this.setShowTilesetLayer(listTileset);
+ this.setShowMptLayer(listMpt);
+ this.setShowTMSLayer(listTMS);
+ } else if (data.type == 2) {
+ if (data.serveType == "WMS") {
+ this.getWMSLayer();
+ } else if (data.serveType == "Tileset") {
+ this.setShowTilesetLayer([data]);
+ } else if (data.serveType == "Mpt") {
+ this.setShowMptLayer([data]);
+ } else if (data.serveType == "TMS") {
+ this.setShowTMSLayer([data]);
}
}
- if (std.length == 0 && checked == true) {
- this.setAddImageLayer(data)
+ },
+ handleLeftclick(data, node) {
+
+ if (node.checked == true) {
+ if (data.serveType == 'Tileset') {
+ for (var i in Viewer.scene.primitives._primitives) {
+ if (
+ Viewer.scene.primitives._primitives[i].id == data.cnName
+ ) {
+ Viewer.flyTo(Viewer.scene.primitives._primitives[i]);
+ }
+ }
+ }
}
},
+ getchilds(source) {
+ if (source.children) {
+ var child = source.children
+ for (var i in child) {
+ if (child[i].children) {
+ this.getchilds(child[i])
+ } else {
+ this.childOption.push(child[i])
+ }
+ }
+ } else {
+ this.childOption.push(source)
+ }
+ },
+ setAddTMSLayers(res) {
+ var url = res.url;
+ if (res.url.indexOf("{host}") != -1) {
+ url = res.url.replace("{host}", iisHost);
+ }
+
+ if (res.pubid && res.pubid > 0) {
+ this.setQueryPubid(res);
+ } else {
+ var layer = Viewer.imageryLayers.addImageryProvider(
+ new Cesium.UrlTemplateImageryProvider({
+ url: url,
+ maximumLevel: 18,
+ })
+ );
+ layer.name = res.cnName;
+ setTimeout(() => {
+ this.getWMSLayer();
+ }, 100);
+ }
+ },
+ async setQueryPubid(res) {
+ const data = await comprehensive_selectPubById({ id: res.pubid })
+ if (data.code != 200) {
+
+ } else {
+ var url = data.result.url;
+ if (res.url.indexOf("{host}") != -1) {
+ url = res.url.replace("{host}", iisHost);
+ }
+ var layer = Viewer.imageryLayers.addImageryProvider(
+ new Cesium.UrlTemplateImageryProvider({
+ url: url,
+ maximumLevel: 18,
+ })
+ );
+ layer.name = res.cnName;
+
+ if (data.result.geom) {
+ var wkt = this.$wkt.parse(data.result.geom);
+ Viewer.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], 2000),
+ });
+ }
+ setTimeout(() => {
+ this.getWMSLayer();
+ }, 100);
+ }
+ },
+ setShowTMSLayer(result) {
+ var value = this.$refs.tree.getCheckedNodes();
+ var std = [];
+ for (var i in value) {
+ std.push(value[i].id)
+ }
+ for (var i in result) {
+ var tile = result[i]
+ if (std.indexOf(tile.id) != -1) {
+ this.setAddTMSLayers(tile)
+
+ } else {
+ for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
+ var val_id = window.Viewer.imageryLayers._layers[i].name;
+ if (val_id == tile.cnName) {
+ window.Viewer.imageryLayers.remove(
+ window.Viewer.imageryLayers._layers[i]
+ );
+ }
+ }
+ }
+ }
+ },
+ setShowMptLayer(result) {
+ var value = this.$refs.tree.getCheckedNodes();
+ var std = [];
+ for (var i in value) {
+ std.push(value[i].id)
+ }
+ for (var i in result) {
+ var tile = result[i]
+ if (std.indexOf(tile.id) != -1) {
+ this.setAddMPTLayers(tile)
+
+ } else {
+ for (var i in this.mptLayer) {
+ if (this.mptLayer[i].treeobj.name == tile.cnName) {
+ this.mptLayer[i].deleteObject();
+ this.mptLayer.splice(i, 1)
+ }
+ }
+ }
+ }
+ },
+ setAddMPTLayers(res) {
+ if (res.url.indexOf("{host}") != -1) {
+ res.url = res.url.replace("{host}", iisHost);
+ }
+ var url = res.url.split(';')
+
+ var layer = sgworld.Creator.createImageryProvider(res.cnName, "wms", {
+ url: url[0],
+ layers: url[1]
+ }, "0", undefined, true, "");
+
+ this.mptLayer.push(layer)
+ setTimeout(() => {
+ this.getWMSLayer();
+ }, 100);
+ },
+ getWMSLayer() {
+ var value = this.$refs.tree.getCheckedNodes();
+ var std = [];
+ for (var i in value) {
+ if (value[i].type == 2 && value[i].serveType == "WMS") {
+ std.push(value[i])
+ }
+ }
+ this.setShowWMSLayer(std);
+ },
+
+
+
+
+
+
+ setShowTilesetLayer(result) {
+ var value = this.$refs.tree.getCheckedNodes();
+ var std = [];
+ for (var i in value) {
+ std.push(value[i].id)
+ }
+ for (var i in result) {
+ var tile = result[i]
+ if (std.indexOf(tile.id) != -1) {
+ this.setAddTilesetLayers(tile)
+ } else {
+ for (var j in Viewer.scene.primitives._primitives) {
+ if (Viewer.scene.primitives._primitives[j].id == tile.cnName) {
+ Viewer.scene.primitives.remove(Viewer.scene.primitives._primitives[j])
+ }
+ }
+ }
+ }
+
+ },
+ setAddTilesetLayers(res) {
+ var url;
+ if (res.url.indexOf("{host}") != -1) {
+ url = res.url.replace("{host}", iisHost);
+ } else {
+ url = modelUrl + "/" + res.url
+ }
+ var tileset = Viewer.scene.primitives.add(
+ new Cesium.Cesium3DTileset({
+ name: res.cnName,
+ url: url, //192.168.20.106,to4
+ maximumScreenSpaceError: url.indexOf("/pnts/") > -1 ? 16 : 64, // 鏈�澶у睆骞曠┖闂撮敊璇細16
+ maximumMemoryUsage: 768, // 鏈�澶у唴瀛橈細512
+ dynamicScreenSpaceError: true, // 鍑忓皯绂荤浉鏈鸿緝杩滅殑灞忓箷绌洪棿閿欒锛歠alse
+ skipLevelOfDetail: true, // 鍦ㄩ亶鍘嗘椂鍊欒烦杩囪鎯咃細false
+ })
+ );
+ tileset.readyPromise.then((tileset) => {
+ tileset.id = res.cnName;
+ tileset.layerId = res.id;
+ this.getTilesetArgs(tileset, res);
+ });
+ },
+ async getTilesetArgs(tileset, res) {
+ if (res.pubid > 0) {
+ const data = await comprehensive_selectPubById({ id: res.pubid })
+ if (data.code != 200) {
+ } else {
+ this.reload(tileset, data.result.json)
+ }
+ } else {
+ this.tileSet(tileset, parseFloat(res.elev))
+ }
+ },
+ reload(tileset, res) {
+ var vm = JSON.parse(res)
+ var pos = Cesium.Cartesian3.fromDegrees(vm.lon, vm.lat, vm.height);
+ var converter = Cesium.Transforms.eastNorthUpToFixedFrame;
+ var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(vm.yaw), 0, 0);
+ var matrix = Cesium.Transforms.headingPitchRollToFixedFrame(pos, hpr, Cesium.Ellipsoid.WGS84, converter);
+ tileset._root.transform = matrix;
+ Viewer.flyTo(tileset);
+ },
+ tileSet(tileset, height) {
+ //3dtile妯″瀷鐨勮竟鐣岀悆浣�
+ var boundingSphere = tileset.boundingSphere;
+ //杩崱灏旂┖闂寸洿瑙掑潗鏍�=>鍦扮悊鍧愭爣锛堝姬搴﹀埗锛�
+ var cartographic_original = Cesium.Cartographic.fromCartesian(boundingSphere.center);
+ //鍦扮悊鍧愭爣锛堝姬搴﹀埗锛�=>杩崱灏旂┖闂寸洿瑙掑潗鏍�
+ var Cartesian3_original = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, cartographic_original.height);
+ var Cartesian3_offset = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, height);
+ //鑾峰緱鍦伴潰鍜宱ffset鐨勮浆鎹�
+ var translation = Cesium.Cartesian3.subtract(Cartesian3_offset, Cartesian3_original, new Cesium.Cartesian3());
+ //淇敼妯″瀷鐭╅樀
+ tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+ Viewer.flyTo(tileset);
+ },
+
+
+
+
+ setShowWMSLayer(res) {
+ var url = [];
+ this.setClearWmsLayer();
+
+ for (var i in res) {
+ if (res[i].url) {
+ url.push(res[i].url)
+ }
+ }
+ url = url.reverse();
+ this.setAddImageLayer(url)
+ },
+ setShowImageLayer(res) {
+
+ var url = [];
+ for (var i in res) {
+ url.push(res[i].enName)
+ }
+ url = url.reverse();
+ this.setAddImageLayer(url)
+ },
+ setClearWmsLayer() {
+ for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
+ var val_id = window.Viewer.imageryLayers._layers[i].imageryProvider.name;
+ if (val_id == "Wms_Layer") {
+ window.Viewer.imageryLayers.remove(
+ window.Viewer.imageryLayers._layers[i]
+ );
+ }
+ }
+ },
+
+
setAddImageLayer(res) {
- let layerWMS = new Cesium.WebMapServiceImageryProvider({
+ var layerWMS = new Cesium.WebMapServiceImageryProvider({
url: geoServerURl,
- layers: res.resource,
+ layers: res.toString(),
parameters: {
transparent: true,
format: "image/png",
+ srs: "EPSG:4490",
+ styles: "",
},
- })
- layerWMS.name = res.label
- Viewer.imageryLayers.addImageryProvider(layerWMS)
+ tileWidth: 512,
+ tileHeight: 512,
+ });
+ layerWMS.name = "Wms_Layer";
+ window.Viewer.scene.imageryLayers.addImageryProvider(layerWMS);
},
changeMenulayer() {
this.isActive = !this.isActive
@@ -182,6 +524,10 @@
Viewer.imageryLayers._layers[3].show = true
}
},
+ // filterNode(value, data) {
+ // if (!value) return true
+ // return data.label.indexOf(value) !== -1
+ // },
},
}
</script>
@@ -189,27 +535,61 @@
<style lang="scss" scoped>
.project_tree {
margin: 0;
- width: 300px;
+ width: 100%;
height: 100%;
transition: width 2s;
- background: url("~@/assets/img/themic/宸︽.png") no-repeat center;
+ background: url("~@/assets/img/Screen/prjectree.png") no-repeat center;
+
background-size: 100% 100%;
+
+ &__title {
+ color: #fff;
+ height: 30px;
+ font-size: 20px;
+ width: 130px;
+ text-align: center;
+ width: 140px;
+ padding-top: 15px;
+ color: #fff;
+ background: linear-gradient(0deg,
+ rgba(81, 192, 243, 0.65) 0%,
+ rgba(255, 255, 255, 0.65) 86%);
+ -webkit-background-clip: text;
+ font-size: 17.5px;
+ font-family: HYLingXinJ, HYLingXinJ-regular;
+ font-weight: normal;
+ letter-spacing: 1.05px;
+ }
+
+ .el-input {
+ width: 80%;
+ padding: 5px 0 5px 30px;
+ }
.tree-container {
margin: 10px;
- height: 90%;
+ height: 85%;
overflow-y: auto;
+
+ /deep/ .tree-label {
+ color: #eee !important;
+ }
+
+ /deep/ .el-tree {
+ color: #eee !important;
+ }
}
+
.changeBaseLayer {
width: 100%;
display: flex;
justify-content: flex-end;
overflow: hidden;
}
+
.CenDiv {
height: 40px;
width: 60px;
-
margin-right: 7%;
border-radius: 5px;
bottom: 3%;
@@ -226,6 +606,7 @@
background-size: 100% 100%;
border-radius: 5px;
}
+
.menuLayer {
height: 40px;
width: 60px;
@@ -234,6 +615,31 @@
background-size: 100% 100%;
border-radius: 5px;
}
+}
+
+/* 婊氬姩鏉℃牱寮� */
+
+::-webkit-scrollbar {
+ width: 4px;
+ height: 4px;
+ background-color: #409eff;
+}
+
+::-webkit-scrollbar-track {
+ background: #eee;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #409eff;
+ border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #409eff;
+}
+
+::-webkit-scrollbar-corner {
+ background: #409eff;
}
</style>
@@ -248,20 +654,24 @@
margin-left: -14px;
}
- .el-tree-node__content > label.el-checkbox {
+ .el-tree-node__content>label.el-checkbox {
margin-right: -30px;
}
- .el-tree-node__content > .el-tree-node__expand-icon {
+
+ .el-tree-node__content>.el-tree-node__expand-icon {
visibility: hidden;
}
- .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
+
+ .el-tree .el-tree-node .is-leaf+.el-checkbox .el-checkbox__inner {
display: block;
visibility: visible;
}
+
.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
display: none;
// visibility: hidden;
}
+
.tree-label {
font-size: 16px;
color: #fff;
--
Gitblit v1.9.3