1022 lines
32 KiB
Vue
1022 lines
32 KiB
Vue
<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="index">
|
||
</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 { findParentId } from "@/components/Tree/treeNode";
|
||
import { renderTextBox } from "./renderNode";
|
||
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) => {
|
||
// if (item.endsWith(".png") || item.endsWith(".jpg") || item.endsWith(".jpeg") || 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("不支持的文件类型！");
|
||
// }
|
||
// });
|
||
filePaths.forEach((item) => {
|
||
item = item.replace(/\\/g, "/");
|
||
// 使用正则表达式进行不区分大小写的匹配
|
||
if (/\.(png|jpg|jpeg)$/i.test(item)) {
|
||
this.picturePaths.push(item);
|
||
} else if (/\.(kml|kmz|czml|geojson|shp|tab|csv|mif|clt|pak|jct|terrain|bim|json|mbtiles)$/i.test(item)) {
|
||
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);
|
||
// });
|
||
},
|
||
getLastPathComponent(path, extensionsToRemove = []) {
|
||
// 处理路径分隔符
|
||
const normalizedPath = path.replace(/\\/g, '/');
|
||
const lastComponent = normalizedPath.split('/').pop();
|
||
|
||
// 如果没有提供需要移除的后缀列表，直接返回原始名称
|
||
if (extensionsToRemove.length === 0) return lastComponent;
|
||
|
||
// 检查是否匹配任何需要移除的后缀
|
||
for (const ext of extensionsToRemove) {
|
||
const extWithDot = ext.startsWith('.') ? ext : `.${ext}`;
|
||
if (lastComponent.endsWith(extWithDot)) {
|
||
return lastComponent.slice(0, -extWithDot.length);
|
||
}
|
||
}
|
||
|
||
return lastComponent;
|
||
},
|
||
|
||
// 添加资源
|
||
addResource(filePaths) {
|
||
let p_id = getKeyOfSelectedNode(this.$parent.treeObj, "source_id");
|
||
filePaths.forEach((item) => {
|
||
console.log('item', item);
|
||
let name = this.getLastPathComponent(item, ['clt', 'json', 'pak', 'kml', 'kmz', 'shp', 'geojson', 'geoJson', 'czml', 'jct', 'mif', 'tab', 'csv', 'mbtiles']);
|
||
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 item = this.poiOptions[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 (e) {
|
||
if (this.select == "poi") {
|
||
this.poiOptions = [];
|
||
this.value = "";
|
||
let way = localStorage.getItem("searchWay");
|
||
if (way == "net") {
|
||
// treeSearchCb("");
|
||
this.loading = true;
|
||
const doSearch = () => {
|
||
this.mapModule.plugin(
|
||
["AMap.PlaceSearch", "AMap.AutoComplete"],
|
||
() => {
|
||
this.placeSearch = new AMap.PlaceSearch();
|
||
try {
|
||
let string = $("#keyword").val().trim();
|
||
if (string || e.type !== 'change') {
|
||
this.placeSearch.search(
|
||
$("#keyword").val().trim(),
|
||
(status, result) => {
|
||
if (result.info && result.info === "OK") {
|
||
let arr = [];
|
||
result.poiList.pois.forEach((item) => {
|
||
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();
|
||
}
|
||
} 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;
|
||
}
|
||
}
|
||
);
|
||
}
|
||
else {
|
||
this.loading = false;
|
||
}
|
||
} catch (e) {
|
||
this.loading = false;
|
||
}
|
||
}
|
||
);
|
||
};
|
||
if (!this.mapModule) {
|
||
this.loadAmp((err) => {
|
||
if (err) {
|
||
this.$message.error("无网络连接，请检查网络");
|
||
this.loading = false;
|
||
} else {
|
||
doSearch();
|
||
}
|
||
});
|
||
} else {
|
||
doSearch();
|
||
}
|
||
} else if (way == "poi") {
|
||
let string = $("#keyword").val().trim();
|
||
if (string)
|
||
queryPOI({ key: string }, (res) => {
|
||
this.poiOptions = res.list;
|
||
if (this.poiOptions.length) {
|
||
this.$message.success("操作成功");
|
||
this.$refs.select1.toggleMenu();
|
||
}
|
||
else {
|
||
this.$message.warning("搜索无数据");
|
||
}
|
||
this.loading = false;
|
||
});
|
||
else {
|
||
if (e.type === 'change') {
|
||
return
|
||
}
|
||
this.$message.warning("请输入搜索关键字");
|
||
}
|
||
}
|
||
} else {
|
||
this.poiOptions = [];
|
||
this.value = "";
|
||
treeSearchCb();
|
||
}
|
||
}, 500),
|
||
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);
|
||
}
|
||
// 找出所有的点标注，detail中instruct的值不为空的存入udp_pointMap
|
||
if (node.source_type == 'point') {
|
||
let obj = JSON.parse(JSON.stringify(node.detail));
|
||
if (typeof node.detail == "string") {
|
||
obj = JSON.parse(node.detail);
|
||
}
|
||
let key = obj.instruct
|
||
if (key) {
|
||
udp_pointMap.set(key, { source_id: node.source_id })
|
||
}
|
||
|
||
|
||
}
|
||
});
|
||
//给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()
|
||
console.log('window.AllNodes', window.AllNodes);
|
||
|
||
window.newFuzzySearch(
|
||
`treeDemo`,
|
||
"#keyword",
|
||
["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 "textBox":
|
||
this.addTextBox(object.position);
|
||
break;
|
||
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);
|
||
});
|
||
});
|
||
},
|
||
// 添加文本框
|
||
addTextBox(position) {
|
||
// this.$sendChanel("textTetlie", "标注");
|
||
// this.$changeComponentShow(".textModelBox", true);
|
||
// this.$recvChanel("textModelContent", (data) => {
|
||
// console.log(data.text);
|
||
let that = this;
|
||
let source_id = that.$md5(new Date().getTime() + "文本框");
|
||
let textBox = {
|
||
id: source_id,
|
||
position: position,
|
||
text: '',
|
||
show: true,
|
||
};
|
||
let DbOption = {
|
||
source_id,
|
||
source_name: '文本框',
|
||
source_type: "textBox",
|
||
p_id: findParentId(that.treeObj),
|
||
};
|
||
let detailOption = JSON.parse(JSON.stringify(textBox));
|
||
let node = getNodeData(DbOption, detailOption);
|
||
renderTextBox(node);
|
||
addSource(node).then((res) => {
|
||
if ([0, 200].includes(res.code)) {
|
||
cusAddNodes(that.$parent.treeObj, DbOption.p_id, [node]);
|
||
}
|
||
});
|
||
// })
|
||
},
|
||
|
||
// 获取当前得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>
|