<template>
|
<div>
|
<!-- <div class="closeBtn">
|
<span>我的资源</span><span class="closeSpan" @click="closeJm">×</span>
|
</div>
|
<hr /> -->
|
<div class="wdzy">
|
<div class="treeContainer">
|
<div class="treeTitle">
|
<span class="closePanel" @click="closeLayer">×</span>
|
<el-upload
|
class="button-group"
|
action=""
|
:auto-upload="false"
|
:show-file-list="false"
|
:on-change="loadJsonFromFile"
|
accept=".json"
|
>
|
<el-button
|
class="button-user"
|
type="primary"
|
slot="trigger"
|
icon="el-icon-folder-opened"
|
title="打开本地配置文件"
|
></el-button>
|
<el-button
|
class="button-user"
|
type="primary"
|
icon="el-icon-download"
|
title="保存为本地配置文件"
|
@click.stop="save"
|
></el-button>
|
<el-button
|
class="button-user"
|
type="primary"
|
icon="el-icon-delete"
|
title="清除所有标绘"
|
@click.stop="deleteAllPlot"
|
></el-button>
|
<el-button
|
class="button-user"
|
type="primary"
|
icon="el-icon-upload"
|
title="上传至服务器"
|
@click.stop="saveHistoryPlot"
|
></el-button>
|
|
<el-button
|
class="button-user historyBtn"
|
type="primary"
|
icon="el-icon-s-order"
|
title="会议保障历史记录"
|
@click.stop="histotyPlotting"
|
></el-button>
|
</el-upload>
|
</div>
|
|
<el-tree
|
ref="tree"
|
:data="treeData"
|
show-checkbox
|
node-key="id"
|
draggable
|
:allow-drop="allowDrop"
|
:expand-on-click-node="false"
|
:auto-expand-parent="false"
|
:default-expanded-keys="defaultExpanded"
|
:default-checked-keys="defaultCheck"
|
@node-expand="changeNodeExpand($event, true)"
|
@node-collapse="changeNodeExpand($event, false)"
|
@check="check"
|
@node-contextmenu="rightClick"
|
>
|
<span
|
class="custom-tree-node"
|
slot-scope="{ data }"
|
@dblclick="flyTo(data)"
|
@click="select(data)"
|
>
|
<span>
|
<i v-if="data.children" class="el-icon-folder"></i>
|
<i
|
v-else
|
:class="
|
data.sourceType === 'location'
|
? 'el-icon-location-outline'
|
: ''
|
"
|
></i>
|
<el-input
|
v-if="data.rename"
|
v-model="data.name"
|
size="mini"
|
placeholder="请输入名称"
|
@change="rename(data)"
|
@blur="rename(data)"
|
></el-input>
|
<span v-else>{{ data.name }}</span>
|
</span>
|
</span>
|
</el-tree>
|
</div>
|
|
<div
|
class="rightClickMenu"
|
v-if="rightClickMenuDisplay"
|
@click.stop="closeRightClick"
|
:style="{ ...rightClickMenuStyle }"
|
>
|
<ul>
|
<li @click="addFold"><i class="el-icon-plus"></i>添加目录</li>
|
<li @click="addLayer"><i class="el-icon-plus"></i>添加图层</li>
|
<li @click="editDemoAnimation">
|
<i class="el-icon-plus"></i>添加动画
|
</li>
|
<li @click="addPosition">
|
<i class="el-icon-location-outline"></i>添加定位
|
</li>
|
<li v-if="!isClickParent" @click="editTreeNode">
|
<i class="el-icon-edit"></i>编辑
|
</li>
|
<li @click="openRename"><i class="el-icon-edit"></i>重命名</li>
|
<li @click="deleteTreeNode"><i class="el-icon-delete"></i>删除</li>
|
</ul>
|
</div>
|
|
<add-terrain ref="addTerrain" @success="addSceneData" />
|
<add-online-map
|
ref="addOnlineMap"
|
@success="addOtherData('影像', $event)"
|
/>
|
<add-image ref="addImage" @success="addSceneData" />
|
<add-model ref="addModel" @success="addSceneData" />
|
<add-pathLayer ref="addPathLayer" @success="addSceneData" />
|
<add-wfs ref="addWfs" @success="addSceneData" />
|
<add-vector ref="addVector" @success="addSceneData" />
|
<add-geojson ref="addGeojson" @success="addSceneData" />
|
<add-other ref="addOther" @success="addSceneData" />
|
<get-scene ref="getScene" @success="openScene" />
|
<save-scene ref="saveScene" @success="saveScene" />
|
<select-data ref="select" @success="openThisTypePop" />
|
<animationEdit
|
ref="animationEdit"
|
@success="updateAnimation"
|
@setAnimation="setAnimation"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Bus from "@tools/Bus";
|
import baseVuex from "@mixin/baseVuex";
|
import Popup from "@tools/Popup";
|
import AddImage from "./AddImage";
|
import AddTerrain from "./AddTerrain";
|
import AddModel from "./AddModel";
|
import AddPathLayer from "./AddPathLayer";
|
import AddWfs from "./AddWfs";
|
import AddVector from "./AddVector";
|
import AddGeojson from "./AddGeojson";
|
import AddOther from "./AddOther";
|
import SelectData from "./SelectData";
|
import animationEdit from "@c/demoAnimation/animationEdit";
|
import axios from "axios";
|
import AddOnlineMap from "./AddOnlineMap.vue";
|
import GetScene from "./GetScene.vue";
|
import SaveScene from "./SaveScene.vue";
|
// 工程树工具
|
let _treeTool;
|
function arrGroup(arr, fn) {
|
const obj = {};
|
arr.forEach((item) => {
|
const key = JSON.stringify(fn(item));
|
obj[key] = obj[key] || [];
|
obj[key].push(item);
|
});
|
return Object.keys(obj).map((k) => {
|
return obj[k];
|
});
|
}
|
|
export default {
|
name: "Layer",
|
components: {
|
Popup,
|
AddImage,
|
AddTerrain,
|
AddWfs,
|
AddVector,
|
AddGeojson,
|
AddModel,
|
AddPathLayer,
|
AddOther,
|
SelectData,
|
animationEdit,
|
AddOnlineMap,
|
GetScene,
|
SaveScene,
|
},
|
mixins: [baseVuex],
|
data() {
|
return {
|
title: "图层管理",
|
left: "10px",
|
top: "10px",
|
maxHeight: "500px",
|
defaultCheck: [],
|
defaultExpanded: [],
|
selectNode: undefined,
|
rightClickMenuDisplay: false,
|
rightClickMenuStyle: {},
|
isClickParent: false,
|
isNewFold: false,
|
newFoldName: undefined,
|
serverURL: "http://192.168.109.128:8080",
|
};
|
},
|
mounted() {
|
// 获取本地配置文件
|
if (this.$route.query.hasOwnProperty("layer")) {
|
axios
|
.get(`./layer/${this.$route.query.layer || "layer"}.json`)
|
.then((data) => {
|
data.name && sessionStorage.setItem("SmartEarthTitle", data.name);
|
document.title = sessionStorage.getItem("SmartEarthTitle");
|
|
this.setTreeData([]);
|
this.initData(data.data);
|
});
|
} else if (this.treeData.length) {
|
// 存在缓存数据
|
// 加载场景数据
|
this.loadDataToScene();
|
} else {
|
// 默认树结构
|
// this.setTreeData([{ id: "82A0C3DE", name: "我的资源", children: [] }]);
|
this.setTreeData([]);
|
// 加载场景数据
|
this.loadDataToScene();
|
}
|
// 打开弹窗
|
//this.$refs.layer.open();
|
|
// 定义中转站事件
|
this.initBusEvent();
|
},
|
destroyed() {
|
_treeTool = undefined;
|
},
|
methods: {
|
close() {
|
Bus.$emit("checkTab", "index/add/treeLayer", false);
|
},
|
closeLayer() {
|
this.$parent.hideLayer();
|
},
|
// 定义中转站事件
|
initBusEvent() {
|
Bus.$off("addLayer");
|
Bus.$on("addLayer", (type) => {
|
this.selectNode = this.$refs.tree && this.$refs.tree.getCurrentNode();
|
this.openThisTypePop(type);
|
});
|
Bus.$off("addServerData");
|
Bus.$on("addServerData", (data) => {
|
this.selectNode = this.$refs.tree && this.$refs.tree.getCurrentNode();
|
if (data.openProp) {
|
this.openThisTypePop(data.sourceType, undefined, data);
|
} else {
|
this.addSceneData(data);
|
}
|
});
|
|
Bus.$off("openLayer");
|
Bus.$on("openLayer", (open = true) => {
|
// 打开弹窗
|
if (open) {
|
this.$refs.layer.open();
|
} else {
|
this.$refs.layer.close();
|
}
|
});
|
|
Bus.$off("openServerFile");
|
Bus.$on("openServerFile", (open = true) => {
|
// 打开弹窗
|
if (open) {
|
this.$refs.getScene.open();
|
} else {
|
this.$refs.getScene.close();
|
}
|
});
|
Bus.$off("saveServerFile");
|
Bus.$on("saveServerFile", (open = true) => {
|
// 打开弹窗
|
if (open) {
|
this.$refs.saveScene.open();
|
} else {
|
this.$refs.saveScene.close();
|
}
|
});
|
|
Bus.$off("saveFile");
|
Bus.$on("saveFile", () => {
|
// 保存文件
|
this.save();
|
});
|
Bus.$off("openFile");
|
Bus.$on("openFile", (file) => {
|
// JSON转为树
|
this.loadJsonFromFile(file);
|
});
|
Bus.$off("addFile");
|
Bus.$on("addFile", () => {
|
this.selectNode = this.$refs.tree && this.$refs.tree.getCurrentNode();
|
// 添加文件
|
this.append(this.selectNode);
|
});
|
Bus.$off("addOtherData");
|
Bus.$on("addOtherData", (parentName, data) => {
|
// 添加其他数据
|
this.addOtherData(parentName, data);
|
});
|
Bus.$off("removeTreeNode");
|
Bus.$on("removeTreeNode", (entity) => {
|
// 删除其他数据
|
this.removeTreeNode({ id: entity.id });
|
});
|
Bus.$off("updataTreeNode");
|
Bus.$on("updataTreeNode", (id, data) => {
|
// 更新其他数据
|
this.updataTreeNode({
|
id: id,
|
nodeValue: data,
|
});
|
});
|
Bus.$off("clearFirstParentNode");
|
Bus.$on("clearFirstParentNode", (parentName) => {
|
// 清除所有对象
|
this.clearFirstParentNode(parentName);
|
});
|
|
Bus.$off("editDemoAnimation");
|
Bus.$on("editDemoAnimation", () => {
|
this.editDemoAnimation();
|
});
|
},
|
// 读取json文件数据
|
loadJsonFromFile(file) {
|
let reader = new FileReader();
|
reader.onload = (e) => {
|
let data = JSON.parse(e.target.result);
|
this.initData(data);
|
};
|
reader.readAsText(file.raw);
|
},
|
// 标绘上传至服务器
|
saveHistoryPlot() {
|
if (this.treeData.length == 0) {
|
this.$message.error("请先进行标绘");
|
return;
|
} else if (this.treeData.length > 1) {
|
this.$message.error("格式不正确，请修改后重新保存");
|
return;
|
}
|
this.$confirm("是否将当前会议保障标绘数据上传至服务器?", "上传", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
let oricontent = JSON.stringify(this.treeData);
|
let content = oricontent.replace(
|
/"checked":true/g,
|
'"checked":false'
|
);
|
const uploading = this.$loading({
|
lock: true,
|
text: "会议保障标绘数据上传中，请稍后",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
axios({
|
method: "POST",
|
url: "http://10.10.4.121:8070/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/add",
|
data: {
|
userId: this.$store.state.userId,
|
userName: this.$store.state.userName,
|
geojsonName: this.treeData[0].name,
|
geojsonString: content,
|
},
|
}).then(
|
(response) => {
|
uploading.close();
|
if (response.data.code == 200) {
|
this.$message({
|
message: "保存成功",
|
type: "success",
|
});
|
} else {
|
this.$message.error("保存失败！");
|
}
|
},
|
(error) => {
|
uploading.close();
|
this.$message.error("数据上传失败");
|
// console.log("错误", error.message);
|
}
|
);
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消上传",
|
});
|
});
|
},
|
// 加载历史标绘数据
|
histotyPlotting() {
|
this.$confirm(
|
"该操作将会导致当前标绘数据被覆盖，是否继续?",
|
"会议保障历史数据",
|
{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
// customClass: "msgbox",
|
}
|
)
|
.then(() => {
|
const downloading = this.$loading({
|
lock: true,
|
text: "会议保障历史数据加载中，请稍后",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
let that = this;
|
axios({
|
method: "POST",
|
url: "http://10.10.4.121:8070/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/list",
|
data: {
|
userId: this.$store.state.userId,
|
},
|
}).then(
|
(response) => {
|
setTimeout(() => {
|
downloading.close();
|
let plottingArr = [];
|
response.data.result.forEach((item) => {
|
let geoJsonObj = JSON.parse(item.geojsonString);
|
plottingArr.push(geoJsonObj[0]);
|
});
|
const newArr = arrGroup(plottingArr, (item) => item.name);
|
let finalPlotting = [];
|
newArr.map((a) => {
|
let newObj = {};
|
a.map((b) => {
|
if (newObj.children) {
|
newObj.children = newObj.children.concat(b.children);
|
} else {
|
newObj = b;
|
}
|
});
|
finalPlotting.push(newObj);
|
});
|
let json = {
|
name: "一张图",
|
id: 1,
|
open: true,
|
children: finalPlotting,
|
};
|
that.initData(json);
|
}, 2000);
|
},
|
(error) => {
|
setTimeout(() => {
|
downloading.close();
|
// console.log("错误", error.message);
|
this.$message.error("数据请求失败");
|
}, 2000);
|
}
|
);
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消加载",
|
});
|
});
|
},
|
// 清除本地所有标绘信息
|
deleteAllPlot() {
|
this.$confirm("该操作将清除所有标绘信息，是否继续?", "清除", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.$message({
|
message: "标绘数据已清除",
|
type: "success",
|
});
|
this.initData({});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消清除",
|
});
|
});
|
},
|
// 初始化数据
|
initData(data) {
|
if (this.treeData.length) {
|
this.removeChildData(this.treeData);
|
}
|
data.name && sessionStorage.setItem("SmartEarthTitle", data.name);
|
// 设置工程树数据
|
this.setTreeData(data.children);
|
// 初始定位
|
if (data.flyTo) {
|
this.setView(data.flyTo);
|
}
|
// 加载场景数据
|
this.loadDataToScene();
|
},
|
// 加载数据到场景
|
loadDataToScene() {
|
if (window.sgworld) {
|
// 工程树工具
|
_treeTool = new window.TreeTool(window.sgworld);
|
window.sgworld._treeTool = _treeTool;
|
if (this.$refs.tree) {
|
this.defaultCheck = [];
|
this.defaultExpanded = [];
|
// 遍历节点
|
this.ergodicNode({ children: this.treeData });
|
}
|
// 初始定位
|
|
document.title = sessionStorage.getItem("SmartEarthTitle") || "一张图";
|
} else {
|
setTimeout(() => {
|
this.loadDataToScene();
|
}, 500);
|
}
|
},
|
// 遍历节点
|
ergodicNode(node, addData = true) {
|
node.rename = false;
|
if (node.expanded) {
|
this.defaultExpanded.push(node.id);
|
}
|
if (
|
node.checked &&
|
(!node.children || (node.children && !node.children.length))
|
) {
|
this.defaultCheck.push(node.id);
|
if (addData && node._children) {
|
node._children.forEach((item) => {
|
_treeTool.addData(item);
|
});
|
} else {
|
addData && _treeTool.addData(node);
|
}
|
}
|
if (node.children && node.children.length) {
|
node.children.forEach((item) => {
|
this.ergodicNode(item, addData);
|
});
|
}
|
},
|
// 更新节点展开状态
|
changeNodeExpand(data, expanded) {
|
this.updataTreeNode({
|
id: data.id,
|
key: "expanded",
|
value: expanded,
|
});
|
},
|
// 勾选
|
check(treeNode, data) {
|
let isCheck = data.checkedKeys.indexOf(treeNode.id) > -1;
|
// 勾选节点
|
this.checkTreeNode({ id: treeNode.id, checked: isCheck });
|
// 更新场景数据
|
_treeTool.checkNode(treeNode, isCheck);
|
|
// 只能同时加载一个地形
|
if (
|
isCheck &&
|
treeNode.sourceType &&
|
treeNode.sourceType.indexOf("terrain") > -1
|
) {
|
let index = data.checkedNodes.findIndex((item) => {
|
return (
|
item.sourceType &&
|
item.sourceType.indexOf("terrain") > -1 &&
|
item.id !== treeNode.id
|
);
|
});
|
if (index > -1) {
|
// 取消勾选
|
this.$refs.tree.setChecked(data.checkedNodes[index].id, false);
|
this.checkTreeNode({
|
id: data.checkedNodes[index].id,
|
checked: false,
|
});
|
}
|
}
|
},
|
// 添加节点|文件夹
|
append(data) {
|
this.$confirm("请选择添加类型", "提示", {
|
confirmButtonText: "数据",
|
cancelButtonText: "文件夹",
|
distinguishCancelAndClose: true,
|
closeOnClickModal: false,
|
})
|
.then(() => {
|
// 选择数据
|
this.selectData(data);
|
})
|
.catch((action) => {
|
// 添加文件夹
|
if (action === "cancel") {
|
this.addFolder(data);
|
}
|
});
|
},
|
// 添加文件夹
|
addFolder(data) {
|
this.$prompt("请输入文件夹名称", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
inputValue: "新建文件夹",
|
closeOnClickModal: false,
|
})
|
.then(({ value }) => {
|
let newChild = {
|
id: window.sgworld.Core.getuid(),
|
name: value,
|
rename: false,
|
children: [],
|
};
|
this.addData(data, newChild);
|
})
|
.catch(() => {});
|
},
|
// 选择数据
|
selectData(data) {
|
this.selectNode = data;
|
this.$refs.select.open();
|
},
|
// 打开对于类型的弹窗
|
openThisTypePop(type, editData, defaultData) {
|
switch (type) {
|
case "wms":
|
case "wmts":
|
case "tdmap":
|
case "txmap":
|
case "gdmap":
|
case "bdmap":
|
case "local-map":
|
case "arcgis":
|
this.$refs.addImage.open(type, editData, defaultData);
|
break;
|
case "onlineMap":
|
this.$refs.addOnlineMap.open(type, editData, defaultData);
|
break;
|
case "terrain":
|
case "sgsterrain":
|
case "arcgisterrain":
|
this.$refs.addTerrain.open(type, editData, defaultData);
|
break;
|
case "CesiumGlobeTerrain":
|
this.addSceneData({
|
id: window.sgworld.Core.getuid(),
|
name: "CesiumIon全球地形",
|
sourceType: "CesiumGlobeTerrain",
|
});
|
break;
|
case "b3dm":
|
case "gltf":
|
this.$refs.addModel.open(type, editData, defaultData);
|
break;
|
case "s3m":
|
this.$refs.addModel.open(type, editData, defaultData);
|
break;
|
case "kml":
|
this.$refs.addOther.open(type, editData, defaultData);
|
break;
|
case "wfs":
|
this.$refs.addWfs.open(type, editData, defaultData);
|
break;
|
case "vector":
|
this.$refs.addVector.open(type, editData, defaultData);
|
break;
|
case "geojson":
|
this.$refs.addGeojson.open(type, editData, defaultData);
|
break;
|
case "pathLayer":
|
this.$refs.addPathLayer.open(type, editData, defaultData);
|
break;
|
}
|
},
|
openScene(filedata) {
|
//http://localhost/iisweb/%E5%B7%A5%E7%A8%8B%E5%90%8D%E7%A7%B0.json
|
//"../upload/" + filedata.name + ".json"
|
axios
|
.get("../upload/" + filedata.name + ".json")
|
.then((data) => {
|
let json = data.data;
|
this.initData(json);
|
})
|
.catch(() => {});
|
},
|
saveScene(data) {
|
let fileName = data.name;
|
fileName = fileName + ".json";
|
let layerdata = {
|
name: document.title,
|
id: 1,
|
open: true,
|
children: this.treeData,
|
};
|
let content = JSON.stringify(layerdata);
|
let fData = new FormData();
|
fData.append("json", content);
|
fData.append("fileName", fileName);
|
//this.serverURL +
|
axios
|
.post("../FileManager/fmc/saveFile", fData)
|
.then((data) => {
|
if (data.data == "success") {
|
alert("保存成功！");
|
}
|
})
|
.catch(() => {});
|
},
|
// 添加数据到场景
|
addSceneData(data, isEdit) {
|
if (isEdit) {
|
this.updataTreeNode({
|
id: data.id,
|
nodeValue: data,
|
});
|
return;
|
}
|
data.checked = true;
|
// 添加节点
|
this.addData(this.selectNode, data);
|
// 添加数据到场景
|
if (!_treeTool) {
|
// 工程树工具
|
_treeTool = new window.TreeTool(window.sgworld);
|
window.sgworld._treeTool = _treeTool;
|
}
|
_treeTool.addData(data);
|
this.selectNode = undefined;
|
},
|
// 添加树节点
|
addData(data, value) {
|
!value.rename && (value.rename = false);
|
this.addTreeChildren({ pid: data && data.id, item: value });
|
this.expandedNode(data);
|
|
value.checked &&
|
this.$nextTick(() => {
|
this.$refs.tree.setChecked(value, true);
|
});
|
},
|
// 根据名字获取父节点
|
getParentNodeByName(name) {
|
let index = this.treeData.findIndex((item) => {
|
return item.name === name;
|
});
|
return this.treeData[index];
|
},
|
// 添加其他数据
|
addOtherData(parentName, data) {
|
let parentNode = this.getParentNodeByName(parentName);
|
data.checked = true;
|
|
if (!parentNode) {
|
parentNode = {
|
id: window.sgworld.Core.getuid(),
|
name: parentName,
|
children: [],
|
};
|
this.addData(undefined, parentNode);
|
this.$nextTick(() => {
|
this.addData(parentNode, { ...data, item: undefined });
|
_treeTool.treeData && _treeTool.treeData.set(data.id, data.item);
|
});
|
} else {
|
this.addData(parentNode, { ...data, item: undefined });
|
_treeTool.treeData && _treeTool.treeData.set(data.id, data.item);
|
}
|
},
|
// 添加演示动画
|
editDemoAnimation() {
|
this.$prompt("请输入演示动画名称", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
inputValue: "新建演示动画",
|
closeOnClickModal: false,
|
})
|
.then(({ value }) => {
|
let id = window.sgworld.Core.getuid();
|
let data = {
|
id,
|
name: value,
|
sourceType: "demoAnimation",
|
animationDatas: [],
|
};
|
this.addOtherData("演示动画", data);
|
this.$refs.animationEdit.open(id);
|
})
|
.catch(() => {});
|
},
|
//更新动画
|
updateAnimation(id, data) {
|
this.updataTreeNode({
|
id: id,
|
key: "animationDatas",
|
value: data,
|
});
|
},
|
// 设置动画数据
|
setAnimation(keys, isCheck) {
|
if (keys) {
|
keys.forEach((element) => {
|
let treeNode = this.$refs.tree.getNode(element);
|
// 勾选节点
|
this.checkTreeNode({ id: element, checked: isCheck });
|
// 更新场景数据
|
_treeTool.checkNode(treeNode.data, isCheck);
|
this.$refs.tree.setChecked(element, isCheck);
|
});
|
}
|
},
|
// 定位
|
flyTo(treeNode) {
|
if (treeNode.animationDatas) {
|
this.$refs.animationEdit.start(treeNode.animationDatas);
|
} else {
|
_treeTool.flyTo(treeNode);
|
}
|
},
|
select() {
|
this.rightClickMenuDisplay = false;
|
},
|
// 移除
|
remove(data) {
|
// 移除节点
|
this.removeTreeNode({ id: data.id });
|
if (data.children) {
|
this.removeChildData(data.children);
|
} else {
|
// 移除场景数据
|
_treeTool.deleteData(data.id);
|
if (data.sourceType === "demoAnimation") {
|
Bus.$emit("closeAnimationEdit");
|
}
|
}
|
},
|
removeChildData(nodes) {
|
nodes.forEach((item) => {
|
if (item.children) {
|
this.removeChildData(item.children);
|
} else {
|
// 移除场景数据
|
_treeTool.deleteData(item.id);
|
if (item.sourceType === "demoAnimation") {
|
Bus.$emit("closeAnimationEdit");
|
}
|
}
|
});
|
},
|
// 清除所有对象
|
clearFirstParentNode(name) {
|
let parentnode = this.getParentNodeByName(name);
|
parentnode && this.remove(parentnode);
|
},
|
// 保存
|
save() {
|
let data = {
|
name: document.title,
|
id: 1,
|
open: true,
|
children: this.treeData,
|
};
|
let content = JSON.stringify(data);
|
let blob = new Blob([content], { type: "" });
|
var reader = new FileReader();
|
reader.onloadend = () => {
|
let url = reader.result;
|
let triggerDownload = document.createElement("a");
|
triggerDownload.download = (document.title || "layers") + ".json";
|
triggerDownload.href = url;
|
triggerDownload.click();
|
};
|
reader.readAsDataURL(blob);
|
},
|
closeRightClick() {
|
this.rightClickMenuDisplay = false;
|
},
|
// 右键菜单元素
|
rightClick(e, data, node, comp) {
|
this.isClickParent = !!data.children;
|
this.selectNode = data;
|
console.log(this.selectNode);
|
this.rightClickMenuStyle = { top: e.pageY + "px", left: e.pageX + "px" };
|
this.rightClickMenuDisplay = true;
|
document.onclick = (e) => {
|
this.rightClickMenuDisplay = false;
|
document.onclick = undefined;
|
};
|
},
|
appendTreeNode() {
|
this.append(this.selectNode);
|
},
|
// 右键删除按钮点击事件
|
deleteTreeNode() {
|
this.remove(this.selectNode);
|
this.$refs.tree && this.$refs.tree.setCurrentKey(null);
|
this.selectNode = undefined;
|
},
|
// 右键编辑按钮编辑树节点
|
editTreeNode() {
|
//关闭弹窗
|
Bus.$emit("closeRightPop", true);
|
Bus.$emit("closeLandInfoPop", true);
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
if (this.selectNode) {
|
if (this.selectNode.sourceType === "SimpleGraphic") {
|
let entity = window.Viewer.entities.getById(this.selectNode.id);
|
sgworld.Creator.SimpleGraphic.openEditProp(entity);
|
} else if (this.selectNode.sourceType === "MilitaryPlotting") {
|
let entity = window.Viewer.entities.getById(this.selectNode.id);
|
sgworld.Creator.MilitaryPlotting.openEditProp(entity);
|
} else if (this.selectNode.sourceType === "demoAnimation") {
|
this.$refs.animationEdit.open(
|
this.selectNode.id,
|
this.selectNode.animationDatas
|
);
|
} else {
|
this.openThisTypePop(this.selectNode.sourceType, this.selectNode);
|
}
|
}
|
},
|
// 添加目录
|
addFold() {
|
let newChild = {
|
id: window.sgworld.Core.getuid(),
|
name: "新建目录",
|
children: [],
|
rename: true,
|
};
|
this.addData(this.selectNode, newChild);
|
},
|
// 添加定位点
|
addPosition() {
|
let degrees = sgworld.Navigate.getDegrees(); //经纬度
|
let heading = Cesium.Math.toDegrees(Viewer.camera.heading); //水平角
|
let pitch = Cesium.Math.toDegrees(Viewer.camera.pitch); //俯仰角度
|
let newChild = {
|
id: window.sgworld.Core.getuid(),
|
name: "兴趣点",
|
sourceType: "location",
|
checked: true,
|
rename: true,
|
disabled: true,
|
flyTo: [
|
degrees.lon.toFixed(6),
|
degrees.lat.toFixed(6),
|
degrees.height.toFixed(2),
|
heading,
|
pitch,
|
],
|
};
|
this.addData(this.selectNode, newChild);
|
},
|
expandedNode(node) {
|
if (node && node.children && !node.expanded) {
|
let treeNode = this.$refs.tree.getNode(node.id);
|
if (treeNode) {
|
treeNode.expanded = true;
|
this.updataTreeNode({
|
id: node.id,
|
key: "expanded",
|
value: true,
|
});
|
}
|
}
|
},
|
addLayer() {
|
this.selectData(this.selectNode);
|
},
|
openRename() {
|
if (this.selectNode) {
|
this.selectNode.rename = true;
|
}
|
},
|
rename(data) {
|
data.rename = false;
|
this.updataTreeNode({
|
id: data.id,
|
key: "name",
|
value: data.name,
|
});
|
},
|
allowDrop(draggingNode, dropNode, type) {
|
if (type === "inner") {
|
return false;
|
} else {
|
return true;
|
}
|
},
|
closeJm() {
|
this.$parent.$parent.$parent.isShowScene = false;
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
/deep/.button-user i {
|
color: #ffffff !important;
|
}
|
.historyBtn {
|
margin-left: 28px;
|
}
|
.closeBtn {
|
color: white;
|
position: relative;
|
height: 42px;
|
line-height: 42px;
|
font-size: 17px;
|
padding-left: 10px;
|
}
|
|
.closeSpan {
|
position: absolute;
|
font-size: 30px;
|
right: 0;
|
color: white;
|
transition: 1s;
|
}
|
|
.closeSpan:hover {
|
cursor: pointer;
|
transform: rotateZ(90deg);
|
}
|
|
hr {
|
width: 114%;
|
margin: 11px 0;
|
margin-left: -14px;
|
}
|
|
.wdzy {
|
width: 335px;
|
/* height: 100%; */
|
max-height: 360px;
|
overflow-y: auto;
|
overflow-x: hidden;
|
// margin-bottom: 30px;
|
/* margin: 20px 0; */
|
padding: 10px 0px;
|
box-sizing: border-box;
|
}
|
.closePanel {
|
position: absolute;
|
right: 12px;
|
top: 10px;
|
font-size: 18px;
|
line-height: 30px;
|
background-color: rgba(255, 255, 255, 0.5);
|
border-radius: 3px;
|
width: 30px;
|
height: 30px;
|
cursor: pointer;
|
text-align: center;
|
z-index: 999999;
|
color: white;
|
}
|
.treeContainer {
|
width: 100%;
|
height: 100%;
|
|
.treeTitle {
|
margin: 0px 0px 10px 10px;
|
button {
|
background-color: rgba(155, 155, 155, 0.7) !important;
|
width: 30px;
|
height: 30px;
|
text-align: center;
|
padding: 5px 3px !important;
|
border: none;
|
}
|
/deep/ .el-upload {
|
margin-right: 10px;
|
}
|
}
|
|
.el-tree {
|
background: transparent;
|
color: #fff;
|
}
|
|
/deep/ .el-tree-node__content:hover {
|
background-color: rgba(245, 247, 250, 0.2);
|
}
|
|
/deep/ .el-tree-node:focus > .el-tree-node__content {
|
background-color: rgba(245, 247, 250, 0.2);
|
}
|
|
/deep/ .custom-tree-node {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
padding-right: 10px;
|
|
i {
|
margin-right: 5px;
|
}
|
}
|
|
/deep/ .el-checkbox > .is-disabled {
|
display: none;
|
}
|
}
|
|
.rightClickMenu {
|
position: fixed;
|
display: block;
|
z-index: 10000;
|
background-color: #fff;
|
padding: 5px 0;
|
border: 1px solid #ebeef5;
|
border-radius: 3px;
|
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
|
.rightClickMenu ul {
|
margin: 0;
|
padding: 0;
|
}
|
|
.rightClickMenu ul li {
|
list-style: none;
|
margin: 0;
|
padding: 0 15px;
|
font-size: 14px;
|
line-height: 30px;
|
cursor: pointer;
|
color: black;
|
}
|
|
.rightClickMenu ul li:hover {
|
background-color: #ebeef5;
|
}
|
.wdzy::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 5px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 8px;
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动条 */
|
.wdzy::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
background: rgba(218, 218, 218, 0.5);
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动槽 */
|
.wdzy::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
</style>
|
