<template>
|
<div ref="lyrctrl" class="lycInitial" :class="theme" v-if="visiable" v-draw>
|
<div class="lyrCtrl-header">
|
<i class="el-icon-menu"></i>
|
图层
|
<div style="float: right; cursor: pointer" @click="closeData">
|
<i class="el-icon-close"></i>
|
</div>
|
</div>
|
<div class="searchComponent">
|
<el-input
|
style="width: 100%"
|
size="mini"
|
placeholder="请输入内容查询"
|
prefix-icon="el-icon-search"
|
v-model="queryString"
|
@keyup.enter.native="handleQuery"
|
>
|
</el-input>
|
</div>
|
|
<div
|
class="scroll-bar"
|
style="
|
width: 100%;
|
overflow-y: auto;
|
position: absolute;
|
margin: 70px 0px 10px 0px;
|
top: 0;
|
right: 0px;
|
bottom: 0px;
|
"
|
>
|
<el-tree
|
style="background-color: transparent; width: 100%"
|
:data="layerData"
|
:props="defaultProps"
|
show-checkbox
|
highlight-current
|
:node-key="keyString"
|
:default-expanded-keys="[
|
'qingxiemoxing',
|
'shiliangtuceng',
|
'fssh_3dmodel_ZL01',
|
]"
|
:default-checked-keys="checkenArr"
|
ref="tree"
|
@check="handleCheckChange"
|
>
|
<div
|
style="display: flex; justify-content: flex-start"
|
class="font_color"
|
slot-scope="{ node, data }"
|
>
|
<div
|
style="display: inline-block; padding-top: 1px"
|
@dblclick="flyTo(data)"
|
>
|
<i
|
class="font_color"
|
:class="[
|
data.haschildren ? 'el-icon-folder-opened' : 'el-icon-document',
|
]"
|
></i>
|
<span class="font_color" style="padding-left: 4px">{{
|
node.label
|
}}</span>
|
</div>
|
<!-- <div style="margin-left: 50px">
|
<el-slider
|
v-model="data.alphaValue"
|
style="width: 120px"
|
:show-tooltip="false"
|
@change="handleAlphaChange"
|
></el-slider>
|
</div> -->
|
</div>
|
</el-tree>
|
</div>
|
</div>
|
</template>
|
<script>
|
//人员撒点对象
|
let personLableArr = [];
|
//请求的人员数据
|
let personWsData = [];
|
let itemLabel;
|
let closeTimeout = false;
|
let ModelMap = new Map();
|
// var map = new Map();
|
import { queryPersonHeight } from "../../../api/api";
|
import axios from "axios";
|
import { mapState, mapMutations } from "vuex";
|
export default {
|
props: ["showLayerContrl", "keyString"],
|
data() {
|
return {
|
theme: "",
|
dataurl: "",
|
conheight: {
|
"overflow-y": "auto",
|
padding: "5px",
|
position: "absolute",
|
top: 0,
|
bottom: 0,
|
},
|
showtip: false,
|
visiable: true,
|
transvalue: 0,
|
defaultProps: {
|
children: "children",
|
label: "name",
|
},
|
alphaValue: 100,
|
layerData: [],
|
originalData: [], //备份一个数据，以便还原
|
_projectSource: [],
|
|
alldisabled: [],
|
defaultCheck: [],
|
allnames: [],
|
queryString: "",
|
currentKey: "1380123488525881344",
|
cindex: 0,
|
checkenArr: [],
|
timer: null,
|
};
|
},
|
created() {
|
this.show(LAYERJSON_URL, null, "black");
|
this.init();
|
},
|
methods: {
|
// 获取vuex中mutation里的方法
|
...mapMutations([
|
"UPDATE_TREE",
|
"UPDATE_restore_STATE",
|
"UPDATE_layer_STATE",
|
]),
|
init() {
|
window.addEventListener("message", this.showLayers);
|
},
|
|
showLayers(e) {
|
let funName = e.data.funName;
|
let data = e.data.data;
|
switch (funName) {
|
case "showLayers":
|
let layer = e.data.data;
|
let checked = e.data.isCheck;
|
if (layer) {
|
layer.forEach((e) => {
|
if (checked) {
|
if (sgworld) {
|
this.setVisiable(e, checked);
|
}
|
} else {
|
if (sgworld) {
|
this.setVisiable(e, checked);
|
}
|
}
|
});
|
}
|
|
break;
|
case "flyTo":
|
// this.$refs.tree.setCheckedKeys(this.defaultCheck);
|
// //默认跳转位置;
|
// this.$refs.tree.setCheckedKeys([
|
// "fssh_3dmodel_ZL01E",
|
// "fssh_3dmodel_ground",
|
// ]);
|
// let layer = this.$refs.tree.getCheckedNodes();
|
// layer.forEach((e) => {
|
// this.handleCheckChange(e, { checkedKeys: [e.id] });
|
// });
|
// this.flyTo(layer[0]);
|
// }, 100);
|
this.$refs.tree.setCheckedKeys([e.data.data.id]);
|
let models = this.$refs.tree.getCheckedNodes();
|
this.flyTo(models[0]);
|
break;
|
}
|
},
|
getwsdata() {
|
//接收最新的map人员数组
|
let personData = [];
|
personData = this.$store.state.personState;
|
// if (personData.length == 0) return;
|
this.showPerson(personData);
|
},
|
showPerson(data) {
|
if (personLableArr.length !== 0) {
|
personLableArr.forEach((item) => {
|
// sgworld.Creator.DeleteObject(item);
|
window.Viewer.entities.remove(item);
|
personLableArr = [];
|
});
|
}
|
data.forEach((item) => {
|
let imgUrl;
|
switch (item.type) {
|
case "1": //员工
|
imgUrl = SmartEarthRootUrl + "Workers/image/icon/kuanggong.gif";
|
break;
|
case "2": //承包商
|
imgUrl = SmartEarthRootUrl + "Workers/image/icon/kuanggong.gif";
|
break;
|
case "3": //访客
|
imgUrl = SmartEarthRootUrl + "Workers/image/icon/kuanggong.gif";
|
break;
|
}
|
let gifDiv = document.createElement("div");
|
let gifImg = document.createElement("img");
|
|
// gif库需要img标签配置下面两个属性
|
gifImg.setAttribute("rel:animated_src", imgUrl);
|
gifImg.setAttribute("rel:auto_play", "1"); // 设置自动播放属性
|
gifDiv.appendChild(gifImg);
|
let superGif = new SuperGif({
|
gif: gifImg,
|
});
|
//取出楼层数
|
let floor = item.floorNo.replace(/[^0-9]/gi, "");
|
//请求高度
|
let params = {
|
floor_num: floor,
|
x: item.longitude,
|
y: item.latitude,
|
};
|
queryPersonHeight(params).then((res) => {
|
if (res.data.data.length !== 0) {
|
if (
|
res.data.data[0].cenx &&
|
res.data.data[0].ceny &&
|
parseFloat(res.data.data[0].high)
|
)
|
superGif.load(function () {
|
itemLabel = sgworld.Viewer.entities.add({
|
position: Cesium.Cartesian3.fromDegrees(
|
res.data.data[0].cenx,
|
res.data.data[0].ceny,
|
parseFloat(res.data.data[0].high)
|
),
|
billboard: {
|
image: new Cesium.CallbackProperty(() => {
|
// 转成base64,直接加canvas理论上是可以的，这里设置有问题
|
return superGif.get_canvas().toDataURL();
|
}, false),
|
// scale: 0.25,
|
},
|
});
|
// console.log(itemLabel);
|
//entity中可获取的属性
|
itemLabel.properties = item;
|
personLableArr.push(itemLabel);
|
});
|
} else {
|
console.log("未查询到人员高度值");
|
}
|
});
|
});
|
},
|
|
// showPerson(data) {
|
// if (personLableArr.length !== 0) {
|
// personLableArr.forEach((item) => {
|
// // sgworld.Creator.DeleteObject(item);
|
// window.Viewer.entities.remove(item);
|
// personLableArr = [];
|
// });
|
// }
|
// data.forEach((item) => {
|
// let url = SmartEarthRootUrl + "Workers/image/icon/kuanggong.gif";
|
// let gifDiv = document.createElement("div");
|
// let gifImg = document.createElement("img");
|
|
// // gif库需要img标签配置下面两个属性
|
// gifImg.setAttribute("rel:animated_src", url);
|
// gifImg.setAttribute("rel:auto_play", "1"); // 设置自动播放属性
|
// gifDiv.appendChild(gifImg);
|
|
// let superGif = new SuperGif({
|
// gif: gifImg,
|
// });
|
// superGif.load(function () {
|
// itemLabel = sgworld.Viewer.entities.add({
|
// position: Cesium.Cartesian3.fromDegrees(
|
// item.longitude,
|
// item.latitude
|
// ),
|
// billboard: {
|
// image: new Cesium.CallbackProperty(() => {
|
// // 转成base64,直接加canvas理论上是可以的，这里设置有问题
|
// return superGif.get_canvas().toDataURL();
|
// }, false),
|
// // scale: 0.25,
|
// },
|
// });
|
// // console.log(itemLabel);
|
// itemLabel.properties = item;
|
// personLableArr.push(itemLabel);
|
// });
|
|
// //取出楼层数
|
// let floor = item.floorNo.replace(/[^0-9]/gi, "");
|
// //请求高度
|
// let params = {
|
// floor_num: floor,
|
// x: item.longitude,
|
// y: item.latitude,
|
// };
|
// // queryPersonHeight(params).then((res) => {
|
// // if (res.data.data.length !== 0) {
|
// // if (
|
// // res.data.data[0].cenx &&
|
// // res.data.data[0].ceny &&
|
// // parseFloat(res.data.data[0].high)
|
// // )
|
// // itemLabel = sgworld.Creator.CreateLabel(
|
// // {
|
// // X: res.data.data[0].cenx,
|
// // Y: res.data.data[0].ceny,
|
// // Altitude: parseFloat(res.data.data[0].high),
|
// // },
|
// // // {
|
// // // X: item.longitude,
|
// // // Y: item.latitude,
|
// // // Altitude: 1,
|
// // // },
|
// // item.name,
|
// // imgUrl,
|
// // {
|
// // pixelOffset: {
|
// // x: 0,
|
// // y: -50,
|
// // },
|
|
// // disableDepthTestDistance: Infinity,
|
// // },
|
// // 0,
|
// // "文本"
|
// // );
|
// // //entity中可获取的属性
|
// // itemLabel.item.properties = item;
|
// // personLableArr.push(itemLabel);
|
// // } else {
|
// // console.log("未查询到人员高度值");
|
// // }
|
// // });
|
// });
|
// },
|
|
closeData() {
|
this.$emit("closeLyr", false);
|
},
|
show(url, data, theme) {
|
this.visiable = true;
|
if (url) {
|
this.dataurl = url;
|
this.getLayerData();
|
} else if (data) {
|
this.parseJson(data.children);
|
this.layerData = data && data.children;
|
this.originalData = JSON.parse(JSON.stringify(this.layerData));
|
// this.setDefaultCheck(data);
|
}
|
if (theme) {
|
switch (theme.toLowerCase()) {
|
case "black":
|
this.theme = "drag_black";
|
break;
|
case "green":
|
this.theme = "drag_green";
|
break;
|
case "blue":
|
this.theme = "drag_blue";
|
break;
|
default:
|
this.theme = "drag";
|
break;
|
}
|
} else {
|
this.theme = "drag";
|
}
|
},
|
handleCheckChange(treeNode, checked) {
|
let ischecked = checked.checkedKeys.indexOf(treeNode["id"]) > -1;
|
|
if (sgworld) this.setVisiable(treeNode, ischecked);
|
|
this.$emit("handleCheckChange", treeNode); //父方法调用你
|
},
|
// handleQuery() {
|
// var names = this.allnames;
|
// var results = this.queryString
|
// ? names.filter(this.createFilter(this.queryString))
|
// : names;
|
// // 调用 callback 返回建议列表的数据
|
// this.$nextTick(() => {
|
// if (results.length > 0) {
|
// this.currentKey = results[this.cindex].id;
|
// this.$refs.tree.setCurrentKey(this.currentKey);
|
// let parentNode = this.$refs.tree.getNode(this.currentKey).parent;
|
// if (parentNode) {
|
// parentNode.expanded = true;
|
// }
|
// setTimeout(() => {
|
// document.getElementsByClassName("is-current")[0].scrollIntoView(); //滚动定位，时好时坏
|
// }, 500);
|
// this.cindex++;
|
// if (this.cindex >= results.length) this.cindex = 0;
|
// } else {
|
// this.$message("无相关" + this.queryString + "叶子节点。");
|
// }
|
// });
|
// },
|
handleQuery() {
|
let _d = JSON.parse(JSON.stringify(this.originalData));
|
if (this.queryString) {
|
// this.layerData = this.convert_ListToTree(result );
|
this.layerData = this.handleTreeData(_d, this.queryString);
|
let that = this;
|
this.$nextTick(() => {
|
const treeExpansion_forAll = function (data) {
|
data.forEach((item) => {
|
that.$refs.tree.getNode(item.id).expanded = true;
|
if (item.children != undefined && item.children != null) {
|
treeExpansion_forAll(item.children);
|
}
|
});
|
};
|
treeExpansion_forAll(that.layerData);
|
});
|
} else {
|
this.layerData = _d;
|
}
|
},
|
createFilter(queryString) {
|
return (item) => {
|
return item.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1;
|
};
|
},
|
|
handleTreeData(treeData, searchValue) {
|
if (!treeData || treeData.length === 0) {
|
return [];
|
}
|
const array = [];
|
for (let i = 0; i < treeData.length; i += 1) {
|
let match = false;
|
for (let pro in treeData[i]) {
|
if (typeof treeData[i][pro] == "string") {
|
match |= treeData[i][pro].includes(searchValue);
|
if (match) break;
|
}
|
}
|
if (
|
this.handleTreeData(treeData[i].children, searchValue).length > 0 ||
|
match
|
) {
|
array.push({
|
...treeData[i],
|
children: this.handleTreeData(treeData[i].children, searchValue),
|
});
|
}
|
}
|
return array;
|
},
|
setVisiable(treeNode, checked) {
|
if (treeNode.sourceType == "websocket" && checked == true) {
|
this.getwsdata();
|
this.timer = setInterval(() => {
|
this.getwsdata();
|
}, 5000);
|
}
|
if (treeNode.sourceType == "websocket" && checked == false) {
|
//关闭定时器
|
clearInterval(this.timer);
|
this.timer = null;
|
if (personLableArr.length !== 0) {
|
personLableArr.forEach((item) => {
|
sgworld.Creator.DeleteObject(item);
|
personLableArr = [];
|
});
|
}
|
}
|
|
if (checked !== undefined) {
|
treeNode.checked = checked;
|
} else {
|
treeNode.checked = !treeNode.checked;
|
}
|
if (treeNode.children) {
|
treeNode.children.forEach((item) => {
|
this.setVisiable(item, treeNode.checked);
|
});
|
return;
|
} else if (treeNode._children) {
|
if (treeNode.thisView === "ewzj") {
|
treeNode._children[0].checked = treeNode.checked;
|
if (treeNode._children[0].children) {
|
treeNode._children[0].children.forEach((item) => {
|
item.checked = treeNode.checked;
|
this.addTreeData(item);
|
});
|
} else {
|
this.addTreeData(treeNode._children[0]);
|
}
|
} else if (treeNode.thisView === "swzj") {
|
for (let i = 1; i < treeNode._children.length; i++) {
|
treeNode._children[i].checked = treeNode.checked;
|
}
|
treeNode._children.forEach((item, index) => {
|
index !== 0 && this.addTreeData(item);
|
});
|
} else if (!treeNode.thisView) {
|
treeNode._children.forEach((item, index) => {
|
item.checked = treeNode.checked;
|
if (item.children) {
|
item.children.forEach((_item) => {
|
_item.checked = item.checked;
|
this.addTreeData(_item);
|
});
|
} else {
|
this.addTreeData(item);
|
}
|
});
|
}
|
return;
|
}
|
if (!treeNode.isAdd) {
|
this.addTreeData(treeNode);
|
return;
|
}
|
let data = _getTreeData(treeNode.id);
|
if (data) {
|
data.item &&
|
data.item.setVisibility &&
|
data.item.setVisibility(treeNode.checked);
|
data.item &&
|
data.item.setVisible &&
|
data.item.setVisible(treeNode.checked);
|
data.item &&
|
data.item.show !== undefined &&
|
(data.item.show = treeNode.checked);
|
if (data.datatype === "particle") {
|
data.item.forEach((item) => {
|
item.show = treeNode.checked;
|
});
|
}
|
} else {
|
if (
|
treeNode.id &&
|
treeNode.id.indexOf &&
|
treeNode.id.indexOf("---") > -1
|
) {
|
var ids = id.split("---");
|
ids.forEach((item) => {
|
sgworld.ProjectTree.setVisibility(item, treeNode.checked);
|
});
|
} else {
|
sgworld.ProjectTree.setVisibility(treeNode.id, treeNode.checked);
|
}
|
}
|
},
|
flyTo(treeNode) {
|
if (treeNode.children) return;
|
if (treeNode._children && treeNode._children[0]) {
|
this.flyTo(treeNode._children[0]);
|
return;
|
}
|
if (treeNode && treeNode.flyTo) {
|
if (treeNode && treeNode.flyTo.length === 3) {
|
// console.log("flyToPosition");
|
sgworld.Navigate.flyToPosition(
|
treeNode.flyTo[0],
|
treeNode.flyTo[1],
|
1000 // treeNode.flyTo[2]
|
);
|
} else if (treeNode && treeNode.flyTo.length === 4) {
|
// console.log("flyToPointsInterest");
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Rectangle.fromDegrees(
|
treeNode.flyTo[0],
|
treeNode.flyTo[1],
|
1000, // treeNode.flyTo[2],
|
treeNode.flyTo[3]
|
),
|
});
|
} else {
|
// console.log("flyToPointsInterest");
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
treeNode.flyTo[0],
|
treeNode.flyTo[1],
|
1000 //treeNode.flyTo[2]
|
),
|
orientation: {
|
heading: treeNode.flyTo[3],
|
pitch: treeNode.flyTo[4],
|
roll: treeNode.flyTo[5],
|
},
|
});
|
}
|
return;
|
}
|
let data = sgworld.ProjectTree.getObject(treeNode.id);
|
// console.log(data);
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
data.lon,
|
data.lat - 0.0015,
|
data.height + 300
|
),
|
orientation: {
|
// heading: Cesium.Math.toRadians(180.0),
|
pitch: Cesium.Math.toRadians(-60.0),
|
// roll: Cesium.Math.toRadians(0.0),
|
},
|
});
|
|
// data && data.item
|
// ? sgworld.Navigate.flyToObj(data.item)
|
// : sgworld.Navigate.flyToObj(data);
|
},
|
handleAlphaChange(val) {
|
let node = this.$refs.tree.getCurrentNode();
|
},
|
getLayerData() {
|
this.$nextTick(() => {
|
axios.get(this.dataurl).then((response) => {
|
let msg = {
|
funName: "layerJson",
|
data: response.data,
|
};
|
setTimeout(() => {
|
window.parent.postMessage(msg, "*");
|
}, 1000);
|
// this.sendJson(msg);
|
this.parseJson(response.data.children);
|
this.layerData = response.data && response.data.children;
|
this.originalData = response.data && response.data.children;
|
// this.setDefaultCheck(response.data);
|
});
|
});
|
|
// if (sgworld) {
|
// let source = sgworld.ProjectTree.Source;
|
// this.layerData = this.convert(source);
|
// }
|
},
|
sendJson(msg) {},
|
convert_ListToTree(data, opt) {
|
if (!opt) {
|
opt = {};
|
opt.key = "id";
|
opt.parent = "pid";
|
opt.children = "children";
|
}
|
//rows带有pid的数组，转换成带children的
|
let result = [];
|
if (!Array.isArray(data)) {
|
return result;
|
}
|
data.forEach((item) => {
|
delete item[opt.children];
|
});
|
let map = {};
|
data.forEach((item) => {
|
map[item[opt.key]] = item;
|
});
|
data.forEach((item) => {
|
let parent = map[item[opt.parent]];
|
if (parent) {
|
(parent[opt.children] || (parent[opt.children] = [])).push(item);
|
} else {
|
result.push(item);
|
}
|
});
|
return result;
|
},
|
convert_TreeTolist(treeNodes, opt) {
|
//treeNodes带children，转换成带有pid的数组
|
if (!opt) {
|
opt = {};
|
opt.key = "id";
|
opt.parent = "pid";
|
opt.children = "children";
|
}
|
|
var NodeList = [];
|
|
function appenChildren(nodes) {
|
for (var i = 0; i < nodes.length; i++) {
|
var node = nodes[i];
|
//如果没有上层节点那么就是根节点
|
if (node.parentNode == null) {
|
node.Level = 0;
|
node[opt.parent] = "0";
|
}
|
//判断是否有子节点
|
if (node[opt.children] && node[opt.children].length > 0) {
|
//所有子节点
|
for (var k = 0; k < node.children.length; k++) {
|
node[opt.children][k][opt.parent] = node[opt.key];
|
node[opt.children][k].Level = node.Level + 1;
|
node[opt.children][k].parentNode = node;
|
}
|
appenChildren(node.children);
|
}
|
if (node.hasOwnProperty("parentNode")) delete node.parentNode;
|
if (node.hasOwnProperty(opt.children)) {
|
node.haschildren = true;
|
delete node[opt.children];
|
}
|
NodeList.push(node);
|
}
|
}
|
appenChildren(treeNodes);
|
return NodeList;
|
},
|
async setDefaultCheck(node) {
|
this.ergodicNode(node);
|
setTimeout(() => {
|
// this.$refs.tree.setCheckedKeys(this.defaultCheck);
|
// //默认跳转位置;
|
// this.$refs.tree.setCheckedKeys([
|
// "fssh_3dmodel_ZL01E",
|
// "fssh_3dmodel_ground",
|
// ]);
|
let layer = this.$refs.tree.getCheckedNodes();
|
|
layer.forEach((e) => {
|
this.handleCheckChange(e, { checkedKeys: [e.id] });
|
});
|
this.flyTo(layer[0]);
|
}, 100);
|
},
|
ergodicNode(node) {
|
if (node.checked && !node.children) {
|
this.defaultCheck.push(node.id);
|
if (!node.isAdd) {
|
if (node._children) {
|
if (node.thisView) {
|
if (node._children[0].children) {
|
node._children[0].children.forEach((item) => {
|
this.addTreeData(item);
|
});
|
} else {
|
this.addTreeData(node._children[0]);
|
}
|
} else {
|
node._children.forEach((item) => {
|
this.addTreeData(item);
|
});
|
}
|
} else {
|
this.addTreeData(node);
|
}
|
}
|
}
|
if (node.children && node.children.length) {
|
node.children.forEach((item) => {
|
this.ergodicNode(item);
|
});
|
}
|
},
|
parseJson(jsonObj) {
|
var count = 0;
|
for (var v in jsonObj) {
|
var element = jsonObj[v];
|
if (element.children == undefined || element.children.length == 0) {
|
if (element._children == undefined || element._children.length == 0) {
|
if (element.checked) {
|
this.arr.push(element.id);
|
}
|
if (element.urls == undefined || element.urls == "") {
|
// element.disabled = true;
|
count++;
|
}
|
element.haschildren = false;
|
this.allnames.push({ name: element.name, id: element.id });
|
} else {
|
this.parseJson(element._children);
|
}
|
} else {
|
element.haschildren = true;
|
this.parseJson(element.children);
|
}
|
}
|
if (count !== 0) {
|
// 添加含有disabled属性的节点数组，
|
this.alldisabled.push(jsonObj);
|
}
|
},
|
async addTreeData(treeNode) {
|
let that = this;
|
// if (treeNode.disabled) return;
|
let _data = sgworld.ProjectTree.getObject(treeNode.id);
|
let pID = 0;
|
if (_data) {
|
sgworld.ProjectTree.setVisibility(treeNode.id, treeNode.checked);
|
return;
|
} else {
|
_data = _getTreeData(treeNode.id);
|
if (_data) {
|
_data.item &&
|
_data.item.setVisibility &&
|
_data.item.setVisibility(treeNode.checked);
|
_data.item &&
|
_data.item.setVisible &&
|
_data.item.setVisible(treeNode.checked);
|
_data.item &&
|
_data.item.show !== undefined &&
|
(_data.item.show = treeNode.checked);
|
if (_data.datatype === "particle") {
|
_data.item.forEach((item) => {
|
item.show = treeNode.checked;
|
});
|
}
|
return;
|
}
|
}
|
if (!treeNode.urls || treeNode.isAdd) return;
|
treeNode.isAdd = true;
|
let layer;
|
treeNode.token &&
|
treeNode.token === "SmartEarthToken" &&
|
(treeNode.token = this.SmartEarthToken);
|
switch (treeNode.sourceType) {
|
case "wms":
|
var parameters = {
|
service: "WMS",
|
format: "image/png",
|
transparent: true,
|
nowtime: new Date().getTime(),
|
};
|
if (treeNode.removeNullValue) {
|
if (treeNode.nullvalue) {
|
treeNode.nullvalue = treeNode.nullvalue.replace("rgb(", "");
|
treeNode.nullvalue = treeNode.nullvalue.replace(")", "");
|
}
|
parameters.nullvalue = defaultValue(treeNode.nullvalue, "0,0,0");
|
parameters.nulltolerance = defaultValue(treeNode.nulltolerance, 0);
|
}
|
treeNode.token && (treeNode.urls += "?token=" + treeNode.token);
|
layer = sgworld.Creator.createImageryProvider(
|
treeNode.name,
|
"wms",
|
{
|
id: treeNode.id,
|
url: BASE_URL + treeNode.urls,
|
layers: treeNode.layer,
|
level: treeNode.Level,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: treeNode.maximumLevel,
|
enablePickFeatures: true,
|
parameters: parameters,
|
},
|
pID,
|
undefined,
|
treeNode.checked,
|
""
|
);
|
layer.item.alpha = defaultValue(treeNode.alpha, 1);
|
treeNode.id = layer.treeobj.id;
|
break;
|
case "wfs":
|
var de = {};
|
var color;
|
var colorTool;
|
!colorTool && (colorTool = sgworld.Core.gradientColor());
|
if (treeNode.class === "pointLayer") {
|
if (!treeNode.sgStyleJSON) {
|
color = colorTool.colorRgb(
|
defaultValue(treeNode.color, "#ffffff")
|
);
|
var bgColor = colorTool.colorRgb(
|
defaultValue(treeNode.bgColor, "#010101")
|
);
|
if (treeNode.text) {
|
de = {
|
label: {
|
text: {
|
defaultValue: defaultValue(treeNode.text, "标签"),
|
},
|
scaleMPP: {
|
defaultValue: "15000",
|
},
|
fillColor: {
|
defaultValue: {
|
red: color[0] / 255,
|
green: color[1] / 255,
|
blue: color[2] / 255,
|
alpha: 1,
|
},
|
},
|
scaleByDistance: {
|
near: 150,
|
nearValue: 1,
|
far: 800000,
|
farValue: 0.5,
|
},
|
minViewingHeight: {
|
defaultValue: "0",
|
},
|
font: {
|
defaultValue: "12",
|
},
|
family: {
|
defaultValue: defaultValue(treeNode.font, "Arial"),
|
},
|
backgroundColor: {
|
defaultValue: {
|
red: bgColor[0] / 255,
|
green: bgColor[1] / 255,
|
blue: bgColor[2] / 255,
|
alpha: 1,
|
},
|
},
|
scale: defaultValue(treeNode.scale, 2),
|
backgroundOpacity: {
|
defaultValue: treeNode.bgColor ? "0.5" : "0",
|
},
|
italic: {
|
defaultValue: treeNode.italic ? "1" : "0",
|
},
|
bold: {
|
defaultValue: treeNode.bold ? "1" : "0",
|
},
|
limitGrowth: {
|
defaultValue: "1",
|
},
|
textRelativeToImage: {
|
defaultValue: "0",
|
},
|
showText: {
|
defaultValue: "0",
|
},
|
textAlignment: {
|
defaultValue: "17",
|
},
|
pixelOffset: new Cesium.Cartesian2(
|
defaultValue(treeNode.offsetX, 0),
|
defaultValue(treeNode.offsetY, treeNode.image ? -10 : 0)
|
),
|
outlineColor: Cesium.Color.fromCssColorString(
|
defaultValue(treeNode.outlineColor, "#ffffff")
|
),
|
outlineWidth: defaultValue(treeNode.outlineWidth, 2),
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
},
|
lineToGround: {
|
defaultValue: "0",
|
},
|
lineToGroundLength: {
|
defaultValue: "0",
|
},
|
lineToGroundColor: {
|
defaultValue: {
|
red: 1,
|
green: 1,
|
blue: 1,
|
alpha: 1,
|
},
|
},
|
altitudeMethod: 0,
|
altitudeOffset: {
|
defaultValue: "0",
|
},
|
clampToGround: defaultValue(treeNode.clampToGround, false),
|
// pointHeight: 100,
|
// pointHeight: defaultValue(treeNode.height, "0"),
|
};
|
}
|
if (treeNode.outlineColor) {
|
de.label &&
|
(de.label.style = Cesium.LabelStyle.FILL_AND_OUTLINE);
|
}
|
if (treeNode.image) {
|
de = {
|
billboard: {
|
image: treeNode.image,
|
scale: 0.8,
|
link: treeNode.link,
|
},
|
clampToGround: defaultValue(treeNode.clampToGround, false),
|
// pointHeight: defaultValue(treeNode.height, 0),
|
};
|
}
|
} else {
|
de = await getSGStyle(
|
"point",
|
treeNode.sgStyleJSON,
|
treeNode.name
|
);
|
}
|
} else if (treeNode.class === "polylineLayer") {
|
if (!treeNode.sgStyleJSON) {
|
color = colorTool.colorRgb(
|
defaultValue(treeNode.color, "#ffff00")
|
);
|
de = {
|
polyline: {
|
material: {
|
red: color[0] / 255,
|
green: color[1] / 255,
|
blue: color[2] / 255,
|
alpha: 1,
|
},
|
lineOpacity: defaultValue(treeNode.alpha, 1),
|
width: defaultValue(treeNode.width, 4),
|
clampToGround: defaultValue(treeNode.clampToGround, true),
|
},
|
};
|
} else {
|
de = await getSGStyle(
|
"polyline",
|
treeNode.sgStyleJSON,
|
treeNode.name
|
);
|
}
|
} else if (treeNode.class === "polygonLayer") {
|
if (!treeNode.sgStyleJSON) {
|
color = colorTool.colorRgb(
|
defaultValue(treeNode.color, "#6bbeef")
|
);
|
de = {
|
polygon: {
|
outlineColor: {
|
defaultValue: {
|
red: 1,
|
green: 1,
|
blue: 0,
|
alpha: 1,
|
},
|
},
|
outlineWidth: 1,
|
fill: {
|
defaultValue: defaultValue(treeNode.alpha, 0.5),
|
},
|
extrudedHeight: treeNode.extrudedHeight || 0,
|
clampToGround: !treeNode.extrudedHeight ? true : false,
|
outline: true,
|
material: {
|
defaultValue: {
|
red: color[0] / 255,
|
green: color[1] / 255,
|
blue: color[2] / 255,
|
alpha: defaultValue(treeNode.alpha, 1),
|
},
|
},
|
|
fromKml: true,
|
},
|
altitudeMethod: 2,
|
altitudeOffset: {
|
defaultValue: "0",
|
},
|
};
|
} else {
|
de = await getSGStyle(
|
"polygon",
|
treeNode.sgStyleJSON,
|
treeNode.name
|
);
|
}
|
}
|
if (!de && treeNode.sgStyleJSON) {
|
console.log(treeNode.name + "获取样式失败！");
|
return;
|
}
|
if (de.position_x) {
|
treeNode.lon = de.position_x;
|
treeNode.lat = de.position_y;
|
treeNode.height = de.position_z;
|
}
|
|
layer = sgworld.CreateWfs(
|
Viewer,
|
defaultValue(BASE_URL + treeNode.urls, de.urls),
|
defaultValue(treeNode.layer, de.layer),
|
{
|
min: defaultValue(treeNode.minimumLevel, de.minimumLevel || 0),
|
max: defaultValue(treeNode.maximumLevel, de.maximumLevel || 22),
|
},
|
de,
|
defaultValue(treeNode.layer, de.layer),
|
pID,
|
treeNode.checked,
|
function (e) {}
|
);
|
// let sgwfs = new SmartEarth.WFSTool(sgworld._Viewer);
|
// sgwfs.CreateWfs("point", {
|
// urls: "http://192.168.22.198:9005/gisserver/wfsserver/fssh_map_wfs",
|
// layer: "alarm_point",
|
// image: SmartEarthRootUrl + "Workers/image/mark.png",
|
// //offsetX: 20,
|
// clampToGround: false,
|
// height: "[coor_z]",
|
// offsetY: -40,
|
// color: "#de3",
|
// disableDepthTestDistance: Infinity,
|
// });
|
// console.log(layer);
|
// console.log(layer._featuresMap);
|
// this.$nextTick(() => {
|
// let obj = layer._featuresMap;
|
// console.log(obj);
|
// });
|
|
// for (key in obj) {
|
// console.log(obj[key]);
|
// }
|
break;
|
case "terrain":
|
layer = sgworld.Creator.createTerrain(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
requestVertexNormals: true,
|
url: BASE_URL + treeNode.urls,
|
},
|
pID,
|
true,
|
""
|
);
|
treeNode.id = layer.treeobj.id;
|
break;
|
case "b3dm":
|
layer = sgworld.Creator.create3DTilesets(
|
treeNode.name,
|
BASE_URL + treeNode.urls,
|
{
|
id: treeNode.id,
|
Level: treeNode.Level,
|
maximumScreenSpaceError: treeNode.maximumScreenSpaceError,
|
// preloadWhenHidden: true,
|
// cullRequestsWhileMoving: false,
|
// maximumMemoryUsage:1024,
|
preferLeaves: true,
|
// skipLevels: 2,
|
// modelMatrix:
|
},
|
// {
|
// id: treeNode.id,
|
// Level: treeNode.Level,
|
// maximumScreenSpaceError: treeNode.maximumScreenSpaceError,
|
// debugShowBoundingVolume: false,
|
// // preloadWhenHidden: true,
|
// // cullRequestsWhileMoving: false,
|
// // maximumMemoryUsage:1024,
|
// preferLeaves: true,
|
// // skipLevels: 2,
|
// debugShowBoundingVolume: false, //显示包围框
|
// debugShowUrl: false,
|
// maximumMemoryUsage: 800,
|
// preferLeaves: false, //先加载叶子
|
// preloadWhenHidden: true,
|
// preloadFlightDestinations: true,
|
// dynamicScreenSpaceError: true,
|
// cullRequestsWhileMovingMultiplier: 30, //移动时剔除，数字越大越快速
|
// cullWithChildrenBounds: true, //是否使用子项边界体积的并集来剔除图块。
|
// cullRequestsWhileMoving: true, //请勿请求由于相机的移动而可能回来的未使用的图块。
|
// foveatedTimeDelay: 0.2, //延迟请求视野内的模型
|
// progressiveResolutionHeightFraction: 0.5, //降低分辨率
|
// foveatedScreenSpaceError: true, //优先屏幕中心
|
// skipLevelOfDetail: true,
|
// },
|
{
|
groundCenter: treeNode.Center,
|
groundheight: treeNode.modelHeight,
|
colors: treeNode.alpha
|
? "rgba(255,255,255," + treeNode.alpha + ")"
|
: treeNode.color || undefined,
|
// colors: "rgba(255,255,255,0.5)",//加载透明
|
},
|
pID,
|
treeNode.checked,
|
(data) => {
|
data.item.tileLoad.addEventListener(function (tile) {
|
//鼠标选中的pickedFeature就是某一个tile.content.getFeature
|
// pickedFeature=tile.content.getFeature(i)
|
var content = tile.content;
|
var featuresLength = content.featuresLength;
|
for (var i = 0; i < featuresLength; i++) {
|
let id = content.getFeature(i).getProperty("name");
|
ModelMap.set(id, content.getFeature(i));
|
// content.getFeature(i).color = Cesium.Color.RED.withAlpha(0.8);
|
}
|
// console.log(ModelMap);
|
that.$store.commit("UPDATE_Model_STATE", ModelMap);
|
});
|
}
|
);
|
treeNode.id = layer.treeobj.id;
|
break;
|
}
|
if (treeNode.sourceType !== "gltf" && (treeNode.lon || treeNode.lat)) {
|
treeNode.flyTo = [
|
treeNode.lon,
|
treeNode.lat,
|
defaultValue(treeNode.height, 10000),
|
];
|
}
|
if (treeNode.minx && treeNode.miny && treeNode.maxx && treeNode.maxy) {
|
treeNode.flyTo = [
|
treeNode.minx,
|
treeNode.miny,
|
treeNode.maxx,
|
treeNode.maxy,
|
];
|
}
|
if (treeNode.sourceType === "wfs") {
|
addTreeData(treeNode, layer);
|
}
|
if (treeNode.baseLayer) {
|
layer.item.baseLayer = true;
|
}
|
},
|
},
|
computed: {
|
// 获取vuex中state里的值
|
...mapState(["treeState", "layerState", "restoreState"]),
|
},
|
watch: {
|
visiable: {
|
handler(nval, oval) {},
|
},
|
|
queryString: {
|
handler(nval, oval) {
|
this.cindex = 0;
|
},
|
},
|
|
//需要搜索后飞入到建筑，
|
treeState(nval, ovaL) {
|
if (nval) {
|
this.UPDATE_TREE(false);
|
sgworld.Viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(
|
120.8977903,
|
30.8280216,
|
150
|
), // 设置位置
|
orientation: {
|
heading: Cesium.Math.toRadians(0.0),
|
pitch: Cesium.Math.toRadians(-20.0),
|
roll: Cesium.Math.toRadians(0.0),
|
},
|
});
|
}
|
},
|
layerState(nval, ovaL) {
|
if (nval) {
|
// sgworld.ProjectTree.setVisibility("fssh_3dmodel_ZL01T", false);
|
//图层数勾选加载数据;
|
this.$refs.tree.setCheckedKeys(nval);
|
let layer = this.$refs.tree.getCheckedNodes();
|
if (ovaL) {
|
ovaL.forEach((e) => {
|
sgworld.ProjectTree.setVisibility(e, false);
|
});
|
}
|
layer.forEach((e) => {
|
this.handleCheckChange(e, { checkedKeys: [e.id] });
|
});
|
}
|
},
|
restoreState(nval, ovaL) {
|
if (nval) {
|
sgworld.ProjectTree.setVisibility("js_qxsy_DXKJ_DXKJ1", false);
|
//图层数勾选加载数据;
|
this.$refs.tree.setCheckedKeys([
|
"demo_bim_fw_01",
|
"js_qxsy_JZW_01",
|
"js_qxsy_CSJT",
|
"demo_bim_gd_01",
|
]);
|
let layer = this.$refs.tree.getCheckedNodes();
|
layer.forEach((e) => {
|
sgworld.ProjectTree.setVisibility(e.id, false);
|
this.handleCheckChange(e, { checkedKeys: [e.id] });
|
});
|
this.UPDATE_restore_STATE(false);
|
}
|
},
|
},
|
};
|
|
let colorTool;
|
let projectTreeData = [];
|
|
//添加工程树数据
|
function addTreeData(data, layer) {
|
var d = {};
|
for (var key in data) {
|
d[key] = data[key];
|
}
|
d.item = layer;
|
projectTreeData.push(d);
|
}
|
|
//通过id获取指定元素
|
function _getTreeData(id) {
|
for (var i = 0; i < projectTreeData.length; i++) {
|
if (
|
projectTreeData[i].id === id ||
|
(projectTreeData[i].datatype === "entity" &&
|
projectTreeData[i].item &&
|
projectTreeData[i].item.entity &&
|
projectTreeData[i].item.entity.id === id) ||
|
(projectTreeData[i].datatype === "editEntity" &&
|
projectTreeData[i].item &&
|
projectTreeData[i].item[projectTreeData[i].type] &&
|
projectTreeData[i].item[projectTreeData[i].type].id === id)
|
) {
|
return projectTreeData[i];
|
}
|
}
|
}
|
|
//转换sg颜色
|
function getSGColor(color) {
|
let _color = parseInt(color).toString(16);
|
if (_color.length === 2) {
|
_color = "0000" + _color;
|
} else if (_color.length === 4) {
|
_color = "00" + _color;
|
}
|
_color = "#" + _color.slice(4) + _color.slice(2, 4) + _color.slice(0, 2);
|
return _color;
|
}
|
|
//解析XML
|
function getXMLData(xml, isColor) {
|
let xml2json = $.xml2json($.parseXML(xml));
|
let data = {
|
value: undefined,
|
defaultValue: isColor
|
? getSGColor(xml2json.DefaultValue)
|
: xml2json.DefaultValue,
|
};
|
|
if (xml2json && !xml2json.Class.length) {
|
data.value = xml2json.Class.Value;
|
} else if (xml2json && xml2json.Class.length) {
|
let Value = {
|
Condition: undefined,
|
Value: {},
|
};
|
xml2json.Class.forEach((item) => {
|
let condition = item.Condition.replace(/\"/g, "");
|
let eli = condition.replace("<", "").replace(">", "").split("=");
|
if (!Value.Condition) {
|
eli[0] = eli[0].replace("[", "").replace("]", "");
|
Value.Condition = eli[0];
|
}
|
Value.Value[eli[1]] = isColor ? getSGColor(item.Value) : item.Value;
|
});
|
data.value = Value;
|
}
|
return data;
|
}
|
|
//获取sg样式配置
|
async function getSGStyle(type, json, name) {
|
let de;
|
!colorTool && (colorTool = sgworld.Core.gradientColor());
|
|
await axios
|
.get(json)
|
.then(
|
(response) => {
|
let _data = response.data;
|
if (_data && typeof _data === "string") {
|
_data = JSON.parse(_data);
|
}
|
let style = _data.filter((item) => {
|
return item.LayerName === name;
|
});
|
if (type === "point") {
|
let data = style[0];
|
style = data.Point;
|
style.Line_Color = getSGColor(style.Line_Color);
|
style.Image_Color = getSGColor(style.Image_Color);
|
style.Text_Color = getSGColor(style.Text_Color);
|
style.Background_Color = getSGColor(style.Background_Color);
|
|
let color = colorTool.colorRgb(
|
defaultValue(style.Text_Color, "#ffffff")
|
);
|
let bgColor = colorTool.colorRgb(
|
defaultValue(style.Background_Color, "#010101")
|
);
|
de = {
|
label: {
|
text: {
|
defaultValue: defaultValue(
|
style.Text.match(/<Value>(\S*)<\/Value>/)[1],
|
style.Text.match(/<DefaultValue>(\S*)<\/DefaultValue>/)[1]
|
),
|
},
|
scaleMPP: { defaultValue: style.Scale },
|
fillColor: {
|
defaultValue: {
|
red: color[0] / 255,
|
green: color[1] / 255,
|
blue: color[2] / 255,
|
alpha: 1,
|
},
|
},
|
scaleByDistance: {
|
near: 0,
|
nearValue: 1,
|
far: 800000000,
|
farValue: 1,
|
},
|
minViewingHeight: { defaultValue: "0" },
|
font: { defaultValue: style.Text_Size },
|
family: { defaultValue: defaultValue(style.Font, "Arial") },
|
backgroundColor: {
|
defaultValue: {
|
red: bgColor[0] / 255,
|
green: bgColor[1] / 255,
|
blue: bgColor[2] / 255,
|
alpha: 1,
|
},
|
},
|
scale: defaultValue(style.TextScale, 1.5),
|
backgroundOpacity: { defaultValue: style.Background_Opacity },
|
italic: { defaultValue: style.Italic },
|
bold: { defaultValue: style.Bold },
|
limitGrowth: { defaultValue: "1" },
|
textRelativeToImage: { defaultValue: "0" },
|
showText: { defaultValue: "0" },
|
textAlignment: { defaultValue: "17" },
|
pixelOffset: new Cesium.Cartesian2(
|
defaultValue(style.offsetX, 0),
|
defaultValue(style.offsetY, style.Image_file ? -10 : 0)
|
),
|
outlineColor: Cesium.Color.fromCssColorString(
|
defaultValue(style.Line_Color, "#ffffff")
|
),
|
outlineWidth: defaultValue(style.outlineWidth, 2),
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
},
|
lineToGround: { defaultValue: style.Line_to_Ground },
|
lineToGroundLength: { defaultValue: style.Line_Length },
|
lineToGroundColor: {
|
defaultValue: { red: 1, green: 1, blue: 1, alpha: 1 },
|
},
|
altitudeMethod: 0,
|
altitudeOffset: { defaultValue: "0" },
|
clampToGround: defaultValue(style.clampToGround, true),
|
pointHeight: defaultValue(style.pointHeight, undefined),
|
minimumLevel: defaultValue(style.level_min, 0),
|
maximumLevel: defaultValue(style.level_max, 22),
|
position_x: data.position_x,
|
position_y: data.position_y,
|
position_z: data.position_z == 0 ? 10000 : data.position_z,
|
urls: data.Server,
|
layer: data.ServerName,
|
};
|
if (style.Line_Color) {
|
de.label && (de.label.style = Cesium.LabelStyle.FILL_AND_OUTLINE);
|
}
|
if (style.Image_file) {
|
de.billboard = {
|
image: style.Image_file,
|
scale: defaultValue(style.ImageScale, 1),
|
scaleMPP: { defaultValue: style.Scale },
|
scaleByDistance: {
|
near: 0,
|
nearValue: 1,
|
far: 800000000,
|
farValue: 1,
|
},
|
minViewingHeight: { defaultValue: "0" },
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
};
|
}
|
} else if (type === "polyline") {
|
let data = style[0];
|
style = data.Line;
|
style.Line_Color = getSGColor(style.Line_Color);
|
if (style.Line_Width) {
|
if (style.Line_Width.length === 2) {
|
style.Line_Width /= 10;
|
} else if (style.Line_Width.length === 3) {
|
style.Line_Width /= 100;
|
}
|
}
|
let color = colorTool.colorRgb(
|
defaultValue(style.Line_Color, "#ff0000")
|
);
|
de = {
|
polyline: {
|
material: {
|
red: color[0] / 255,
|
green: color[1] / 255,
|
blue: color[2] / 255,
|
alpha: 1,
|
},
|
lineOpacity: parseInt(defaultValue(style.Line_Opacity, 1)),
|
width: parseInt(defaultValue(style.Line_Width, 4)),
|
near: style.Near,
|
far: style.Far,
|
clampToGround: defaultValue(style.clampToGround, true),
|
},
|
minimumLevel: defaultValue(style.level_min, 0),
|
maximumLevel: defaultValue(style.level_max, 22),
|
position_x: data.position_x,
|
position_y: data.position_y,
|
position_z: data.position_z == 0 ? 10000 : data.position_z,
|
urls: data.Server,
|
layer: data.ServerName,
|
};
|
} else if (type === "polygon") {
|
let data = style[0];
|
style = data.data;
|
|
style.fill = Cesium.Color.fromCssColorString(style.fill);
|
style.outlineColor = Cesium.Color.fromCssColorString(
|
style.outlineColor
|
);
|
de = {
|
polygon: {
|
outlineColor: {
|
defaultValue: style.outlineColor,
|
},
|
outlineWidth: style.outlineWidth,
|
fill: { defaultValue: style.fill.alpha },
|
extrudedHeight: style.extrudedHeight || 0,
|
height: style.height,
|
outline: style.outline,
|
material: {
|
defaultValue: style.fill,
|
},
|
clampToGround: !style.extrudedHeight ? true : false,
|
fromKml: true,
|
},
|
altitudeMethod: 2,
|
altitudeOffset: { defaultValue: "0" },
|
minimumLevel: defaultValue(style.level_min, 0),
|
maximumLevel: defaultValue(style.level_max, 22),
|
position_x: data.position_x,
|
position_y: data.position_y,
|
position_z: data.position_z == 0 ? 10000 : data.position_z,
|
urls: data.Server,
|
layer: data.ServerName,
|
};
|
}
|
},
|
(response) => {
|
console.log("获取样式配置失败！");
|
}
|
)
|
.catch(function (error) {
|
console.log(error);
|
});
|
return de;
|
}
|
|
// 根据样式文件 转为样式
|
function GetStyleByStyleJson(json) {
|
if (json instanceof Array) {
|
json = json[0];
|
}
|
let entity = { label: {}, billboard: {} };
|
//字体颜色
|
if (json.TextColor.indexOf("Classification") > -1) {
|
entity.label.fillColor = getXMLData(json.TextColor, true);
|
} else {
|
entity.label.fillColor = getSGColor(json.TextColor);
|
}
|
|
//字体大小
|
if (json.TextSize.indexOf && json.TextSize.indexOf("Classification") > -1) {
|
json.TextSize = getXMLData(json.TextSize);
|
json.TextSize.defaultValue =
|
Math.abs(parseInt(json.TextSize.defaultValue)) + "px " + json.Font;
|
for (let key in json.TextSize.value.Value) {
|
json.TextSize.value.Value[key] =
|
Math.abs(parseInt(json.TextSize.value.Value[key])) + "px " + json.Font;
|
}
|
entity.label.font = json.TextSize;
|
} else {
|
entity.label.font = json.TextSize + "px " + json.Font;
|
}
|
//字体风格
|
// if (json.Font.indexOf("Classification") > -1) {
|
// json.Font = getXMLData(json.Font);
|
// entity.label.fontFamily = json.Font;
|
// }
|
// entity.label.sacle = json.Scale;
|
|
entity.label.showBackground = !!parseInt(json.BackgroundOpacity);
|
if (entity.label.showBackground) {
|
if (json.BackgroundColor.indexOf("Classification") > -1) {
|
entity.label.backgroundColor = getXMLData(json.BackgroundColor, true);
|
} else {
|
entity.label.backgroundColor = getSGColor(json.BackgroundColor);
|
}
|
}
|
|
entity.near = json.MinVisibilityDistance;
|
entity.far = json.MaxVisibilityDistance;
|
|
if (json.Text && json.Text.indexOf("Classification") > -1) {
|
entity.label.text = getXMLData(json.Text);
|
} else {
|
entity.label.text = json.Text;
|
}
|
|
if (json.Imagefile && json.Imagefile.indexOf("Classification") > -1) {
|
entity.billboard.image = getXMLData(json.Imagefile);
|
} else {
|
entity.billboard.image = json.Imagefile;
|
}
|
|
if (entity.billboard.image && entity.label.text) {
|
entity.imageData = {
|
horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
|
};
|
entity.labelData = {
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
};
|
}
|
|
return entity;
|
}
|
|
//获取矢量切片注记点样式
|
async function getVectorStyleFromSG(treeNode, json) {
|
let de;
|
|
await axios.get(json).then((res) => {
|
let entitystyle = GetStyleByStyleJson(res.data);
|
|
de = {
|
id: treeNode.id,
|
level_min: defaultValue(treeNode.minimumLevel, 10),
|
level_max: defaultValue(treeNode.maximumLevel, 22),
|
fillColor: defaultValue(entitystyle.label.fillColor, "#ffffff"),
|
outlineColor: defaultValue(entitystyle.label.outlineColor, "#ffffff"),
|
backgroundColor: defaultValue(
|
entitystyle.label.backgroundColor,
|
"#ffffff"
|
),
|
heightReference: defaultValue(treeNode.heightReference, 1),
|
pointHeight: defaultValue(treeNode.pointHeight, undefined),
|
showBackground: defaultValue(entitystyle.label.showBackground, false),
|
outlineWidth: defaultValue(entitystyle.label.outlineWidth, 1),
|
text: entitystyle.label.text,
|
image: entitystyle.billboard.image,
|
font: entitystyle.label.font,
|
near: entitystyle.near,
|
far: entitystyle.far,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
scale: entitystyle.label.scale,
|
labelData: entitystyle.labelData,
|
imageData: entitystyle.imageData,
|
};
|
});
|
return de;
|
}
|
|
function defaultValue(a, b) {
|
return a !== undefined ? a : b;
|
}
|
</script>
|
<style lang="less">
|
.drag {
|
min-width: 300px;
|
min-height: 400px;
|
background: #ffffff;
|
position: relative;
|
border: #70707090 1px solid;
|
overflow-y: "auto";
|
.el-input__inner {
|
-webkit-appearance: none;
|
background-color: transparent;
|
background-image: none;
|
border: 1px solid #bfbfbf;
|
box-sizing: border-box;
|
display: inline-block;
|
font-size: inherit;
|
line-height: 40px;
|
outline: 0;
|
padding: 0 15px;
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
width: 100%;
|
}
|
.el-icon-search {
|
color: #000000;
|
}
|
.font_color {
|
color: #242424;
|
}
|
.lyrCtrl-header {
|
font-weight: 600;
|
font-size: 16px;
|
padding: 10px;
|
background: #ffffff90;
|
color: rgb(0, 0, 0);
|
}
|
.el-tree-node .is-current > .el-tree-node__content {
|
background-color: rgba(0, 0, 0) !important;
|
}
|
.el-tree-node:focus > .el-tree-node__content {
|
background-color: rgba(0, 0, 0) !important;
|
}
|
.el-tree-node__content {
|
&:hover {
|
// background: #89c2f7;
|
background: rgba(102, 102, 102, 0.6);
|
}
|
}
|
.scroll-bar::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
|
height: 1px;
|
}
|
.scroll-bar::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 1px;
|
background-color: rgb(173, 173, 173);
|
background-image: -webkit-linear-gradient(
|
45deg,
|
rgba(172, 172, 172, 0.2) 25%,
|
transparent 25%,
|
transparent 50%,
|
rgba(172, 172, 172, 0.2) 50%,
|
rgba(172, 172, 172, 0.2) 75%,
|
transparent 75%,
|
transparent
|
);
|
}
|
.scroll-bar::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
box-shadow: inset 0 0 5px rgba(162, 162, 162, 0.2);
|
background: #9d9d9d60;
|
border-radius: 1px;
|
}
|
}
|
|
.drag_black {
|
min-width: 300px;
|
min-height: 600px;
|
background: #27272760;
|
position: relative;
|
border: #00000090 2px solid;
|
overflow-y: "auto";
|
.el-input__inner {
|
-webkit-appearance: none;
|
background-color: transparent;
|
background-image: none;
|
border: 1px solid #c0c0c1;
|
box-sizing: border-box;
|
// color: #f0f0f0;
|
display: inline-block;
|
font-size: inherit;
|
line-height: 40px;
|
outline: 0;
|
padding: 0 15px;
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
width: 100%;
|
}
|
.font_color {
|
color: #000;
|
}
|
.lyrCtrl-header {
|
font-weight: 600;
|
font-size: 16px;
|
padding: 10px;
|
background: rgba(0, 0, 0, 0.7);
|
color: rgb(232, 232, 232);
|
}
|
.el-tree-node .is-current > .el-tree-node__content {
|
background-color: rgba(52, 55, 63, 0.6) !important;
|
}
|
.el-tree-node:focus > .el-tree-node__content {
|
background-color: rgba(52, 55, 63, 0.6) !important;
|
}
|
.el-tree-node__content {
|
&:hover {
|
// background: #89c2f7;
|
background: rgba(28, 32, 42, 0.6);
|
}
|
}
|
.scroll-bar::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
|
height: 1px;
|
}
|
.scroll-bar::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 1px;
|
background-color: rgb(79, 96, 103);
|
background-image: -webkit-linear-gradient(
|
45deg,
|
rgba(255, 255, 255, 0.2) 25%,
|
transparent 25%,
|
transparent 50%,
|
rgba(255, 255, 255, 0.2) 50%,
|
rgba(255, 255, 255, 0.2) 75%,
|
transparent 75%,
|
transparent
|
);
|
}
|
.scroll-bar::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
background: #2c2c2c60;
|
border-radius: 1px;
|
}
|
}
|
|
.drag_blue {
|
min-width: 300px;
|
min-height: 400px;
|
background: #09097960;
|
position: relative;
|
border: #00000090 2px solid;
|
overflow-y: "auto";
|
.el-input__inner {
|
-webkit-appearance: none;
|
background-color: transparent;
|
background-image: none;
|
border: 1px solid #c0c0c1;
|
box-sizing: border-box;
|
// color: #f0f0f0;
|
display: inline-block;
|
font-size: inherit;
|
line-height: 40px;
|
outline: 0;
|
padding: 0 15px;
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
width: 100%;
|
}
|
.font_color {
|
color: #ededed;
|
}
|
.lyrCtrl-header {
|
font-weight: 600;
|
font-size: 16px;
|
padding: 10px;
|
background: #03005070;
|
color: rgb(232, 232, 232);
|
}
|
.el-tree-node .is-current > .el-tree-node__content {
|
background-color: rgba(132, 159, 234, 0.6) !important;
|
}
|
.el-tree-node:focus > .el-tree-node__content {
|
background-color: rgba(132, 159, 234, 0.6) !important;
|
}
|
.el-tree-node__content {
|
&:hover {
|
// background: #89c2f7;
|
background: rgba(104, 119, 157, 0.6);
|
}
|
}
|
.scroll-bar::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
|
height: 1px;
|
}
|
.scroll-bar::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 1px;
|
background-color: rgb(0, 63, 90);
|
background-image: -webkit-linear-gradient(
|
45deg,
|
rgba(79, 18, 170, 0.2) 25%,
|
transparent 25%,
|
transparent 50%,
|
rgba(79, 18, 170, 0.2) 50%,
|
rgba(79, 18, 170, 0.2) 75%,
|
transparent 75%,
|
transparent
|
);
|
}
|
.scroll-bar::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
box-shadow: inset 0 0 5px rgba(238, 238, 238, 0.2);
|
background: #f4f4f460;
|
border-radius: 1px;
|
}
|
}
|
|
.drag_green {
|
min-width: 300px;
|
min-height: 400px;
|
background: #02a51560;
|
position: relative;
|
border: #00220f90 2px solid;
|
overflow-y: "auto";
|
.el-input__inner {
|
-webkit-appearance: none;
|
background-color: transparent;
|
background-image: none;
|
border: 1px solid #c0c0c1;
|
box-sizing: border-box;
|
// color: #f0f0f0;
|
display: inline-block;
|
font-size: inherit;
|
line-height: 40px;
|
outline: 0;
|
padding: 0 15px;
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
width: 100%;
|
}
|
.font_color {
|
color: #ededed;
|
}
|
.lyrCtrl-header {
|
font-weight: 600;
|
font-size: 16px;
|
padding: 10px;
|
background: #00ab0370;
|
color: rgb(232, 232, 232);
|
}
|
.el-tree-node .is-current > .el-tree-node__content {
|
background-color: rgba(102, 225, 77, 0.6) !important;
|
}
|
.el-tree-node:focus > .el-tree-node__content {
|
background-color: rgba(102, 225, 77, 0.6) !important;
|
}
|
.el-tree-node__content {
|
&:hover {
|
// background: #89c2f7;
|
background: rgba(58, 128, 109, 0.6);
|
}
|
}
|
.scroll-bar::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
|
height: 1px;
|
}
|
.scroll-bar::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 1px;
|
background-color: rgb(9, 90, 0);
|
background-image: -webkit-linear-gradient(
|
45deg,
|
rgba(18, 170, 46, 0.2) 25%,
|
transparent 25%,
|
transparent 50%,
|
rgba(18, 170, 46, 0.2) 50%,
|
rgba(18, 170, 46, 0.2) 75%,
|
transparent 75%,
|
transparent
|
);
|
}
|
.scroll-bar::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
box-shadow: inset 0 0 5px rgba(238, 238, 238, 0.2);
|
background: #9af5c460;
|
border-radius: 1px;
|
}
|
}
|
.lycInitial {
|
position: absolute;
|
bottom: 4%;
|
left: 5%;
|
border: 1px solid #fff;
|
border-radius: 4px;
|
background: rgba(255, 255, 255, 0.8);
|
}
|
.searchComponent {
|
display: flex;
|
}
|
|
.searchBtn {
|
width: 50px;
|
margin: 0 5px;
|
background: rgba(255, 255, 255, 0.8);
|
border: 1px solid #fff;
|
border-radius: 4px;
|
}
|
</style>
|
