<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";
|
import { Op_SelectByPage, Op_Insert, Op_UpdateById, Img_SelectByPage, Img_DeleteByIds } from '../../../api/api.js'
|
import model from "../../../assets/js/Layer/model";
|
import mapOL from "../../../assets/js/Layer/mapOL";
|
import mapGeo from "../../../assets/js/Layer/mapGeo";
|
// 工程树工具
|
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",
|
uploading: false,
|
layersId: null
|
|
};
|
},
|
mounted() {
|
|
Bus.$on("reastLayer", (type) => {
|
this.setTreeData([]);
|
this.initData({});
|
model.deleteAll();
|
setTimeout(() => {
|
|
this.histotyPlotting();
|
}, 100);
|
});
|
// 获取本地配置文件
|
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();
|
this.setTreeData([]);
|
this.initData({});
|
} else {
|
// 默认树结构
|
// this.setTreeData([{ id: "82A0C3DE", name: "我的资源", children: [] }]);
|
this.setTreeData([]);
|
this.initData({});
|
// 加载场景数据
|
// this.loadDataToScene();
|
}
|
// 打开弹窗
|
//this.$refs.layer.open();
|
this.initData({});
|
this.$nextTick(() => {
|
this.histotyPlotting();
|
// 定义中转站事件
|
this.initBusEvent();
|
})
|
},
|
destroyed() {
|
_treeTool = undefined;
|
},
|
methods: {
|
close() {
|
Bus.$emit("checkTab", "index/add/treeLayer", false);
|
},
|
closeLayer() {
|
this.$store.state.isShowLayer = false
|
// this.$parent.hideLayer();
|
},
|
// 定义中转站事件
|
initBusEvent() {
|
|
|
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;
|
}
|
var that = this;
|
// this.$confirm("是否将当前场景数据上传至服务器?", "上传", {
|
// confirmButtonText: "确定",
|
// cancelButtonText: "取消",
|
// type: "warning",
|
// })
|
// .then(() => {
|
let oricontent = JSON.stringify(this.treeData);
|
let content = oricontent.replace(
|
/"checked":true/g,
|
'"checked":false'
|
);
|
this.uploading = this.$loading({
|
lock: true,
|
text: "场景数据上传中,请稍后",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
if (this.layersId) {
|
var obj = {
|
name: "江苏交控智慧高速",
|
json: oricontent,
|
id: this.layersId,
|
}
|
this.editLayerData(obj);
|
} else {
|
var obj = {
|
name: "江苏交控智慧高速",
|
json: oricontent
|
}
|
this.addLayerData(obj);
|
}
|
|
|
// 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: "已取消上传",
|
// });
|
// });
|
},
|
async addLayerData(res) {
|
const data = await Op_Insert(res);
|
if (data.status == 200) {
|
this.uploading.close();
|
}
|
},
|
async editLayerData(res) {
|
const data = await Op_UpdateById(res);
|
if (data.status == 200) {
|
this.uploading.close();
|
}
|
},
|
// 加载历史标绘数据
|
async histotyPlotting() {
|
this.setTreeData([]);
|
this.initData({});
|
model.deleteAll();
|
var finalPlotting = [];
|
const data = await Op_SelectByPage({ pageSize: 1000000, pageIndex: 1, name: '' });
|
const data1 = await Img_SelectByPage({ pageSize: 1000000, pageIndex: 1, name: '' });
|
if (data.status == 200 && data.data.length > 0) {
|
var val_data = data.data;
|
for (var i in val_data) {
|
var json = val_data[i].json;
|
var val = JSON.parse(json)
|
if (val.length > 0) {
|
this.layersId = val_data[i].id;
|
let plottingArr = [];
|
plottingArr.push(val[0]);
|
const newArr = arrGroup(plottingArr, (item) => item.name);
|
|
newArr.map((a) => {
|
let newObj = {};
|
a.map((b) => {
|
if (newObj.children) {
|
newObj.children = newObj.children.concat(b.children);
|
} else {
|
newObj = b;
|
}
|
});
|
finalPlotting.push(newObj);
|
});
|
|
}
|
}
|
}
|
|
if (data1.status == 200) {
|
var img_data = data1.data;
|
if (img_data && img_data.length > 0) {
|
for (var i = 0; i < img_data.length; i++) {
|
var item = img_data[i]
|
item.sourceType = 'imgUp'
|
item.sid = item.id;
|
item.id = new Date().getTime() + i;
|
item.checked = true;
|
finalPlotting[0].children.push(item)
|
}
|
}
|
|
}
|
var json = {
|
name: "江苏交控智慧高速",
|
id: 1,
|
open: true,
|
children: finalPlotting
|
};
|
|
this.initData(json);
|
// const downloading = this.$loading({
|
// lock: true,
|
// text: "会议保障历史数据加载中,请稍后",
|
// spinner: "el-icon-loading",
|
// background: "rgba(0, 0, 0, 0.7)",
|
// });
|
// let that = this;
|
// axios({
|
// method: "GET",
|
// // method: "POST",
|
// // url: "/api/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/list",
|
// 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();
|
//
|
// 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);
|
// }
|
// );
|
|
|
},
|
// 清除本地所有标绘信息
|
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);
|
|
this.setAddGLBLayer(item);
|
});
|
} else {
|
|
addData && _treeTool.addData(node);
|
this.setAddGLBLayer(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 (treeNode.sourceType === 'GLB') {
|
if (isCheck) {
|
model.addModelLayer(treeNode);
|
} else {
|
model.setDelGLBModel(treeNode);
|
}
|
} else if (treeNode.sourceType == "SimpleGraphic") {
|
if (isCheck) {
|
mapOL.addLayerData(treeNode);
|
} else {
|
mapOL.removeLayerData(treeNode);
|
}
|
}else if(treeNode.sourceType == "DrawGrid"){
|
if (isCheck) {
|
mapGeo.addGridLayer(treeNode);
|
} else {
|
mapGeo.delGridLayer(treeNode);
|
}
|
}
|
// 只能同时加载一个地形
|
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;
|
this.setAddGLBLayer(data);
|
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);
|
}
|
|
},
|
setAddGLBLayer(res) {
|
|
if (res.sourceType == "GLB" && res.checked) {
|
|
model.addModelLayer(res);
|
} else if (res.sourceType == "SimpleGraphic" && res.checked) {
|
mapOL.addLayerData(res);
|
} else if (res.sourceType == "imgUp" && res.checked) {
|
model.addImgUpLayer(res);
|
}else if(res.sourceType == "DrawGrid" && res.checked) {
|
mapGeo.addGridLayer(res);
|
}
|
},
|
// 添加演示动画
|
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 {
|
if (treeNode.sourceType === 'GLB') {
|
model.flyTo(treeNode);
|
} 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;
|
if (data.sourceType == 'imgUp') {
|
this.isClickParent = true;
|
}
|
this.selectNode = data;
|
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() {
|
if (this.selectNode.sourceType === "GLB") {
|
model.setDelGLBModel(this.selectNode)
|
}
|
if (this.selectNode.sourceType === "SimpleGraphic") {
|
mapOL.removeLayerData(this.selectNode)
|
}
|
if (this.selectNode.sourceType === "imgUp") {
|
this.removeimgUpData(this.selectNode)
|
}
|
if (this.selectNode.sourceType === "DrawGrid") {
|
mapGeo.removeGridData(this.selectNode)
|
}
|
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 if (this.selectNode.sourceType === "GLB") {
|
model.getEditModelLayer(this.selectNode);
|
} else {
|
this.openThisTypePop(this.selectNode.sourceType, this.selectNode);
|
}
|
}
|
},
|
async removeimgUpData(res) {
|
const data = await Img_DeleteByIds(res.sid);
|
if (data.status == 200) {
|
|
}
|
},
|
|
|
|
|
|
|
// 添加目录
|
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: 10px;
|
}
|
|
.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: 999;
|
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 {
|
height: 300px;
|
overflow: auto;
|
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>
|