From c42e12bcc0877678cf09438b7a6bfb9ccd7342fa Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期五, 24 三月 2023 19:06:08 +0800
Subject: [PATCH] 转孔柱状图添加图例，官网一张图修改
---
src/components/Screen/ProjectTree.vue | 429 +++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 362 insertions(+), 67 deletions(-)
diff --git a/src/components/Screen/ProjectTree.vue b/src/components/Screen/ProjectTree.vue
index e237329..05e9259 100644
--- a/src/components/Screen/ProjectTree.vue
+++ b/src/components/Screen/ProjectTree.vue
@@ -10,6 +10,7 @@
suffix-icon="el-icon-search"
v-model="filterText"
size="mini"
+ :filter-node-method="filterNode"
>
</el-input>
<div class="tree-container">
@@ -23,6 +24,7 @@
class="el-tree"
@check="handleCheckChange"
:filter-node-method="filterNode"
+ @node-click="handleLeftclick"
>
<div
style="display: flex"
@@ -77,7 +79,7 @@
<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() {
@@ -85,7 +87,7 @@
treeData: [],
defaultProps: {
children: "children",
- label: "label",
+ label: "cnName",
},
typeIndex: null,
leftMenuOpen: false,
@@ -100,6 +102,7 @@
isMenuLayer: true,
openEcharts: false,
filterText: "",
+ mptLayer: [],
}
},
@@ -119,6 +122,12 @@
},
},
methods: {
+ // 鏌ヨ
+ filterNode(value, data) {
+
+ if (!value) return true;
+ return data.cnName.indexOf(value) !== -1;
+ },
setShowCheckedLayer() {
var value = this.$refs.tree.getCheckedNodes();
var std = [];
@@ -136,79 +145,365 @@
if (data.code != 200) {
return this.$message.error("鍥惧眰鍒楄〃鏌ヨ澶辫触")
}
- var std = []
- var layer_list = []
- var layer_groups = []
- var layerData = [];
- 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)
- layerData.push(data.result[i])
- // 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)
- this.setShowImageLayer(layerData)
+ 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 (std.length == 0 && checked == true) {
- // this.setAddImageLayer(data)
- // }
- this.setClearWmsLayer()
- var value = this.$refs.tree.getCheckedNodes();
- var url = [];
- for (var i in value) {
- if (value[i].resource && value[i].type == 2) {
- url.push(value[i].resource)
+
+
+ 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.setShowWMSLayer(listWMS);
+ this.setShowTilesetLayer(listTileset);
+ this.setShowMptLayer(listMpt);
+ this.setShowTMSLayer(listTMS);
+ } else if (data.type == 2) {
+ if (data.serveType == "WMS") {
+ this.setShowWMSLayer([data]);
+ } else if (data.serveType == "Tileset") {
+ this.setShowTilesetLayer([data]);
+ } else if (data.serveType == "Mpt") {
+ this.setShowMptLayer([data]);
+ } else if (data.serveType == "TMS") {
+ this.setShowTMSLayer([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: 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) {
- this.setClearWmsLayer()
+
var url = [];
for (var i in res) {
url.push(res[i].enName)
@@ -260,10 +555,10 @@
Viewer.imageryLayers._layers[3].show = true
}
},
- filterNode(value, data) {
- if (!value) return true
- return data.label.indexOf(value) !== -1
- },
+ // filterNode(value, data) {
+ // if (!value) return true
+ // return data.label.indexOf(value) !== -1
+ // },
},
}
</script>
--
Gitblit v1.9.3