<template>
|
<div>
|
<!-- <Popup
|
ref="layer"
|
:closeHidePage="true"
|
:title="title"
|
:left="left"
|
:top="top"
|
:maxHeight="maxHeight"
|
@close="close"
|
> -->
|
<div class="treeContainer">
|
<!-- <div class="treeTitle">
|
<el-upload
|
class="button-group"
|
action=""
|
:auto-upload="false"
|
:show-file-list="false"
|
:on-change="loadJsonFromFile"
|
accept=".json"
|
>
|
<el-button
|
type="primary"
|
size="mini"
|
slot="trigger"
|
icon="el-icon-folder-opened"
|
title="打开配置文件"
|
></el-button>
|
<el-button
|
type="primary"
|
size="mini"
|
icon="el-icon-download"
|
title="保存配置文件"
|
@click="save"
|
></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"
|
: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="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>
|
<!-- </Popup> -->
|
<!-- <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"
|
/>
|
<!-- <Video ref="video" @success="addSceneData"></Video>
|
<Video3D ref="video3D" @success="addSceneData"></Video3D> -->
|
</div>
|
</template>
|
|
<script>
|
import Bus from "@tools/Bus";
|
import axios from "axios";
|
import baseVuex from "./baseVuex";
|
// import Popup from "@tools/Popup.vue";
|
// 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 "../../components/demoAnimation/animationEdit.vue";
|
|
// import AddOnlineMap from "./AddOnlineMap.vue";
|
// import GetScene from "./GetScene.vue";
|
// import SaveScene from "./SaveScene.vue";
|
// import Video from "@c/object/Video.vue";
|
// import Video3D from "@c/object/Video3D.vue";
|
// 工程树工具
|
let _treeTool;
|
export default {
|
name: "Layer",
|
components: {
|
// Popup,
|
// AddImage,
|
// AddTerrain,
|
// AddWfs,
|
// AddVector,
|
// AddGeojson,
|
// AddModel,
|
// AddPathLayer,
|
// AddOther,
|
// SelectData,
|
animationEdit,
|
// AddOnlineMap,
|
// GetScene,
|
// SaveScene,
|
// Video,
|
// Video3D,
|
},
|
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 {
|
axios.get(`/json/ZH链路.json`).then((data) => {
|
this.setTreeData([]);
|
this.initData(data.data);
|
});
|
// 默认树结构
|
// this.setTreeData([
|
// { id: "82A0C3DE", name: "影像", children: [] },
|
// { id: "82C3DE", name: "地形", children: [] },
|
// { id: "4FE10400", name: "模型", children: [] },
|
// { id: "0A51CF71", name: "矢量", children: [] },
|
// ]);
|
// 加载场景数据
|
this.loadDataToScene();
|
}
|
// 打开弹窗
|
// this.$refs.layer.open();
|
|
// 定义中转站事件
|
this.initBusEvent();
|
},
|
destroyed() {
|
_treeTool = undefined;
|
},
|
methods: {
|
close() {
|
Bus.$emit("checkTab", "index/add/treeLayer", false);
|
},
|
// 定义中转站事件
|
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);
|
debugger;
|
window.localStorage.setItem("pathAnimation", data.pathAnimation);
|
};
|
reader.readAsText(file.raw);
|
},
|
// 初始化数据
|
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 });
|
}
|
// 初始定位
|
if (this.viewCenter.length) {
|
this.flyTo({
|
flyTo: this.viewCenter,
|
});
|
}
|
|
document.title =
|
sessionStorage.getItem("SmartEarthTitle") || "SmartEarth";
|
} 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;
|
case "videoBox":
|
this.$refs.video.open(type, editData, defaultData);
|
break;
|
case "video3D":
|
this.$refs.video3D.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,
|
flyTo: this.viewCenter,
|
};
|
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);
|
});
|
} else {
|
this.addData(parentNode, { ...data, item: undefined });
|
_treeTool.treeData && _treeTool.treeData.set(data.id, data);
|
}
|
},
|
// 添加演示动画
|
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,
|
flyTo: this.viewCenter,
|
pathAnimation: window.localStorage.getItem("pathAnimation"),
|
};
|
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);
|
},
|
// 右键菜单元素
|
rightClick(e, data, node, comp) {
|
this.isClickParent = !!data.children;
|
this.selectNode = data;
|
this.rightClickMenuStyle = { top: e.pageY + "px", left: e.pageX + "px" };
|
this.rightClickMenuDisplay = true;
|
document.onclick = () => {
|
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() {
|
debugger;
|
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;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less" scoped>
|
.treeContainer {
|
width: 100%;
|
height: 100%;
|
|
.treeTitle {
|
text-align: center;
|
margin: 10px 0;
|
|
/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: 4px;
|
box-shadow: 0 2px 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;
|
}
|
</style>
|
