<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"
|
: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-else
|
style="color: skyblue"
|
class="el-icon-folder-opened"
|
></i>
|
</div>
|
<!-- <div style="">
|
<i
|
v-if="node.expanded && 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="
|
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 @click="changeMenulayer" class="CenDiv">
|
<div
|
id="cenBg"
|
v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
|
></div>
|
</div>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import { right_menu, right_list, image_layer } from "@/assets/js/index.js"
|
|
import { perms_selectLayers, comprehensive_selectPubById } from "@/api/api.js"
|
|
export default {
|
data() {
|
return {
|
treeData: [],
|
defaultProps: {
|
children: "children",
|
label: "cnName",
|
},
|
typeIndex: null,
|
leftMenuOpen: false,
|
rightMenuOpen: false,
|
changeSelectStyle: null,
|
changeSelectli: null,
|
rightMenu: [],
|
rightList: [],
|
treeData: [],
|
centerFlag: false,
|
isActive: false,
|
isMenuLayer: true,
|
openEcharts: false,
|
filterText: "",
|
mptLayer: [],
|
}
|
},
|
|
mounted() {
|
this.rightList = right_list[0]
|
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)
|
},
|
},
|
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 = data.result;
|
var that = this;
|
var checkKey = [];
|
|
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) : ""; // 给父级添加一个children属性,并赋值
|
// 属于同一对象问题,例如:令 a=b、c=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) {
|
|
|
|
// 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]);
|
}
|
}
|
},
|
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, // 减少离相机较远的屏幕空间错误:false
|
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);
|
//获得地面和offset的转换
|
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) {
|
var layerWMS = new Cesium.WebMapServiceImageryProvider({
|
url: geoServerURl,
|
layers: res.toString(),
|
parameters: {
|
transparent: true,
|
format: "image/png",
|
srs: "EPSG:4490",
|
styles: "",
|
},
|
tileWidth: 512,
|
tileHeight: 512,
|
});
|
layerWMS.name = "Wms_Layer";
|
window.Viewer.scene.imageryLayers.addImageryProvider(layerWMS);
|
},
|
changeMenulayer() {
|
this.isActive = !this.isActive
|
this.isMenuLayer = !this.isMenuLayer
|
this.setLayerVisible()
|
},
|
setLayerVisible() {
|
if (this.isActive == true) {
|
Viewer.imageryLayers._layers[1].show = true
|
Viewer.imageryLayers._layers[2].show = false
|
Viewer.imageryLayers._layers[3].show = false
|
} else {
|
Viewer.imageryLayers._layers[1].show = false
|
Viewer.imageryLayers._layers[2].show = true
|
Viewer.imageryLayers._layers[3].show = true
|
}
|
},
|
// filterNode(value, data) {
|
// if (!value) return true
|
// return data.label.indexOf(value) !== -1
|
// },
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.project_tree {
|
margin: 0;
|
width: 100%;
|
height: 100%;
|
transition: width 2s;
|
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: 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%;
|
}
|
|
// .CenDiv:hover {
|
|
// }
|
.active {
|
height: 40px;
|
width: 60px;
|
background: url("~@/assets/img/themic/默认的影像.png") no-repeat center;
|
position: absolute;
|
background-size: 100% 100%;
|
border-radius: 5px;
|
}
|
.menuLayer {
|
height: 40px;
|
width: 60px;
|
background: url("~@/assets/img/themic/默认的底图.png") no-repeat center;
|
position: absolute;
|
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>
|
|
<style lang="scss">
|
.leftContainer {
|
.project_tree {
|
.el-tree-node__content {
|
margin-left: 20px;
|
}
|
|
.el-tree .el-tree-node .is-leaf {
|
margin-left: -14px;
|
}
|
|
.el-tree-node__content > label.el-checkbox {
|
margin-right: -30px;
|
}
|
.el-tree-node__content > .el-tree-node__expand-icon {
|
visibility: hidden;
|
}
|
.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;
|
}
|
}
|
}
|
</style>
|