创建新仓库
This commit is contained in:
927
src/renderer/components/Tree/index.vue
Normal file
927
src/renderer/components/Tree/index.vue
Normal file
@ -0,0 +1,927 @@
|
||||
<template>
|
||||
<div class="TreeIndex">
|
||||
<div class="arrowTree" @click="isShowTree">
|
||||
<img :src="arrowTree" alt="" />
|
||||
</div>
|
||||
<svg-icon icon-class="LayerBorder" :class-name="['absolute', 'zIndex-1']"></svg-icon>
|
||||
<div class="box1" v-on:mouseleave="treeMouseOver">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="layerTitleBg" :class-name="['absolute', 'layerTitleBg']"></svg-icon>
|
||||
<div>
|
||||
<span></span>
|
||||
{{ $t("tree.title") }}
|
||||
</div>
|
||||
<div class="border"></div>
|
||||
</div>
|
||||
<div class="ztreeBox custom_scroll_bar">
|
||||
<ul id="treeDemo" class="ztree" :setting="setting" @click="cancel"></ul>
|
||||
</div>
|
||||
<div class="search" id="search">
|
||||
<div class="searchUp">
|
||||
<el-select v-model="select" @change="selectChange" style="width: 24%;" size="small">
|
||||
<el-option value="tree" :label="$t('tree.layer')"></el-option>
|
||||
<el-option value="poi" :label="$t('tree.location')"></el-option>
|
||||
</el-select>
|
||||
<input v-bind="searchKey" style="width: 50px;" id="keyword" type="text"
|
||||
:placeholder="$t('btn.treePlaceholder')" @input="clearResult" @change="searchPlace" />
|
||||
<el-button type="primary" plain id="queryButton" size="small" @click="searchPlace" :loading="loading">{{
|
||||
$t("btn.search") }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div id="selectorBox">
|
||||
<el-select ref="select1" @change="locationChange" v-model="value" size="small"
|
||||
:placeholder="$t('btn.selectPlaceholder')" :no-data-text="$t('btn.selectNoText')">
|
||||
<el-option v-for="(item, index) in poiOptions" :key="item.search_key + index" :label="item.search_key"
|
||||
:value="item.address">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<rightMenu ref="rightMenu" class="absolute zIndex99"></rightMenu>
|
||||
</div>
|
||||
<el-dialog title="提示" :append-to-body="true" :visible.sync="dialogVisible" width="30%" :before-close="closeDialog">
|
||||
<!-- 选择全景还是图片 -->
|
||||
<span>请选择全景还是图片</span>
|
||||
<el-radio-group v-model="radio" size="small">
|
||||
<el-radio-button label="全景"></el-radio-button>
|
||||
<el-radio-button label="图片"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeDialog">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmType">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ipcRenderer } from "electron";
|
||||
import arrowTree from "@/assets/images/arrowTree.png";
|
||||
import { debounce } from "../../utils";
|
||||
import tree from "./treeSetting";
|
||||
import rightMenu from "./components/rightMenu.vue";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import rightMenuOption from "../Tree/components/rightMenuOption";
|
||||
import {
|
||||
get_source_list,
|
||||
queryPOI,
|
||||
addSource,
|
||||
updateLayerIndex,
|
||||
addPicture,
|
||||
addPanorama
|
||||
} from "@/api/gisAPI";
|
||||
import {
|
||||
getKeyOfSelectedNode,
|
||||
cusAddNodes,
|
||||
getNodeData,
|
||||
} from "./treeNode";
|
||||
import {
|
||||
renderBim,
|
||||
renderCzml,
|
||||
renderGeojson,
|
||||
renderLayer,
|
||||
renderShp,
|
||||
renderXLSX,
|
||||
renderTerrain,
|
||||
renderPicture
|
||||
} from "./renderNode";
|
||||
import { getNamefromPath2 } from "../../utils/index";
|
||||
import * as path from "path";
|
||||
import { GetHomeDir } from "../../../main/back/config";
|
||||
import {
|
||||
shpTotal
|
||||
} from "./entityClick"
|
||||
export default {
|
||||
name: "index",
|
||||
components: {
|
||||
rightMenu,
|
||||
},
|
||||
mixins: [tree, rightMenuOption],
|
||||
data() {
|
||||
return {
|
||||
input3: "",
|
||||
select: "poi",
|
||||
value: "",
|
||||
searchKey: "",
|
||||
poiOptions: [],
|
||||
left: 0,
|
||||
arrowTree,
|
||||
isShow: true,
|
||||
mapModule: null,
|
||||
key:
|
||||
(localStorage.getItem("AMapKey") &&
|
||||
localStorage.getItem("AMapKey").split("|")[0]) ||
|
||||
"d88fcc689d1aa99866b2d0d83fd36677",
|
||||
isOnline: false,
|
||||
loading: false,
|
||||
dialogVisible: false,
|
||||
radio: '全景',
|
||||
picturePaths: [],
|
||||
otherPaths: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$recvChanel("renderNode", () => {
|
||||
this.getList();
|
||||
});
|
||||
$("#search").bind("keydown", function (e) {
|
||||
// 兼容FF和IE和Opera
|
||||
let theEvent = e || window.event;
|
||||
let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
|
||||
if (code == 13) {
|
||||
//回车执行查询
|
||||
$("#queryButton").click();
|
||||
}
|
||||
});
|
||||
if (window.isStandAlone) {
|
||||
ipcRenderer.on("DroppedFiles", (event, filePaths) => {
|
||||
// filePaths数组中包含图片类型(区分大小写)和其他类型区分开
|
||||
this.picturePaths = [];
|
||||
this.otherPaths = [];
|
||||
filePaths.forEach((item) => {
|
||||
// 转换为小写
|
||||
item = item.toLowerCase();
|
||||
if (item.endsWith(".png") || item.endsWith(".jpg") || item.endsWith(".jpeg")) {
|
||||
this.picturePaths.push(item);
|
||||
} else if (item.endsWith(".kml") || item.endsWith(".kmz") || item.endsWith(".czml") || item.endsWith(".geojson") || item.endsWith(".shp") || item.endsWith(".tab") || item.endsWith(".csv") || item.endsWith(".mif") || item.endsWith(".clt") || item.endsWith(".pak") || item.endsWith(".jct") || item.endsWith(".terrain") || item.endsWith(".bim") || item.endsWith(".json")) {
|
||||
this.otherPaths.push(item);
|
||||
} else {
|
||||
this.$message.error("不支持的文件类型！");
|
||||
}
|
||||
});
|
||||
if (this.picturePaths.length > 0) {
|
||||
this.dialogVisible = true;
|
||||
}
|
||||
if (this.otherPaths.length > 0) {
|
||||
this.addResource(this.otherPaths);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//
|
||||
cancel() {
|
||||
YJ.Global.splitScreen.setActiveId([]);
|
||||
},
|
||||
// 关闭dialog
|
||||
closeDialog() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 确认选择
|
||||
confirmType() {
|
||||
this.dialogVisible = false;
|
||||
if (this.radio == '全景') {
|
||||
this.panoramaFun(this.picturePaths);
|
||||
} else {
|
||||
this.addPictureFun(this.picturePaths);
|
||||
}
|
||||
},
|
||||
// 全景定位
|
||||
panoramaFun(paths) {
|
||||
let p_id = getKeyOfSelectedNode(this.$parent.treeObj, "source_id");
|
||||
let source_id = this.$md5(new Date().getTime() + "全景图片");
|
||||
const billboard = {
|
||||
image: `http://localhost:${window.staticPort}/GEMarker/vr.png`,
|
||||
defaultImage: "2",
|
||||
show: true,
|
||||
scale: 1,
|
||||
};
|
||||
let DbOption = {
|
||||
source_id,
|
||||
source_name: "全景图片",
|
||||
source_type: "vr",
|
||||
p_id,
|
||||
};
|
||||
addPanorama(
|
||||
{ list: paths, p_id: DbOption.p_id, billboard: billboard },
|
||||
(res) => {
|
||||
if (res.whout_list.length > 0) {
|
||||
let msg = "";
|
||||
let arr = [];
|
||||
if (res.whout_list.length > 5) {
|
||||
arr = res.whout_list.slice(0, 5);
|
||||
} else {
|
||||
arr = res.whout_list;
|
||||
}
|
||||
|
||||
arr.forEach((item) => {
|
||||
msg = msg + item + " ";
|
||||
});
|
||||
this.$message.warning(msg + "照片已存在或者坐标信息异常！");
|
||||
} else {
|
||||
this.$message.success("导入成功！");
|
||||
}
|
||||
res.list.forEach((item) => {
|
||||
let entity = renderPicture(item);
|
||||
entity.flyTo();
|
||||
cusAddNodes(this.$parent.treeObj, DbOption.p_id, [item]);
|
||||
});
|
||||
}
|
||||
);
|
||||
},
|
||||
// 图片定位
|
||||
addPictureFun(paths) {
|
||||
let p_id = getKeyOfSelectedNode(this.$parent.treeObj, "source_id");
|
||||
// if (selectedNode) {
|
||||
let source_id = this.$md5(new Date().getTime() + "图片定位");
|
||||
let DbOption = {
|
||||
source_id,
|
||||
source_name: "图片定位",
|
||||
source_type: "picture",
|
||||
p_id,
|
||||
};
|
||||
const billboard = {
|
||||
image: `http://localhost:${window.staticPort}/GEMarker/picture.png`,
|
||||
defaultImage: "1",
|
||||
show: true,
|
||||
scale: 1,
|
||||
};
|
||||
console.log("图片定位", billboard.image);
|
||||
addPicture(
|
||||
{ list: paths, p_id: DbOption.p_id, billboard: billboard },
|
||||
(res) => {
|
||||
console.log("res.list", res);
|
||||
|
||||
if (res.whout_list.length > 0) {
|
||||
let msg = "";
|
||||
let arr = [];
|
||||
if (res.whout_list.length > 5) {
|
||||
arr = res.whout_list.slice(0, 5);
|
||||
} else {
|
||||
arr = res.whout_list;
|
||||
}
|
||||
|
||||
arr.forEach((item) => {
|
||||
msg = msg + item + " ";
|
||||
});
|
||||
this.$message.warning(msg + "照片已存在或者坐标信息异常！");
|
||||
} else {
|
||||
this.$message.success("导入成功！");
|
||||
}
|
||||
console.log("res.list", res.list);
|
||||
res.list.forEach((item) => {
|
||||
let entity = renderPicture(item);
|
||||
entity.flyTo();
|
||||
cusAddNodes(this.$parent.treeObj, DbOption.p_id, [item]);
|
||||
});
|
||||
}
|
||||
).catch((err) => {
|
||||
this.$message.error("导入失败！", err);
|
||||
});
|
||||
},
|
||||
// 添加资源
|
||||
addResource(filePaths) {
|
||||
let p_id = getKeyOfSelectedNode(this.$parent.treeObj, "source_id");
|
||||
filePaths.forEach((item) => {
|
||||
let name = getNamefromPath2(item);
|
||||
console.log("name", name);
|
||||
let source_type = "layer";
|
||||
if (item.endsWith(".clt") || item.endsWith(".json")) {
|
||||
source_type = "tileset";
|
||||
} else if (item.endsWith(".pak")) {
|
||||
source_type = "Terrain";
|
||||
} else if (item.endsWith(".kml") || item.endsWith(".kmz")) {
|
||||
source_type = "kml";
|
||||
} else if (item.endsWith(".shp")) {
|
||||
source_type = "shp";
|
||||
} else if (item.endsWith(".geojson") || item.endsWith(".geoJson")) {
|
||||
source_type = "geojson";
|
||||
} else if (item.endsWith(".czml")) {
|
||||
source_type = "czml";
|
||||
} else if (item.endsWith(".jct")) {
|
||||
source_type = "bim";
|
||||
} else if (item.endsWith(".mif")) {
|
||||
source_type = "shp";
|
||||
} else if (item.endsWith(".tab")) {
|
||||
source_type = "shp";
|
||||
} else if (item.endsWith(".csv")) {
|
||||
source_type = "csv";
|
||||
}
|
||||
let params = {
|
||||
source_name: name,
|
||||
source_type,
|
||||
source_id: this.$md5(item),
|
||||
source_path: item,
|
||||
p_id,
|
||||
};
|
||||
console.log("params1", params);
|
||||
let node = getNodeData(params, {});
|
||||
console.log("node", node);
|
||||
if (source_type == "bim") {
|
||||
this.addBIM(item);
|
||||
return;
|
||||
}
|
||||
if (["shp", "tab", "mif", "kml", "kmz"].includes(source_type)) {
|
||||
if (typeof node.detail == "string")
|
||||
node.detail = JSON.parse(node.detail);
|
||||
node.detail.richText = {};
|
||||
}
|
||||
let callback = (source_id, tileset) => {
|
||||
window._entityMap.set(source_id, tileset);
|
||||
tileset.flyTo();
|
||||
};
|
||||
console.log("addSource", node);
|
||||
addSource(node).then(
|
||||
(res) => {
|
||||
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~", res);
|
||||
/* if (item.endsWith(".pak") && res.data.tms.url) {
|
||||
node.source_type = "layer"
|
||||
}*/
|
||||
let key = "";
|
||||
if (!["geojson"].includes(node.source_type) && res.data.type) {
|
||||
node.source_type = res.data.type;
|
||||
switch (res.data.type) {
|
||||
case "layer":
|
||||
key = "tms";
|
||||
break;
|
||||
case "tileset":
|
||||
key = "tile_set";
|
||||
break;
|
||||
case "terrain":
|
||||
key = "terrain";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
// if(node.source_type =='Terrain'&&)
|
||||
// if (!["shp", "csv", 'kml', 'tab', 'mif', 'geojson', 'pak', "Terrain"].includes(node.source_type)) {
|
||||
|
||||
// }
|
||||
if (key) {
|
||||
node.source_path = res.data[key].url;
|
||||
}
|
||||
source_type = node.source_type;
|
||||
cusAddNodes(this.$parent.treeObj, p_id, [node]);
|
||||
if (source_type == "shp") {
|
||||
renderShp(node);
|
||||
} else if (source_type == "mif") {
|
||||
renderShp(node);
|
||||
} else if (source_type == "csv") {
|
||||
renderShp(node);
|
||||
} else if (source_type == "tab") {
|
||||
renderShp(node);
|
||||
} else if (source_type == "geojson") {
|
||||
renderGeojson(node);
|
||||
} else if (source_type == "czml") {
|
||||
renderCzml(node);
|
||||
} else if (source_type == "kml") {
|
||||
renderShp(node);
|
||||
} else if (source_type == "layer") {
|
||||
renderLayer(node, true);
|
||||
} else if (source_type == "tileset" || source_type == "json") {
|
||||
renderBim(node, true);
|
||||
} else if (source_type == "xlsx") {
|
||||
node.detail = res.data.xlsx;
|
||||
renderXLSX(node);
|
||||
} else {
|
||||
renderTerrain(node);
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
console.log(err);
|
||||
if (err.code == 50) {
|
||||
let source_id = err.message.split(":")[1];
|
||||
let node = this.$parent.treeObj.getNodeByParam(
|
||||
"source_id",
|
||||
source_id,
|
||||
null
|
||||
);
|
||||
this.$parent.treeObj.selectNode(node);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
},
|
||||
// 切换清空input值，使用获取当前input节点，然后清空值
|
||||
selectChange(val) {
|
||||
let input = document.getElementById('keyword');
|
||||
treeSearchCb('');
|
||||
if (val == "poi") {
|
||||
this.searchKey = '';
|
||||
input.value = '';
|
||||
} else {
|
||||
this.searchKey = '';
|
||||
this.poiOptions = [];
|
||||
this.value = '';
|
||||
input.value = '';
|
||||
}
|
||||
if (window.searchPlaceEntity) {
|
||||
window.searchPlaceEntity.remove();
|
||||
}
|
||||
},
|
||||
//
|
||||
|
||||
//鼠标移出关闭二级菜单
|
||||
treeMouseOver() {
|
||||
this.$changeComponentShow(".rightMenu", false);
|
||||
},
|
||||
locationChange() {
|
||||
let item = this.poiOptions.find((item) => item.address == this.value);
|
||||
let id = new YJ.Tools().randomString();
|
||||
this.$nextTick(() => {
|
||||
this.$refs.select1.blur();
|
||||
});
|
||||
if (window.searchPlaceMap === undefined) {
|
||||
window.searchPlaceMap = new Map();
|
||||
}
|
||||
if (window.searchPlaceMap.size) {
|
||||
window.searchPlaceMap.forEach((item) => {
|
||||
item.remove();
|
||||
});
|
||||
window.searchPlaceMap.clear();
|
||||
}
|
||||
let textLenght = item.search_key.length;
|
||||
if (textLenght > 17) {
|
||||
item.search_key = item.search_key.match(/.{1,17}/g).join('\n');
|
||||
}
|
||||
// let sg84 = YJ.Global.CoordTransform.GCJ02ToWGS84(item.lng, item.lat);
|
||||
let params = {
|
||||
id,
|
||||
positions: { lng: item.lng, lat: item.lat, alt: item.alt ? item.alt : 0 },
|
||||
billboard: {
|
||||
show: true,
|
||||
image:
|
||||
"http://localhost:" +
|
||||
window.staticPort +
|
||||
"/" +
|
||||
"GEMarker1/A-ablu-blank.png",
|
||||
width: 320,
|
||||
height: 360,
|
||||
},
|
||||
show: true,
|
||||
label: {
|
||||
show: true,
|
||||
text: item.search_key,
|
||||
fontSize: 80,
|
||||
color: "#FFF200FF",
|
||||
scale: 3,
|
||||
},
|
||||
};
|
||||
let entity = new YJ.Obj.BillboardObject(window.Earth1, params);
|
||||
entity.labelFontSize = 75;
|
||||
entity.billboardScale = 9;
|
||||
entity.far = 42000000;
|
||||
entity.entity.billboard.heightReference = 1;
|
||||
entity.entity.label.heightReference = 1;
|
||||
window.searchPlaceEntity = entity
|
||||
entity.picking = false
|
||||
// 获取entity
|
||||
|
||||
console.log("entity", entity);
|
||||
// entity.entity.label.eyeOffset = new Cesium.Cartesian3(0, 0, -1000);
|
||||
// entity.entity.billboard.eyeOffset = new Cesium.Cartesian3(0, 0, -1000)
|
||||
window.Earth1.viewer.camera.flyTo({
|
||||
destination: Cesium.Cartesian3.fromDegrees(
|
||||
Number(params.positions.lng),
|
||||
Number(params.positions.lat),
|
||||
14000
|
||||
),
|
||||
duration: 3,
|
||||
orientation: {
|
||||
heading: 0,
|
||||
pitch: (-85 * Math.PI) / 180,
|
||||
roll: 0,
|
||||
},
|
||||
});
|
||||
window.searchPlaceMap.set(id, entity);
|
||||
},
|
||||
clearResult() {
|
||||
let string = $("#keyword")
|
||||
.val()
|
||||
.trim();
|
||||
if (string == "") {
|
||||
let arr = [];
|
||||
if (window.searchPlaceMap) {
|
||||
arr = Array.from(window.searchPlaceMap);
|
||||
}
|
||||
if (arr.length) {
|
||||
window.searchPlaceMap.get(arr[0][0]).remove();
|
||||
window.searchPlaceMap.clear();
|
||||
}
|
||||
this.poiOptions = [];
|
||||
this.value = "";
|
||||
window.treeSearchCb();
|
||||
}
|
||||
},
|
||||
searchPlace: debounce(function () {
|
||||
if (this.select == "poi") {
|
||||
this.poiOptions = [];
|
||||
this.value = "";
|
||||
let way = localStorage.getItem("searchWay");
|
||||
if (way == "net") {
|
||||
treeSearchCb("");
|
||||
this.loading = true;
|
||||
this.loadAmp((err = "") => {
|
||||
// console.log("isOnline", this.isOnline);
|
||||
if (err) {
|
||||
this.$message.error("无网络连接，请检查网络");
|
||||
} else {
|
||||
this.mapModule.plugin(
|
||||
["AMap.PlaceSearch", "AMap.AutoComplete"],
|
||||
() => {
|
||||
// var auto = new AMap.AutoComplete(autoOptions);
|
||||
let placeSearch = new AMap.PlaceSearch(); //构造地点查询类
|
||||
var autoComplete = new AMap.AutoComplete();
|
||||
try {
|
||||
placeSearch.search(
|
||||
$("#keyword")
|
||||
.val()
|
||||
.trim(),
|
||||
(status, result) => {
|
||||
// console.log("高德地图----------", status, result);
|
||||
if (result.info && result.info === "OK") {
|
||||
let arr = [];
|
||||
result.poiList.pois.forEach((item, index) => {
|
||||
const location = YJ.CoordTransform.GCJ02ToWGS84(
|
||||
item.location.lng,
|
||||
item.location.lat
|
||||
);
|
||||
arr.push({
|
||||
address: item.name,
|
||||
search_key: item.name,
|
||||
search_type: item.id,
|
||||
lat: location[1],
|
||||
lng: location[0],
|
||||
});
|
||||
});
|
||||
this.poiOptions = arr;
|
||||
if (this.poiOptions.length) {
|
||||
this.loading = false;
|
||||
this.$refs.select1.toggleMenu();
|
||||
// $("#selectorBox input").focus();
|
||||
}
|
||||
} else if (status == "error" || result === 'INVALID_PARAMS') {
|
||||
this.$message.error("请填写正确的搜索关键字");
|
||||
this.loading = false;
|
||||
} else if (status == "error") {
|
||||
this.$message.error("网络异常");
|
||||
this.loading = false;
|
||||
} else {
|
||||
this.$message.warning("没有搜索结果");
|
||||
this.loading = false;
|
||||
}
|
||||
//
|
||||
}
|
||||
);
|
||||
} catch (e) {
|
||||
this.loading = false;
|
||||
// console.log(e);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
} else if (way == "poi") {
|
||||
let string = $("#keyword")
|
||||
.val()
|
||||
.trim();
|
||||
if (string)
|
||||
queryPOI({ key: string }, (res) => {
|
||||
this.poiOptions = res.list;
|
||||
// console.log("poiOptions", this.poiOptions);
|
||||
if (this.poiOptions.length) {
|
||||
this.$refs.select1.toggleMenu();
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
else this.$message.warning("请输入搜索关键字");
|
||||
}
|
||||
} else {
|
||||
this.poiOptions = [];
|
||||
this.value = "";
|
||||
treeSearchCb();
|
||||
}
|
||||
}, 300),
|
||||
loadAmp(cb = () => { }) {
|
||||
// console.log("loadAmp", AMapLoader);
|
||||
AMapLoader.reset();
|
||||
AMapLoader.load({
|
||||
key: this.key, // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [],
|
||||
})
|
||||
.then((AMap) => {
|
||||
// console.log("AMap", AMap);
|
||||
this.mapModule = AMap;
|
||||
this.isOnline = true;
|
||||
cb();
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log("amp:err", err);
|
||||
this.loading = false;
|
||||
this.isOnline = false;
|
||||
cb(err ? "err" : "");
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取树型节点数组
|
||||
* @returns {Promise}
|
||||
*/
|
||||
getList() {
|
||||
let keycode = localStorage.getItem("AMapKey");
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode:
|
||||
(keycode && keycode.split("|")[1]) ||
|
||||
"d88fcc689d1aa99866b2d0d83fd36677",
|
||||
};
|
||||
// console.log("获取图层指挥舱数据");
|
||||
//初始化高德地图
|
||||
let arr = [
|
||||
"ArcgisWXImagery",
|
||||
"ArcgisBLUEImagery",
|
||||
"ArcgisLWImagery",
|
||||
"GDLWImagery",
|
||||
"GDWXImagery",
|
||||
"GDSLImagery",
|
||||
"layer",
|
||||
];
|
||||
let that = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
get_source_list()
|
||||
.then((response) => {
|
||||
if ([0, 200].includes(response.code)) {
|
||||
let data = JSON.parse(JSON.stringify(response.data.list || []));
|
||||
let layer = [];
|
||||
window.treeSource = data.length;
|
||||
data.sort(this.keysort("tree_index"));
|
||||
//将模型压平
|
||||
window.pressModelMap = new Map();
|
||||
data.forEach((node) => {
|
||||
if (node.source_type == "pressModel") {
|
||||
// console.log("pressModel", node);
|
||||
let obj = JSON.parse(JSON.stringify(node.detail));
|
||||
if (typeof node.detail == "string") {
|
||||
obj = JSON.parse(node.detail);
|
||||
}
|
||||
console.log('pressModelMap', obj);
|
||||
|
||||
pressModelMap.set(node.source_id + "_" + obj.model_id, node);
|
||||
}
|
||||
});
|
||||
//给node设置树形如icon；是否允许添加子节点，以及右键菜单
|
||||
data.forEach((node) => {
|
||||
if (arr.includes(node.source_type)) {
|
||||
layer.push(node);
|
||||
return;
|
||||
}
|
||||
if (node.detail) node.detail = JSON.parse(node.detail);
|
||||
//设置树上图标，并渲染到地球上
|
||||
this.setOptions(node);
|
||||
});
|
||||
// layer排序
|
||||
layer.sort((a, b) => {
|
||||
return a.layer_index - b.layer_index;
|
||||
});
|
||||
layer.forEach(async (node) => {
|
||||
if (node.detail) node.detail = JSON.parse(node.detail);
|
||||
//设置树上图标，并渲染到地球上
|
||||
await this.setOptions(node);
|
||||
});
|
||||
console.log('datatree', layer);
|
||||
|
||||
// this.$removeChanel("renderNode")
|
||||
this.treeObj = $.fn.zTree.init(
|
||||
$(`#treeDemo`),
|
||||
this.setting,
|
||||
data
|
||||
);
|
||||
window.treeObj = this.treeObj;
|
||||
window.AllNodes = this.treeObj.getNodes()
|
||||
window.newFuzzySearch(
|
||||
`treeDemo`,
|
||||
"#keyword",
|
||||
["bim", "sonShp", "gdbShp"],
|
||||
true,
|
||||
"#queryButton"
|
||||
); /**/
|
||||
|
||||
this.$sendChanel("getTreeObj", this.treeObj);
|
||||
//更新二维图层的层级
|
||||
// console.log("this.setting", this.setting);
|
||||
// this.treeObj
|
||||
if (window.Earth1) {
|
||||
YJ.Global.MouseRightMenu(
|
||||
window.Earth1,
|
||||
true,
|
||||
(text, object) => {
|
||||
|
||||
switch (text) {
|
||||
case "rotateAround":
|
||||
YJ.Global.rotateAround(window.Earth1, object.position);
|
||||
break;
|
||||
case "attribute":
|
||||
if (object.parentId) {
|
||||
// that.showAttr(object.id)
|
||||
shpTotal(null, object.id)
|
||||
} else {
|
||||
that.getNode(object.id);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
resolve();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 获取当前得node
|
||||
getNode(source_id) {
|
||||
if (!source_id) {
|
||||
return
|
||||
}
|
||||
// console.log("source_id", source_id);
|
||||
let node = this.treeObj.getNodeByParam("source_id", source_id, null);
|
||||
console.log('node', node);
|
||||
this.rightMenus.edit.callback(node);
|
||||
},
|
||||
isShowTree: debounce(function () {
|
||||
if (this.isShow) {
|
||||
this.hideen();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
}),
|
||||
hideen() {
|
||||
const TreeIndex = $(".TreeIndex")[0];
|
||||
const animate = () => {
|
||||
if (this.left <= -18) {
|
||||
const img = $(".arrowTree img")[0];
|
||||
img.classList.add("rotate");
|
||||
this.isShow = false;
|
||||
return;
|
||||
}
|
||||
TreeIndex.style.right = this.left - 1 + "%";
|
||||
this.left = this.left - 1;
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
animate();
|
||||
},
|
||||
show() {
|
||||
const TreeIndex = $(".TreeIndex")[0];
|
||||
const animate = () => {
|
||||
if (this.left >= 0) {
|
||||
const img = $(".arrowTree img")[0];
|
||||
img.classList.remove("rotate");
|
||||
this.isShow = true;
|
||||
return;
|
||||
}
|
||||
TreeIndex.style.right = this.left + 1 + "%";
|
||||
this.left = this.left + 1;
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
animate();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rotate {
|
||||
transform: rotateY(180deg);
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
// .ztree li a .curSelectedNode {
|
||||
// background-color: transparent !important;
|
||||
// border: none !important;
|
||||
// padding-top: 0;
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
.TreeIndex {
|
||||
color: #ffffff;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
//width: 18vw; //400
|
||||
//height: 65vh; //660
|
||||
//width: 355px;
|
||||
//height: 648px;
|
||||
width: 18vw;
|
||||
height: 33vw;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.arrowTree {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: -70px;
|
||||
|
||||
img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.box1 {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
padding-top: 2.2em;
|
||||
padding-bottom: 4.4em;
|
||||
//position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.title {
|
||||
width: 10vw; //400
|
||||
height: 4vh;
|
||||
position: relative;
|
||||
//border: 1px solid red;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
font-size: 1.2em;
|
||||
padding-bottom: 0.1em;
|
||||
|
||||
.border {
|
||||
align-self: flex-end;
|
||||
width: 85%;
|
||||
border: 1px solid;
|
||||
border-color: var(--svg-baseLineColor);
|
||||
}
|
||||
|
||||
span {
|
||||
width: 4vh !important;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.ztreeBox {
|
||||
//min-height: 43vh;
|
||||
min-height: 22vw;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
#treeDemo {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
//border: 1px solid #007bff;
|
||||
flex: auto;
|
||||
padding: 0 1vw 0 0.5vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
.searchUp {
|
||||
display: flex;
|
||||
margin-bottom: 0.5vh;
|
||||
|
||||
input {
|
||||
font-size: 14px;
|
||||
flex: auto;
|
||||
border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
//border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
color: #606266;
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
outline: 0;
|
||||
padding: 0 15px;
|
||||
//margin-right: 0.5vw;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input:first-child {
|
||||
border-radius: 17px 0 0 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 10px 20px !important;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 10px !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user