From 415eb8a7e065301203568dd4e2d9c9dbdbe51f14 Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期一, 29 四月 2024 15:04:39 +0800
Subject: [PATCH] 图层树
---
src/store/modules/mapTools.js | 31
src/views/Tools/maplayer.vue | 2
src/components/demoAnimation/animationEdit.vue | 595 ++++++++++++
src/views/Tools/LayerTree.vue | 1913 +++++++++++++++++---------------------
vue.config.js | 2
src/store/index.js | 13
src/views/Tools/baseVuex.js | 37
src/components/demoAnimation/dataTree.vue | 141 ++
src/store/modules/layerTree.js | 121 ++
src/store/modules/mapStatus.js | 41
10 files changed, 1,814 insertions(+), 1,082 deletions(-)
diff --git a/src/components/demoAnimation/animationEdit.vue b/src/components/demoAnimation/animationEdit.vue
new file mode 100644
index 0000000..ee9ea60
--- /dev/null
+++ b/src/components/demoAnimation/animationEdit.vue
@@ -0,0 +1,595 @@
+<template>
+ <div>
+ <Popup ref="demo" :title="title" :left="left" :top="top" @close="close">
+ <div class="topbtn">
+ <el-button type="primary" @click="pause(true)" v-if="isPlay"
+ >鏆傚仠</el-button
+ >
+ <el-button
+ type="primary"
+ @click="pause(false)"
+ v-if="!isPlay && playIndex"
+ >缁х画</el-button
+ >
+ <el-button type="primary" @click="stop" v-if="isPlay || playIndex"
+ >鍋滄</el-button
+ >
+ <el-button
+ type="primary"
+ @click="start(undefined)"
+ v-if="!isPlay && !playIndex"
+ >寮�濮嬫挱鏀�</el-button
+ >
+ <el-button type="primary" @click="save">淇濆瓨</el-button>
+ </div>
+ <div class="dataTable" v-contextmenu:contextmenu>
+ <el-table
+ ref="table"
+ @cell-mouse-enter="mouseIn"
+ @cell-mouse-leave="mouseOut"
+ @row-contextmenu="rightClick"
+ @row-dblclick="rowClick"
+ :data="animationData"
+ style="width: 100%"
+ border
+ max-height="450"
+ highlight-current-row
+ >
+ <el-table-column
+ label="ID"
+ type="index"
+ width="40px"
+ align="center"
+ :resizable="false"
+ >
+ </el-table-column>
+ <el-table-column
+ type="index"
+ width="100px"
+ label="绫诲瀷"
+ align="center"
+ :resizable="false"
+ >
+ <template slot-scope="scope">
+ <el-popover
+ placement="top-start"
+ title="浣嶇疆淇℃伅"
+ width="260"
+ trigger="hover"
+ v-if="scope.row.type === '浣嶇疆'"
+ >
+ <div style="text-align: right; margin: 0">
+ <el-input
+ placeholder="璇疯緭鍏ョ粡搴�"
+ v-model="scope.row.view.lon"
+ >
+ <template slot="prepend">缁忓害:</template>
+ </el-input>
+ <el-input
+ placeholder="璇疯緭鍏ョ淮搴�"
+ v-model="scope.row.view.lat"
+ style="margin-top: 5px"
+ >
+ <template slot="prepend">缁村害:</template>
+ </el-input>
+ <el-input
+ placeholder="璇疯緭鍏ラ珮搴�"
+ v-model="scope.row.view.height"
+ style="margin-top: 5px"
+ >
+ <template slot="prepend">楂樺害:</template>
+ </el-input>
+
+ <!-- <el-button type="primary"
+ style="margin-top: 5px;">纭畾</el-button> -->
+ </div>
+
+ <el-button slot="reference" size="mini">
+ {{
+ scope.row.type === "浣嶇疆" ? "浣嶇疆" : scope.row.actionType
+ }}</el-button
+ >
+ </el-popover>
+
+ <div size="medium" v-if="scope.row.type !== '浣嶇疆'">
+ {{ scope.row.type === "浣嶇疆" ? "浣嶇疆" : scope.row.actionType }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="鎻忚堪"
+ align="center"
+ width=" 180px"
+ :resizable="false"
+ >
+ <template slot-scope="scope">
+ <el-input size="medium" v-model="scope.row.description">
+ </el-input>
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ label="鍝嶅簲鏂瑰紡"
+ align="center"
+ width="100px"
+ :resizable="false"
+ >
+ <template slot-scope="scope">
+ <el-select
+ v-model="scope.row.value"
+ @change="change(scope.row.value, scope.$index)"
+ placeholder="璇烽�夋嫨"
+ >
+ <el-option label="鐐瑰嚮" value="0"> </el-option>
+ <el-option label="绔嬪嵆" value="1"> </el-option>
+ <el-option label="绛夊緟" value="2"> </el-option>
+ </el-select>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="绛夊緟鏃堕棿(绉�)"
+ align="center"
+ :resizable="false"
+ width="130px"
+ >
+ <template slot-scope="scope">
+ <el-input-number
+ controls-position="right"
+ v-model="scope.row.time"
+ :disabled="scope.row.value !== '2'"
+ >
+ </el-input-number>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="鎿嶄綔"
+ align="center"
+ width="200px"
+ :resizable="false"
+ >
+ <template slot-scope="scope">
+ <el-button-group class="btncontainer">
+ <el-button
+ type="primary"
+ icon="el-icon-arrow-up"
+ @click="moveUp(scope.$index)"
+ :disabled="scope.$index == 0"
+ ></el-button>
+ <el-button
+ type="primary"
+ icon="el-icon-arrow-down"
+ @click="moveDown(scope.$index)"
+ :disabled="scope.$index == animationData.length - 1"
+ ></el-button>
+ <el-popconfirm
+ title="纭畾鍒犻櫎鍚楋紵"
+ @confirm="remove(scope.$index)"
+ >
+ <el-button
+ slot="reference"
+ type="primary"
+ icon="el-icon-delete"
+ ></el-button>
+ </el-popconfirm>
+ </el-button-group>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+
+ <v-contextmenu ref="contextmenu" v-model="showRightMenu">
+ <v-contextmenu-item @click="addData('location')"
+ >娣诲姞浣嶇疆</v-contextmenu-item
+ >
+ <v-contextmenu-submenu title="娣诲姞鎿嶄綔">
+ <v-contextmenu-item @click="addData('action', '鏄剧ず瀵硅薄')"
+ >鏄剧ず瀵硅薄</v-contextmenu-item
+ >
+ <v-contextmenu-item @click="addData('action', '闅愯棌瀵硅薄')"
+ >闅愯棌瀵硅薄</v-contextmenu-item
+ >
+ <v-contextmenu-item @click="undergroundMode(true)"
+ >寮�鍚湴涓嬫ā寮�</v-contextmenu-item
+ >
+ <v-contextmenu-item @click="undergroundMode(false)"
+ >鍏抽棴鍦颁笅妯″紡
+ </v-contextmenu-item>
+ </v-contextmenu-submenu>
+ <v-contextmenu-item
+ @click="updateLocation"
+ v-if="selectItem.type === '浣嶇疆'"
+ >鏇存柊浣嶇疆</v-contextmenu-item
+ >
+ <v-contextmenu-item
+ @click="updateAction"
+ v-if="selectItem.type === '鎿嶄綔' && !selectItem.isUnderground"
+ >鏇存柊鎿嶄綔</v-contextmenu-item
+ >
+ </v-contextmenu>
+ </Popup>
+ <div class="controlbtn" v-if="isPlay || playIndex">
+ <el-button-group>
+ <el-button
+ type="primary"
+ icon="el-icon-video-play"
+ circle
+ @click="next"
+ ></el-button>
+ <!-- <el-button type="primary" icon="el-icon-video-pause" circle></el-button> -->
+ <el-button
+ type="primary"
+ icon="el-icon-close"
+ @click="stop"
+ circle
+ ></el-button>
+ </el-button-group>
+ </div>
+ <dataTree ref="dataTree" @success="getTreedata" @updateData="updateData" />
+ </div>
+</template>
+<script>
+import Popup from "@tools/Popup";
+import dataTree from "@c/demoAnimation/dataTree";
+import Bus from "@tools/Bus";
+export default {
+ name: "animationEdit",
+ components: {
+ Popup,
+ dataTree,
+ },
+ data() {
+ return {
+ title: "婕旂ず鍔ㄧ敾",
+ left: "calc(100% - 725px)",
+ top: "10px",
+ value: "0",
+ selectItem: { type: "" },
+ rightClickMenuStyle: {},
+ rightClickMenuDisplay: false,
+ animationData: [], // 涓�缁勫姩鐢荤殑涓�绯诲垪鐗囨
+ nodeId: "", // 褰撳墠鎿嶄綔婕旂ず鍔ㄧ敾id
+ showRightMenu: false,
+ playIndex: 0,
+ palyingAnimation: [], //姝ｅ湪鎾斁鐨勬暟鎹�
+ isPlay: false, // 鏄惁姝ｅ湪鎾斁
+ showControl: false,
+ };
+ },
+ methods: {
+ open(id, data) {
+ this.nodeId = id;
+ if (data) {
+ this.animationData = data;
+ }
+ this.$refs.demo.open();
+ },
+ close() {
+ this.nodeId = "";
+ this.animationData = [];
+ this.save();
+ this.stop();
+ },
+ // 鑾峰彇涓嬫爣
+ getIndexById(id) {
+ for (let i = 0; i < this.animationData.length; i++) {
+ if (this.animationData[i].id === id) {
+ return i;
+ }
+ }
+ return undefined;
+ },
+ // 涓婄Щ
+ moveUp(index) {
+ const upDate = this.animationData[index - 1];
+ this.animationData.splice(index - 1, 1);
+ this.animationData.splice(index, 0, upDate);
+ },
+ // 涓嬬Щ
+ moveDown(index) {
+ const downDate = this.animationData[index + 1];
+ this.animationData.splice(index + 1, 1);
+ this.animationData.splice(index, 0, downDate);
+ },
+ // 鍒犻櫎
+ remove(index) {
+ this.animationData.splice(index, 1);
+ },
+ //鑾峰彇瑙嗚
+ getView() {
+ let degrees = sgworld.Navigate.getDegrees(); //缁忕含搴�
+ let heading = Cesium.Math.toDegrees(Viewer.camera.heading); //姘村钩瑙�
+ let pitch = Cesium.Math.toDegrees(Viewer.camera.pitch); //淇话瑙掑害
+ return {
+ lon: degrees.lon.toFixed(6),
+ lat: degrees.lat.toFixed(6),
+ height: degrees.height.toFixed(2),
+ heading,
+ pitch,
+ };
+ },
+ // 鑾峰彇鏍戜腑璁板綍鐨勬暟鎹�
+ getTreedata(selectInfo, actionType) {
+ let obj = {
+ id: window.sgworld.Core.getuid(),
+ description: "姝ゅ缂栬緫鎻忚堪",
+ actionType, //璁板綍 鎿嶄綔鐨勭绫�
+ type: "鎿嶄綔",
+ selectInfo,
+ value: "1",
+ time: undefined,
+ isClick: false,
+ };
+ if (this.selectItem && this.selectItem.id) {
+ let index = this.getIndexById(this.selectItem.id);
+ this.animationData.splice(index + 1, 0, obj);
+ } else {
+ this.animationData.push(obj);
+ }
+ },
+ // 娣诲姞璁板綍
+ addData(type, actionType) {
+ if (type === "action") {
+ this.$refs.dataTree.open(actionType);
+ } else {
+ let location = this.getView();
+ let obj = {
+ id: window.sgworld.Core.getuid(),
+ description: "姝ゅ缂栬緫鎻忚堪",
+ type: "浣嶇疆",
+ view: location,
+ value: "1",
+ time: undefined,
+ isClick: false,
+ };
+ if (this.selectItem) {
+ let index = this.getIndexById(this.selectItem.id);
+ this.animationData.splice(index + 1, 0, obj);
+ } else {
+ this.animationData.push(obj);
+ }
+ }
+ },
+ // 鍦颁笅妯″紡
+ undergroundMode(val) {
+ let actionType = val ? "寮�鍚湴涓嬫ā寮�" : "鍏抽棴鍦颁笅妯″紡";
+ let obj = {
+ id: window.sgworld.Core.getuid(),
+ isUnderground: true,
+ description: "姝ゅ缂栬緫鎻忚堪",
+ actionType,
+ type: "鎿嶄綔",
+ value: "1",
+ time: undefined,
+ isClick: false,
+ };
+ if (this.selectItem) {
+ let index = this.getIndexById(this.selectItem.id);
+ this.animationData.splice(index + 1, 0, obj);
+ } else {
+ this.animationData.push(obj);
+ }
+ },
+ // 鏇存柊浣嶇疆
+ updateLocation() {
+ if (this.selectItem && this.selectItem.type === "浣嶇疆") {
+ let location = this.getView();
+ let index = this.getIndexById(this.selectItem.id);
+ if (this.animationData[index].view) {
+ this.animationData[index].view = location;
+ }
+ }
+ },
+ // 鏇存柊鎿嶄綔
+ updateAction() {
+ if (this.selectItem && this.selectItem.type === "鎿嶄綔") {
+ this.$refs.dataTree.open(
+ this.selectItem.actionType,
+ this.selectItem.selectInfo,
+ true
+ );
+ }
+ },
+ //淇濆瓨鏇存柊
+ updateData(newData) {
+ let index = this.getIndexById(this.selectItem.id);
+ this.animationData[index].selectInfo = newData;
+ },
+ // 淇濆瓨
+ save() {
+ this.$emit("success", this.nodeId, this.animationData);
+ },
+ // 寮�濮嬫挱鏀�
+ start(data) {
+ if (data) {
+ this.animationData = data;
+ }
+ this.playIndex = 0;
+ this.isPlay = true;
+ this.display();
+ },
+ // 鎾斁
+ display(data, click = false) {
+ if (data) {
+ this.stop();
+ this.playIndex = this.getIndexById(data.id);
+ this.isPlay = true;
+ click = true;
+ }
+ if (this.playIndex > this.animationData.length - 1) {
+ this.stop();
+ return;
+ } else if (!this.isPlay) {
+ return;
+ }
+ let thisPlay = this.animationData[this.playIndex];
+ this.$refs.table && this.$refs.table.setCurrentRow(thisPlay);
+ if (thisPlay.isClick && !click) {
+ this.playIndex--;
+ } else {
+ if (thisPlay.type === "浣嶇疆") {
+ let position = thisPlay.view;
+ let maximumHeight =
+ position.height < 0 && Viewer.camera.positionCartographic.height < 0
+ ? Math.max([
+ position.height,
+ Viewer.camera.positionCartographic.height,
+ ])
+ : undefined;
+ Viewer.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(
+ position.lon,
+ position.lat,
+ position.height
+ ),
+ orientation: {
+ heading: Cesium.Math.toRadians(position.heading),
+ pitch: Cesium.Math.toRadians(position.pitch),
+ roll: 0,
+ },
+ maximumHeight,
+ });
+ } else if (thisPlay.type === "鎿嶄綔") {
+ let show;
+ if (thisPlay.actionType === "鏄剧ず瀵硅薄") {
+ show = true;
+ } else if (thisPlay.actionType === "闅愯棌瀵硅薄") {
+ show = false;
+ }
+ if (thisPlay.actionType === "寮�鍚湴涓嬫ā寮�") {
+ sgworld.Analysis.UndergroundMode(true, 0.5);
+ } else if (thisPlay.actionType === "鍏抽棴鍦颁笅妯″紡") {
+ sgworld.Analysis.UndergroundMode(false);
+ }
+ this.$emit("setAnimation", thisPlay.selectInfo, show);
+ }
+ let time = 0;
+ if (thisPlay.type === "浣嶇疆") {
+ time = 3;
+ }
+ if (thisPlay.time) {
+ this.timeOut(() => {
+ // 瀹氭椂
+ this.playIndex++;
+ this.display();
+ }, thisPlay.time + time);
+ } else {
+ this.timeOut(() => {
+ this.playIndex++;
+ this.display();
+ }, time);
+ }
+ }
+ },
+ next() {
+ this.playIndex++;
+ this.display(undefined, true);
+ },
+ // 鍋滄
+ stop() {
+ clearTimeout(this.time);
+ sgworld.Navigate.Stop(); //鍙栨秷椋炶鐘舵��
+ this.$refs.table && this.$refs.table.setCurrentRow();
+ window.sgworld.Analysis.UndergroundMode(false, 0.5);
+ this.playIn;
+ this.playIndex = 0;
+ this.isPlay = false;
+ },
+ //鏆傚仠
+ pause(val) {
+ this.isPlay = !this.isPlay;
+ if (!val) {
+ this.display();
+ }
+ },
+ timeOut(callback, time) {
+ clearTimeout(this.time);
+ this.time = setTimeout(callback, time * 1000);
+ },
+ change(value, index) {
+ switch (value) {
+ case "0":
+ this.animationData[index].isClick = true;
+ this.animationData[index].time = undefined;
+ break;
+ case "1":
+ this.animationData[index].time = undefined;
+ this.animationData[index].isClick = false;
+ break;
+ case "2":
+ this.animationData[index].time = 1;
+ this.animationData[index].isClick = false;
+ break;
+ }
+ },
+ rowClick(row, column, event) {
+ // this.display(row);
+ },
+ //榧犳爣鎿嶄綔
+ mouseIn(row) {
+ if (this.$refs.contextmenu.visible || this.$refs.dataTree.isOpen) {
+ return;
+ }
+ this.selectItem = row;
+ },
+ mouseOut() {
+ if (this.$refs.contextmenu.visible || this.$refs.dataTree.isOpen) {
+ return;
+ }
+ this.selectItem = { type: "" };
+ },
+ rightClick(row, column, event) {
+ if (row) {
+ this.selectItem = row;
+ }
+ },
+ },
+ mounted() {
+ Bus.$off("closeAnimationEdit");
+ Bus.$on("closeAnimationEdit", () => {
+ this.close();
+ this.$refs.demo.close();
+ });
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.topbtn {
+ margin-left: 5px;
+ .el-button {
+ width: 100px;
+ }
+}
+.popupBody {
+ .dataTable {
+ margin: 10px 5px;
+ /deep/ .el-table__cell {
+ padding: 7px 0 !important;
+ }
+
+ /deep/ .el-table__body-wrapper::-webkit-scrollbar {
+ width: 10px;
+ scrollbar-arrow-color: red;
+ }
+ // 璁剧疆婊氬姩鏉＄殑鑳屾櫙鑹插拰鍦嗚
+ /deep/ .el-table__body-wrapper::-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: #797979;
+ scrollbar-arrow-color: red;
+ }
+ }
+}
+.controlbtn {
+ .el-button-group {
+ width: 80px;
+ position: fixed;
+ top: 140px;
+ left: 50%;
+ right: 50%;
+ z-index: 999;
+ margin: auto auto;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/demoAnimation/dataTree.vue b/src/components/demoAnimation/dataTree.vue
new file mode 100644
index 0000000..751b336
--- /dev/null
+++ b/src/components/demoAnimation/dataTree.vue
@@ -0,0 +1,141 @@
+<template>
+ <Popup
+ ref="pop"
+ :title="title"
+ @close="close"
+ showBtn="true"
+ @yes="sendData"
+ @cancel="close(true)"
+ >
+ <div class="treeContainer">
+ <el-tree
+ ref="tree"
+ show-checkbox
+ :data="treeData"
+ node-key="id"
+ default-expand-all
+ :render-content="renderContent"
+ :expand-on-click-node="false"
+ :auto-expand-parent="false"
+ :default-checked-keys="defaultChecked"
+ >
+ </el-tree>
+ </div>
+ </Popup>
+</template>
+
+<script>
+import Popup from "@tools/Popup";
+import baseVuex from "../../views/Tools/baseVuex";
+export default {
+ name: "tree",
+ components: { Popup },
+ mixins: [baseVuex],
+ data() {
+ return {
+ isOpen: false,
+ title: "灞曠ず鏁版嵁閫夊彇",
+ actionType: "",
+ defaultChecked: [],
+ isUpdate: false,
+ };
+ },
+ methods: {
+ open(actionType, defaultChecked = [], isUpdate = false) {
+ this.isUpdate = isUpdate;
+ this.defaultChecked = defaultChecked;
+ this.actionType = actionType;
+ this.$refs.pop.open();
+ this.isOpen = true;
+ },
+ close(isCancel) {
+ Object.assign(this.$data, this.$options.data());
+ if (isCancel) {
+ this.$refs.pop.close();
+ }
+ this.isOpen = false;
+ },
+ // 瀹屾垚閫夋嫨锛屼紶閫掓暟鎹�
+ sendData() {
+ if (this.isUpdate) {
+ this.$emit("updateData", this.$refs.tree.getCheckedKeys());
+ this.close(true);
+ return;
+ }
+ this.$emit("success", this.$refs.tree.getCheckedKeys(), this.actionType);
+ this.close(true);
+ },
+ // 娓叉煋
+ renderContent(h, { node, data }) {
+ return (
+ <span class="custom-tree-node">
+ <span>
+ <i class={data.children ? "el-icon-folder" : ""}></i>
+ {data.name}
+ </span>
+ </span>
+ );
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.treeContainer {
+ max-height: 500px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ &::-webkit-scrollbar {
+ /*婊氬姩鏉℃暣浣撴牱寮�*/
+ width: 8px;
+ /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
+ height: 8px;
+ scrollbar-arrow-color: red;
+ }
+
+ &::-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: #797979;
+ scrollbar-arrow-color: red;
+ }
+
+ &::-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);
+ }
+ .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;
+ }
+ }
+}
+.btnContainer {
+ margin-top: 10px;
+ display: flex;
+ justify-content: space-evenly;
+}
+</style>
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 6546a8b..d733e3b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,5 +1,8 @@
import Vue from 'vue';
import Vuex from 'vuex';
+import layerTree from './modules/layerTree';
+import mapStatus from './modules/mapStatus';
+import mapTools from './modules/mapTools';
import { getToken, setToken, removeToken } from '@/utils/auth';
import { Loading, Message } from 'element-ui';
import { login, getPublicKey } from '@/api/api';
@@ -84,8 +87,8 @@
gid: null,
val: null
},
- setChangeBaseMap:true,
- showThematicFlag:false,
+ setChangeBaseMap: true,
+ showThematicFlag: false,
},
mutations: {
UPDATE_LISTEN_TIME(state, msg) {
@@ -239,5 +242,9 @@
commit('CHANGE_SETTING', data);
},
},
- modules: {},
+ modules: {
+ layerTree,
+ mapStatus,
+ mapTools,
+ },
});
diff --git a/src/store/modules/layerTree.js b/src/store/modules/layerTree.js
new file mode 100644
index 0000000..7acb4c9
--- /dev/null
+++ b/src/store/modules/layerTree.js
@@ -0,0 +1,121 @@
+// 閬嶅巻鑺傜偣
+function ergodicNode(nodes) {
+ if (nodes && nodes.length) {
+ nodes.forEach((item) => {
+ item.rename = false;
+ item.children && ergodicNode(item.children);
+ });
+ }
+}
+
+/**
+ * 鍥惧眰鏍戞暟鎹�
+ */
+export default {
+ namespaced: true,
+ state: {
+ // 宸ョ▼鏍戞暟鎹�
+ treeData: [],
+ },
+ mutations: {
+ // 瀹氫箟宸ョ▼鏍戞暟鎹�
+ setTreeData(state, data = []) {
+ ergodicNode(data);
+ state.treeData = data;
+ },
+ // 鏍戞寚瀹氫綅缃鍔犲瓙鑺傜偣锛堝繀椤绘爣璇嗕负key锛�
+ addTreeChildren({ treeData }, { parentNode, pid, item }) {
+ if (!pid) {
+ treeData.push(item)
+ return;
+ }
+ (parentNode || treeData).forEach(ele => {
+ if (ele.id === pid) {
+ if (ele.children) {
+ ele.children.push(item)
+ } else {
+ (parentNode || treeData).push(item)
+ }
+
+ return;
+ } else {
+ if (ele.children) {
+ this.commit('layerTree/addTreeChildren', {
+ parentNode: ele.children,
+ pid,
+ item
+ })
+ }
+ }
+ })
+ },
+ // 鍕鹃�夎妭鐐�
+ checkTreeNode({ treeData }, { parentNode, id, checked }) {
+ (parentNode || treeData).forEach(ele => {
+ if (!id || (id && ele.id === id)) {
+ // id涓嶅瓨锛屽嬀閫夋墍鏈夊瓙鑺傜偣锛宨d瀛樺湪锛屽嬀閫夊綋鍓嶈妭鐐�
+ ele.checked = checked;
+ if (ele.children) {
+ this.commit('layerTree/checkTreeNode', { parentNode: ele.children, checked });
+ } else if (ele._children) {
+ this.commit('layerTree/checkTreeNode', { parentNode: ele._children, checked });
+ }
+ if (id) {
+ return;
+ }
+ } else {
+ // 閫掑綊
+ if (ele.children) {
+ this.commit('layerTree/checkTreeNode', {
+ parentNode: ele.children,
+ id,
+ checked
+ })
+ }
+ }
+ })
+ },
+ // 鏇存柊鑺傜偣鏁版嵁
+ updataTreeNode({ treeData }, { parentNode, id, nodeValue, key, value }) {
+ (parentNode || treeData).forEach(ele => {
+ if (ele.id === id) {
+ if (nodeValue) {
+ for (let _key in nodeValue) {
+ if (nodeValue[_key] === undefined) {
+ delete ele[_key];
+ } else {
+ ele[_key] = nodeValue[_key];
+ }
+ }
+ } else {
+ ele[key] = value;
+ }
+ return;
+ } else {
+ if (ele.children) {
+ this.commit('layerTree/updataTreeNode', {
+ parentNode: ele.children,
+ id,
+ nodeValue,
+ key,
+ value
+ })
+ }
+ }
+ })
+ },
+ // 绉婚櫎鑺傜偣
+ removeTreeNode({ treeData }, { id, parentNode }) {
+ (parentNode || treeData).forEach((ele, index) => {
+ if (ele.id === id) {
+ (parentNode || treeData).splice(index, 1)
+ return;
+ } else {
+ if (ele.children) {
+ this.commit('layerTree/removeTreeNode', { id, parentNode: ele.children })
+ }
+ }
+ })
+ }
+ }
+}
diff --git a/src/store/modules/mapStatus.js b/src/store/modules/mapStatus.js
new file mode 100644
index 0000000..905d38e
--- /dev/null
+++ b/src/store/modules/mapStatus.js
@@ -0,0 +1,41 @@
+/**
+ * 鍦板浘鐘舵��
+ */
+export default {
+ namespaced: true,
+ state: {
+ // 鍒濆瀹氫綅
+ viewCenter: [],
+ // 鍦板浘鐘舵��
+ mapStatus: {
+ // 鍙屽嚮缁曢鏃嬭浆閫熷害
+ rotateFlyTime: 30,
+ // 澶槼鍏�
+ sunLight: false,
+ // 鍏夌収寮哄害
+ lightIntensity: 2,
+ // 鍏夌収棰滆壊
+ lightColor: "#ffffff",
+ // 浜害
+ brightness: 1,
+ // 瀵规瘮搴�
+ contrast: 1,
+ // 楗卞拰搴�
+ saturation: 1,
+ }
+
+ },
+ mutations: {
+ // 瀹氫箟瀹氫綅鏁版嵁
+ setView(state, data = []) {
+ for (let i = 0; i < data.length; i++) {
+ data[i] = parseFloat(data[i]);
+ }
+ state.viewCenter = data;
+ },
+ // 鏀瑰彉鍦板浘鐘舵��
+ changeMapStatus(state, { type, value }) {
+ state.mapStatus[type] = value;
+ }
+ }
+}
diff --git a/src/store/modules/mapTools.js b/src/store/modules/mapTools.js
new file mode 100644
index 0000000..fc33e5a
--- /dev/null
+++ b/src/store/modules/mapTools.js
@@ -0,0 +1,31 @@
+/**
+ * 鍦板浘鎺т欢
+ */
+export default {
+ namespaced: true,
+ state: {
+ // 澶撮儴宸ュ叿鏍忔槸鍚︽敹缂�
+ hideTools: false,
+ // 鍙充笂瑙掑崟浣嶆寜閽�
+ hidePositionBtn: false,
+ // 搴曢儴鐘舵�佹爮鏄惁鏄剧ず
+ statusbar: true,
+ // 瀵艰埅鎺т欢
+ navBar: true,
+ // 姣斾緥灏烘帶浠�
+ scaleBarStatus: true
+ },
+ mutations: {
+ changeMapToolsVisible(state, type) {
+ state[type] = !state[type];
+ },
+ changeNavBarVisible(state) {
+ state.navBar = !state.navBar
+ window.sgworld.navControl('nav', state.navBar)
+ },
+ changeScaleBarVisible(state) {
+ state.scaleBarStatus = !state.scaleBarStatus
+ window.sgworld.navControl('scale', state.scaleBarStatus)
+ },
+ },
+}
diff --git a/src/views/Tools/LayerTree.vue b/src/views/Tools/LayerTree.vue
index 3a2e50f..90faa9b 100644
--- a/src/views/Tools/LayerTree.vue
+++ b/src/views/Tools/LayerTree.vue
@@ -1,1145 +1,926 @@
<template>
- <div class="lalala tree-container">
- <el-form ref="form">
- <el-form-item>
- <el-select
- v-model="$store.state.pigCode"
- clearable
- filterable
- style="width :100%"
- @change="prjChanged"
- placeholder="璇烽�夋嫨椤圭洰"
- >
- <el-option
- v-for="item in menus"
- :key="item.code"
- :label="item.name"
- :value="item.code"
+ <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-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-input
- placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�"
- v-model="filterText"
- class="search"
+ <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)"
>
- </el-input>
- </el-form-item>
- </el-form>
- <el-tree
- ref="tree"
- :data="treeData"
- node-key="id"
- show-checkbox
- :props="defaultProps"
- @node-click="handleLeftclick"
- @node-contextmenu="rightClick"
- @check="handleCheckChange"
- :default-checked-keys="handleTreeCheck"
- :expand-on-click-node="false"
- :filter-node-method="filterNode"
- >
- <span
- class="slot-t-node"
- slot-scope="{ node, data }"
- >
- <span v-show="!data.isEdit">
- <span :class="[data.id >= 99 ? 'slot-t-node--label' : '']">{{
- node.label
- }}</span>
+ <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>
- <span v-show="data.isEdit">
- <el-input
- class="slot-t-input"
- size="mini"
- autofocus
- v-model="data.label"
- :ref="'slotTreeInput' + data.id"
- @blur.stop="nodeBlur(node, data)"
- @keydown.native.enter="nodeBlur(node, data)"
- ></el-input>
- </span>
- </span>
- </el-tree>
- <el-card
- class="box-card"
- ref="card"
+ </el-tree>
+ </div>
+
+ <div
+ class="rightClickMenu"
+ v-if="rightClickMenuDisplay"
:style="{ ...rightClickMenuStyle }"
- v-show="menuVisible"
>
- <div
- class="edit"
- @click="showLayerAttribute()"
- v-if="showProp && !shwoHistogram"
- >
- <i class="el-icon-tickets"></i> 灞炴��
- </div>
- <div
- class="edit"
- @click="positioning()"
- v-if="showLocal"
- >
- <i class="el-icon-tickets"></i> 瀹氫綅
- </div>
- <div
- class="edit"
- @click="pellucidity()"
- v-if="showOpacity"
- >
- <i class="el-icon-tickets"></i> 閫忔槑搴�
- </div>
- <div
- class="edit"
- @click="histogram()"
- v-show="shwoHistogram"
- >
- <i class="el-icon-tickets"></i> 閽诲瓟鏌辩姸鍥�
- </div>
- <div
- class="edit"
- v-show="shwoTileDown"
- @click="tileDownload()"
- >
- <i class="el-icon-download"></i> 鐡︾墖涓嬭浇
- </div>
- <div
- class="edit"
- v-show="shwoAnnex"
- @click="annexDownload()"
- >
- <i class="el-icon-tickets"></i> 闄勪欢
- </div>
- </el-card>
+ <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 GeoJSON from "ol/format/GeoJSON.js";
-import queryinfo from "./queryinfo.vue";
-import { Vector as VectorSource } from "ol/source";
-import { Vector as VectorLayer } from "ol/layer";
-import { perms_selectLayers, comprehensive_selectPubById, project_selectDirAll } from "../../api/api.js";
+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: "tree",
- components: { queryinfo },
+ name: "Layer",
+ components: {
+ // Popup,
+ // AddImage,
+ // AddTerrain,
+ // AddWfs,
+ // AddVector,
+ // AddGeojson,
+ // AddModel,
+ // AddPathLayer,
+ // AddOther,
+ // SelectData,
+ animationEdit,
+ // AddOnlineMap,
+ // GetScene,
+ // SaveScene,
+ // Video,
+ // Video3D,
+ },
+ mixins: [baseVuex],
data() {
return {
- isBusy: false, // 姝ｅ繖
- lastPrjCode: "", // 鏈�鍚庨�夋嫨椤圭洰缂栫爜
- showProp: false, // 灞炴��
- shwoHistogram: false, // 閽诲瓟鏌辩姸鍥�
- showLocal: false, // 瀹氫綅
- showOpacity: false, // 涓嶉�忔槑搴�
- shwoTileDown: false, // 鐡︾墖涓嬭浇
- menuVisible: false, // 鑿滃崟
- shwoAnnex: false,//闄勪欢
- levelArray: [ // 楂樼▼鏁扮粍
- 0, 40000000, 20000000, 10000000, 5000000, 2000000, 1000000, 500000,
- 250000, 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200,
- 100, 50, 25, 10, 0,
- ],
- filterText: "", // 鍏抽敭瀛楄繃婊�
- currentData: "", // 褰撳墠鏁版嵁
- currentNode: "", // 褰撳墠鑺傜偣
- rightClickMenuStyle: {}, // 鍙抽敭鑿滃崟鏍峰紡
- handleTreeCheck: [], // 榛樿閫変腑閿�
- layerId: [
- "m_pipeline",
- "th_strategic_channel",
- "bs_project",
- "m_sitepoint",
- ],
- treeData: [], // 鏍戞暟鎹�
- sourceData: [], // 婧愭暟鎹�
- defaultProps: { // 榛樿灞炴�у��
- children: "children",
- label: "cnName",
- },
- mptLayer: [], // Mpt鍥惧眰
- menus: [] // 鑿滃崟椤�
+ 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",
};
},
- watch: {
- filterText(val) {
- this.$refs.tree.filter(val);
- },
- },
mounted() {
- this.getMenus();
- this.$bus.$on("treeDataCopy", (res) => {
- this.$store.state.treeData = this.treeData;
- this.$store.state.checkedKeys = this.$refs.tree.getCheckedKeys();
- });
- if (this.$store.state.showAllLayers) {
- this.layersStart();
- this.$store.state.showAllLayers = false;
+ // 鑾峰彇鏈湴閰嶇疆鏂囦欢
+ if (this.$route.query.hasOwnProperty("layer")) {
+ axios
+ .get(`./layer/${this.$route.query.layer || "layer"}.json`)
+ .then((data) => {
+ data.name && sessionStorage.setItem("SmartEarthTitle", data.name);
+ document.title = sessionStorage.getItem("SmartEarthTitle");
+
+ this.setTreeData([]);
+ this.initData(data.data);
+ });
+ } else if (this.treeData.length) {
+ // 瀛樺湪缂撳瓨鏁版嵁
+ // 鍔犺浇鍦烘櫙鏁版嵁
+ this.loadDataToScene();
} else {
- this.treeData = this.$store.state.treeData;
- this.$refs.tree.setCheckedKeys(this.$store.state.checkedKeys);
+ 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: {
- // 鑾峰彇鑿滃崟
- async getMenus() {
- let data = await project_selectDirAll();
- if (data && data.code == 200) this.menus = data.result;
+ close() {
+ Bus.$emit("checkTab", "index/add/treeLayer", false);
},
- // 鍒濆鍖栧浘灞�
- async layersStart() {
- let data = await perms_selectLayers();
- if (data.code != 200) {
- return this.$message.error("鍥惧眰鍒楄〃鏌ヨ澶辫触");
+ // 瀹氫箟涓浆绔欎簨浠�
+ 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);
}
- let checkKey = [], checkedLayers = [];
- let layers = data.result.filter((lyr) => {
- if (lyr.url && lyr.type == 2 && lyr.isShow == 1) {
- checkKey.push(lyr.id);
- if (lyr.serveType == "WMS") checkedLayers.push(lyr);
+ 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 });
}
- return lyr;
- });
- // 瀛樺偍閫変腑鍥惧眰
- this.treeData = this.setTreeData(layers);
- this.sourceData = JSON.parse(JSON.stringify(this.treeData));
- this.$refs.tree.setCheckedKeys(checkKey);
- sessionStorage.setItem("checkedLayers", JSON.stringify(checkedLayers));
- },
- // 璁剧疆鏍戞暟鎹�
- setTreeData(source) {
- /*let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
- return cloneData.filter((father) => {
- // 寰幆鎵�鏈夐」
- let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
- branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
- // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛岄偅涔� a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭ｄ箞 a.c.d 涔熸槸=2锛�
- return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
- });*/
-
- let arr = [];
- let data = JSON.parse(JSON.stringify(source));
- this.setTreeChildData(data, arr, 0);
-
- return arr;
- },
- // 璁剧疆鏍戝瓙鑺傜偣鏁版嵁
- setTreeChildData(data, arr, pid) {
- let i = 0;
- while (i < data.length) {
- let d = data[i];
- if (d.pid == pid) {
- arr.push(d);
- data.splice(i, 1);
- continue;
+ // 鍒濆瀹氫綅
+ if (this.viewCenter.length) {
+ this.flyTo({
+ flyTo: this.viewCenter,
+ });
}
- i++;
- }
-
- arr.sort(function (a, b) {
- return a.orderNum - b.orderNum;
- });
-
- for (let i in arr) {
- let children = [];
- this.setTreeChildData(data, children, arr[i].id);
- if (children.length) arr[i].children = children;
+ document.title =
+ sessionStorage.getItem("SmartEarthTitle") || "SmartEarth";
+ } else {
+ setTimeout(() => {
+ this.loadDataToScene();
+ }, 500);
}
},
- // 鑺傜偣鑾峰緱鐒︾偣浜嬩欢
- nodeBlur(node, data) {
- if (!data.label.length) return this.$message.error("鑿滃崟鍚嶄笉鍙负绌猴紒");
- if (data.isEdit) this.$set(data, "isEdit", false);
- this.$nextTick(() => {
- this.$refs["slotTreeInput" + data.id].$refs.input.focus();
+ // 閬嶅巻鑺傜偣
+ 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,
});
},
- // 榧犳爣宸﹀嚮浜嬩欢
- handleLeftclick(data, node) {
- this.rmListener();
- },
- // 鍙栨秷榧犳爣鐩戝惉浜嬩欢
- rmListener() {
- this.menuVisible = false;
- // 瑕佸強鏃跺叧鎺夌洃鍚紝涓嶅叧鎺夌殑鏄竴涓潙锛屼笉淇′綘璇曡瘯锛岃櫧鐒跺墠鍙版樉绀虹殑鏃跺�欐病鏈夊暐姣涚梾锛屽姞涓�涓猘lert浣犲氨鐭ラ亾浜�
- document.removeEventListener("click", this.rmListener);
- },
- // 杩囨护鑺傜偣
- filterNode(value, data) {
- if (!value) return true;
- return data.cnName.indexOf(value) !== -1;
- },
- // 榧犳爣鍙冲嚮浜嬩欢
- rightClick(event, object, node, element) {
- if (object.type == 1 || node.data.children != null) return;
+ // 鍕鹃��
+ check(treeNode, data) {
+ let isCheck = data.checkedKeys.indexOf(treeNode.id) > -1;
+ // 鍕鹃�夎妭鐐�
+ this.checkTreeNode({ id: treeNode.id, checked: isCheck });
+ // 鏇存柊鍦烘櫙鏁版嵁
+ _treeTool.checkNode(treeNode, isCheck);
- this.currentNode = node;
- this.currentData = object;
- this.$store.state.propertiesName = object;
-
- this.showProp = object.serveType == "WMS"; // 灞炴��
- this.shwoHistogram = this.showProp && object.enName == "s_explorationpoint"; // 閽诲瓟鏌辩姸鍥�
- this.showLocal = ["Tileset", "3DML", "Mpt", "TMS", "DOM", "DEM"].indexOf(object.serveType) > -1; // 瀹氫綅
- this.showOpacity = ["Tileset", "3DML"].indexOf(object.serveType) > -1; // 涓嶉�忔槑搴�
- this.shwoTileDown = ["TMS", "DOM"].indexOf(object.serveType) > -1 && object.pubid; // 鐡︾墖涓嬭浇
- this.menuVisible = this.showProp || this.shwoHistogram || this.showLocal || this.showOpacity || this.shwoTileDown; // 鑿滃崟
- this.shwoAnnex = ['DEM', 'TMS'].indexOf(object.serveType) > -1;//闄勪欢
- this.$refs.card.$el.style.left = event.pageX + 20 + "px";
- this.$refs.card.$el.style.top = event.pageY + "px";
+ // 鍙兘鍚屾椂鍔犺浇涓�涓湴褰�
+ 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,
+ });
+ }
+ }
},
- // 灞炴�ф樉绀�
- showLayerAttribute(data) {
- this.rmListener();
- this.currentData = data ? data : this.currentData;
- let layer = this.currentData.enName.replaceAll("_", "");
- this.$store.state.mapSpaceQueryLayer = layer;
- this.$store.state.showPopBoxFlag = true;
- this.$store.state.mapPopBoxFlag = "2";
+ // 娣诲姞鑺傜偣|鏂囦欢澶�
+ 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);
+ });
+ }
},
// 瀹氫綅
- async positioning() {
- this.rmListener();
-
- if (["Tileset", "3DML"].indexOf(this.currentData.serveType) > -1) {
- for (let i in Viewer.scene.primitives._primitives) {
- if (Viewer.scene.primitives._primitives[i].id == this.currentData.cnName) {
- Viewer.flyTo(Viewer.scene.primitives._primitives[i]);
- break;
- }
- }
- return;
- }
-
- if (["TMS", "DOM", "DEM"].indexOf(this.currentData.serveType) > -1 && this.currentData.pubid) {
- let data = await comprehensive_selectPubById({ id: this.currentData.pubid });
- if (data.result && data.result.geom) {
- let wkt = this.$wkt.parse(data.result.geom);
- let height = this.getHeight(wkt.coordinates[2]);
- Viewer.camera.flyTo({
- destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], sceneConfig.extureHeight), // 2000
- });
- }
- return;
- }
-
- if ("Mpt" == this.currentData.serveType) {
- if (this.currentData.json) {
- var json = JSON.parse(this.currentData.json);
- if (json.west) {
- Viewer.camera.flyTo({
- destination: Cesium.Rectangle.fromDegrees(json.west, json.south, json.east, json.north)
- })
- }
- } else {
-
- Viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(101.8, 37.9, 10000000.0) }); // 涓浗
- }
-
- }
- },
- // 閽诲瓟鏌辩姸鍥�
- async histogram() {
- this.rmListener();
- let layer = this.currentData.enName.replaceAll("_", "");
- this.$store.state.mapSpaceQueryLayer = layer;
- this.$store.state.mapPopBoxFlag = "2";
- this.$store.state.showPopBoxFlag = true;
- },
- // 閫忔槑搴�
- pellucidity() {
- this.rmListener();
- for (let j in Viewer.scene.primitives._primitives) {
- if (Viewer.scene.primitives._primitives[j].id == this.currentData.cnName) {
- this.$store.state.setAlphaDity = this.currentData;
- this.$bus.$emit("showPellucidity", true);
- break;
- }
- }
- },
- // 鑾峰彇楂樺害
- getHeight(level) {
- if (level > -1 && level < 23) return this.levelArray[level];
- var res = 7
- return this.levelArray[res];
- },
- //闄勪欢涓嬭浇
- annexDownload() {
- this.$bus.$emit('annexDownload', this.currentData)
- },
-
- // 鐡︾墖涓嬭浇
- tileDownload() {
- this.rmListener();
-
- var that = this;
- sgworld.Creator.createSimpleGraphic(
- "rectangle", {},
- function (entity) {
- that.getTileRectangle(entity);
- sgworld.Creator.SimpleGraphic.clear();
- }
- );
- },
- // 鑾峰彇鐡︾墖鍥涜嚦鑼冨洿
- getTileRectangle(res) {
- var value = res.rectangle.coordinates.getValue();
- var val = {
- pubid: this.currentData.pubid,
- pwd: "",
- title: "",
- xmax: Cesium.Math.toDegrees(value.east),
- xmin: Cesium.Math.toDegrees(value.west),
- ymax: Cesium.Math.toDegrees(value.north),
- ymin: Cesium.Math.toDegrees(value.south)
- }
- this.$bus.$emit("titleDown", val);
- },
- // 鍥惧眰閫変腑浜嬩欢
- handleCheckChange(data, checked) {
- if (this.isBusy) return;
-
- let nodes = [];
- this.getNodes(data, nodes);
- let obj = { WMS: [], Tileset: [], TMS: [], Mpt: [], DEM: [] };
-
- for (let i = 0, c = nodes.length; i < c; i++) {
- let node = nodes[i];
- switch (node.serveType) {
- case "WMS":
- obj.WMS.push(node);
- break;
- case "3DML":
- case "Tileset":
- obj.Tileset.push(node);
- break;
- case "TMS":
- obj.TMS.push(node);
- break;
- case "Mpt":
- obj.Mpt.push(node);
- break;
- case "DEM":
- obj.DEM.push(node);
- break;
- }
- }
-
- if (obj.DEM.length) this.setChangeDEM(obj.DEM, checked);
- if (obj.TMS.length) this.setChangeTMS(obj.TMS, checked);
- if (obj.Mpt.length) this.setChangeMpt(obj.Mpt, checked);
- if (obj.Tileset.length) this.setChangeTileset(obj.Tileset, checked);
- if (obj.WMS.length) this.setChangeWMS(obj.WMS, checked);
- },
- // 鑾峰彇瀛愯妭鐐�
- getNodes(data, arr) {
- if (data.children) {
- for (let i = 0, c = data.children.length; i < c; i++) {
- let node = data.children[i];
- if (node.children) {
- this.getNodes(node, arr)
- } else {
- arr.push(node);
- }
- }
+ flyTo(treeNode) {
+ if (treeNode.animationDatas) {
+ this.$refs.animationEdit.start(treeNode.animationDatas);
} else {
- arr.push(data);
+ _treeTool.flyTo(treeNode);
}
},
- // 鑾峰彇鑺傜偣ID
- getCheckNodesIds() {
- let nodes = this.$refs.tree.getCheckedNodes();
- let ids = [];
- for (let i in nodes) {
- ids.push(nodes[i].id);
- }
-
- return ids;
+ select() {
+ this.rightClickMenuDisplay = false;
},
- // 鍒囨崲WMS鏈嶅姟
- setChangeWMS(layers, checked) {
- let value = this.$refs.tree.getCheckedNodes();
- this.$bus.$emit("showMenuLayer", value);
- },
- // 鍒囨崲Tileset
- setChangeTileset(layers, checked) {
- let ids = this.getCheckNodesIds(), arr = [];
- for (let k in layers) {
- let layer = layers[k];
- if (ids.indexOf(layer.id) > -1) {
- arr.push(layer);
- continue;
+ // 绉婚櫎
+ 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");
}
-
- for (let j in Viewer.scene.primitives._primitives) {
- if (Viewer.scene.primitives._primitives[j].id == layer.cnName) {
- Viewer.scene.primitives.remove(Viewer.scene.primitives._primitives[j]);
- break;
+ }
+ },
+ removeChildData(nodes) {
+ nodes.forEach((item) => {
+ if (item.children) {
+ this.removeChildData(item.children);
+ } else {
+ // 绉婚櫎鍦烘櫙鏁版嵁
+ _treeTool.deleteData(item.id);
+ if (item.sourceType === "demoAnimation") {
+ Bus.$emit("closeAnimationEdit");
}
}
-
- let list = this.$store.state.setAlphaList;
- for (let i = 0; i < list.length; i++) {
- if (list[i].name == layer.cnName) {
- list.splice(i, 1);
- }
- }
- }
-
- if (arr.length) this.addTilesetLayers(arr);
- },
- // 娣诲姞Tileset鍥惧眰
- addTilesetLayers(layers) {
- for (let i in layers) {
- let res = layers[i];
- let url = res.url.indexOf("{host}") > -1 ? res.url.replace("{host}", iisHost) : modelUrl + "/" + res.url;
-
- let tileset = Viewer.scene.primitives.add(
- new Cesium.Cesium3DTileset({
- name: res.cnName,
- url: url,
- skipLevelOfDetail: true, // 鍦ㄩ亶鍘嗘椂鍊欒烦杩囪鎯咃細false
- baseScreenSpaceError: 1024,
- maximumScreenSpaceError: url.indexOf("/pnts/") > -1 ? 16 : 64, // 鏈�澶у睆骞曠┖闂撮敊璇細16锛屾暟鍊煎姞澶ц兘璁╂渶缁堟垚鍍忓彉妯＄硦
- skipScreenSpaceErrorFactor: 16,
- skipLevels: 1,
- immediatelyLoadDesiredLevelOfDetail: false,
- loadSiblings: true, // 鑷姩浠庝腑蹇冨紑濮嬭秴娓呭寲妯″瀷锛歠alse
- cullWithChildrenBounds: true, // 浣跨敤瀛愰」杈圭晫浣撶Н鐨勫苟闆嗘潵鍓旈櫎鍥惧潡锛歵rue
- cullRequestsWhileMoving: true,
- cullRequestsWhileMovingMultiplier: 10, // 鍊艰秺灏忚兘澶熸洿蹇殑鍓旈櫎锛�60
- preloadWhenHidden: true,
- preferLeaves: true, // 棰勮瀛愯妭鐐癸細false
- maximumMemoryUsage: 768, // 鍐呭瓨鍒嗛厤鍙樺皬鏈夊埄浜庡唴瀛樺洖鏀讹紝鎻愬崌鎬ц兘浣撻獙
- progressiveResolutionHeightFraction: 0.5, // 鏁板�煎亸浜�0鑳藉璁╁垵濮嬪姞杞藉彉寰楁ā绯�
- dynamicScreenSpaceErrorDensity: 0.5, // 鏁板�煎姞澶э紝鑳借鍛ㄨ竟鍔犺浇鍙樺揩
- dynamicScreenSpaceErrorFactor: 2, // 鍔ㄦ�佸睆骞曠┖闂磋宸殑绯绘暟
- dynamicScreenSpaceError: true, // 鍑忓皯绂荤浉鏈鸿緝杩滅殑灞忓箷绌洪棿閿欒锛歠alse锛屽叏灞忓姞杞藉畬涔嬪悗鎵嶆竻鏅板寲鎴垮眿
- })
- );
- tileset.readyPromise.then((tileset) => {
- tileset.id = res.cnName;
- tileset.layerId = res.id;
- tileset.pubid = res.pubid;
-
- if (res.serveType != '3DML') {
- // Cesium.Matrix4.equals(a,b) 鍒ゆ柇鐭╅樀鏄惁鐩哥瓑锛屾暣涓牴鑺傜偣妯″瀷鐭╅樀锛岃tileSet=>涓栫晫鍧愭爣绯伙紝鍗曚綅鐭╅樀瀵硅绾垮�间负1.0鐨�4*4鐭╅樀
- if (!Cesium.Matrix4.equals(tileset.root.transform, Cesium.Matrix4.IDENTITY)) {
- // 鑾峰彇妯″瀷鐨勪笘鐣屽潗鏍�(绗涘崱灏�)锛孋esium.Matrix4.getTranslation 閫氳繃浠垮皠鍙樻崲鐭╅樀鑾峰彇璇ileSet鐨勪笘鐣屽潗鏍�
- const transformCenter = Cesium.Matrix4.getTranslation(tileset.root.transform, new Cesium.Cartesian3());
- // 灏嗙瑳鍗″皵鍧愭爣杞崲涓篧GS84缁忕含搴﹀潗鏍囷紙妯″瀷鐨勶級
- const transformCartographic = Cesium.Cartographic.fromCartesian(transformCenter);
- // 灏嗙瑳鍗″皵鍧愭爣杞崲涓篧GS84缁忕含搴﹀潗鏍囷紙鎴潰鐨勶級
- const boundingSphereCartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
- const height = boundingSphereCartographic.height - transformCartographic.height;
- // 浠庝竴涓狢artesian3瀵硅薄鐢熸垚Matrix4鍙樻崲鐭╅樀锛堣鍒囬潰鐨勶級
- window.modelHeight = height;
- } else {
- window.modelHeight = 0;
- }
- this.setTilesetArgs(tileset, res);
- }
- });
- }
- },
- // 鍒囨崲TMS
- setChangeTMS(layers, checked) {
- let ids = this.getCheckNodesIds(), arr = [];
- for (let j in layers) {
- let layer = layers[j];
- if (ids.indexOf(layer.id) > -1) {
- arr.push(layer);
- continue;
- }
-
- for (let i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
- if (window.Viewer.imageryLayers._layers[i].name == layer.cnName) {
- window.Viewer.imageryLayers.remove(window.Viewer.imageryLayers._layers[i]);
- break;
- }
- }
- }
-
- if (arr.length) this.addTMSLayers(arr);
- },
- // 娣诲姞TMS鍥惧眰
- addTMSLayers(layers) {
-
- for (let i in layers) {
- let res = layers[i];
- res.url = res.url.indexOf("{host}") > -1 ? res.url.replace("{host}", iisHost) : res.url;
-
- if (res.pubid) {
- this.setTMSLayerByPubid(res);
- continue;
- }
-
- let layer = Viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
- url: res.url,
- maximumLevel: 22,
- enablePickFeatures: false
- }), 1);
-
- layer.id = res.id;
- layer.name = res.cnName;
- if (is_production) {
- Viewer.imageryLayers.raiseToTop(layer);//灏嗗浘灞備笂绉讳竴灞�
- Viewer.imageryLayers.lower(layer);//灏嗗浘灞備笂绉讳竴灞�
- }
-
- }
- },
- // 鍒囨崲Mpt
- setChangeMpt(layers, checked) {
- let ids = this.getCheckNodesIds(), arr = [];
- for (let j in layers) {
- let layer = layers[j];
- if (ids.indexOf(layer.id) != -1) {
- arr.push(layer);
- continue;
- }
-
- for (let i in this.mptLayer) {
- if (this.mptLayer[i].treeobj.name == layer.cnName) {
- this.mptLayer[i].deleteObject();
- this.mptLayer.splice(i, 1);
- }
- }
- }
-
- if (arr.length) this.addMptLayers(arr);
- },
- // 娣诲姞Mpt鍥惧眰
- addMptLayers(layers) {
- for (let i in layers) {
- let res = layers[i];
- if (res.url.indexOf("{host}") > -1) res.url = res.url.replace("{host}", iisHost);
-
- let urls = res.url.split(';');
- var ops = {
- url: urls[0],
- layers: urls[1]
- };
- if (res && res.json) {
- var rs = JSON.parse(res.json);
- ops.rectangle = Cesium.Rectangle.fromDegrees(rs.west, rs.south, rs.east, rs.north);
- }
-
- let layer = sgworld.Creator.createImageryProvider(res.cnName, "wms", ops, "0", undefined, true, "");
- this.mptLayer.push(layer);
- }
- },
- // 鍒囨崲DEM
- setChangeDEM(layers, checked) {
- let ids = this.getCheckNodesIds(), arr = [];
- for (let i in layers) {
- let layer = layers[i];
- if (ids.indexOf(layer.id) != -1) {
- arr.push(layer.url);
- continue;
- }
- }
-
- let url = arr.length ? arr[arr.length - 1] : null;
- this.addDEMLayers(url, null == url);
- },
- // 娣诲姞DEM鍥惧眰
- addDEMLayers(url, useSG) {
- if (useSG) {
- if (Viewer.terrainProvider._isMPT) return;
-
- let option = {
- url: window.sceneConfig.SGUrl,
- layerName: window.sceneConfig.mptName,
- requestVertexNormals: true
- };
- sgworld.Creator.sfsterrainprovider("", option, "", true, "");
- return;
- }
-
- if (url.indexOf("{host}") > -1) url = url.replace("{host}", iisHost);
- Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
- url: url,
- requestVertexNormals: true
});
},
- // 璁剧疆Tileset鍙傛暟
- async setTilesetArgs(tileset, res) {
- if (res.serveType == '3DML' || !res.pubid) {
- this.setTilesetHeigth(tileset, parseFloat(res.elev));
- return;
- }
-
- const data = await comprehensive_selectPubById({ id: res.pubid })
- if (data.code == 200 && data.result.json) this.setTilesetCoord(tileset, data.result.json);
+ // 娓呴櫎鎵�鏈夊璞�
+ clearFirstParentNode(name) {
+ let parentnode = this.getParentNodeByName(name);
+ parentnode && this.remove(parentnode);
},
- // 璁剧疆Tileset楂樺害
- setTilesetHeigth(tileset, height) {
- //3dtile妯″瀷鐨勮竟鐣岀悆浣�
- let boundingSphere = tileset.boundingSphere;
- //杩崱灏旂┖闂寸洿瑙掑潗鏍�=>鍦扮悊鍧愭爣锛堝姬搴﹀埗锛�
- let cartographic_original = Cesium.Cartographic.fromCartesian(boundingSphere.center);
- //鍦扮悊鍧愭爣锛堝姬搴﹀埗锛�=>杩崱灏旂┖闂寸洿瑙掑潗鏍�
- let Cartesian3_original = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, cartographic_original.height);
- let Cartesian3_offset = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, height);
- //鑾峰緱鍦伴潰鍜宱ffset鐨勮浆鎹�
- let translation = Cesium.Cartesian3.subtract(Cartesian3_offset, Cartesian3_original, new Cesium.Cartesian3());
- //淇敼妯″瀷鐭╅樀
- tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
- // Viewer.flyTo(tileset);
+ // 淇濆瓨
+ 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);
},
- // 璁剧疆Tileset鍧愭爣
- setTilesetCoord(tileset, json) {
- let vm = JSON.parse(json);
- let pos = Cesium.Cartesian3.fromDegrees(vm.lon, vm.lat, vm.height);
- let converter = Cesium.Transforms.eastNorthUpToFixedFrame;
- let hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(vm.yaw), 0, 0);
- let matrix = Cesium.Transforms.headingPitchRollToFixedFrame(pos, hpr, Cesium.Ellipsoid.WGS84, converter);
- tileset._root.transform = matrix;
- // Viewer.flyTo(tileset);
+ // 鍙抽敭鑿滃崟鍏冪礌
+ 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;
+ };
},
- // 鏍规嵁Pubid璁剧疆TMS鍥惧眰
- async setTMSLayerByPubid(res) {
- const data = await comprehensive_selectPubById({ id: res.pubid });
- if (!data || data.code != 200) return;
-
- let provider = data.result.max > 0 ?
- new Cesium.UrlTemplateImageryProvider({
- url: res.url,
- minimumLevel: data.result.min,
- maximumLevel: data.result.max,
- enablePickFeatures: false
- }) :
- new Cesium.UrlTemplateImageryProvider({
- url: res.url,
- minimumLevel: data.result.min,
- enablePickFeatures: false
- });
-
- let layer = Viewer.imageryLayers.addImageryProvider(provider, 1);
- layer.name = res.cnName;
-
- if (is_production) {
- Viewer.imageryLayers.raiseToTop(layer);//灏嗗浘灞備笂绉讳竴灞�
- Viewer.imageryLayers.lower(layer);//灏嗗浘灞備笂绉讳竴灞�
- }
- // if (data.result.geom) {
- // let wkt = this.$wkt.parse(data.result.geom);
- // Viewer.camera.flyTo({
- // destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], 2000)
- // });
- // }
+ appendTreeNode() {
+ this.append(this.selectNode);
},
- // 鍒囨崲椤圭洰
- prjChanged(code) {
-
- this.$store.state.pigCode = code;
-
- //if (code) {
- this.isBusy = true;
- let checkedLayers = this.getCheckedLayersByCode(code);
-
- let checkedKeys = [];
- for (let i in checkedLayers) {
- checkedKeys.push(checkedLayers[i].id);
- }
-
- this.treeData = this.getNewTreeData(code);
- this.$store.state.treeData = this.treeData;
- this.$refs.tree.setCheckedKeys(checkedKeys);
- sessionStorage.setItem("checkedLayers", JSON.stringify(checkedLayers));
- this.isBusy = false;
- //}
-
- for (let i = 0, c = this.treeData.length; i < c; i++) {
- this.handleCheckChange(this.treeData[i], true);
- }
+ // 鍙抽敭鍒犻櫎鎸夐挳鐐瑰嚮浜嬩欢
+ deleteTreeNode() {
+ this.remove(this.selectNode);
+ this.$refs.tree && this.$refs.tree.setCurrentKey(null);
+ this.selectNode = undefined;
},
- // 鏍规嵁椤圭洰缂栫爜鑾峰彇閫変腑鍥惧眰
- getCheckedLayersByCode(code) {
- let layers = [];
- for (let i = 0, c = this.treeData.length; i < c; i++) {
- this.getCheckedChildLayersByCode(this.treeData[i], code, layers, false);
- }
-
- return layers;
- },
- // 鏍规嵁椤圭洰缂栫爜鑾峰彇閫変腑瀛愬浘灞�
- getCheckedChildLayersByCode(data, code, layers, isPrj) {
- if (data.children && data.children.length) {
- for (let i = 0, c = data.children.length; i < c; i++) {
- let layer = data.children[i];
- if (layer.children && layer.children.length) {
- let flag = layer.type == 1 && layer.isProject && layer.enName == code;
- this.getCheckedChildLayersByCode(layer, code, layers, flag);
- continue;
- }
-
- //if (layer.type == 2 && (layer.isProject || isPrj)) {
- // layers.push(layer);
- //}
- if (code) {
- if (layer.type == 2 && (layer.isProject || isPrj)) layers.push(layer);
- } else {
- if (layer.isShow) layers.push(layer);
- }
- }
- return;
- }
-
- if (data.type == 2 && (data.isProject || isPrj)) {
- layers.push(data);
- }
- },
- // 鑾峰彇鏂版爲鏁版嵁
- getNewTreeData(code) {
- let data = JSON.parse(JSON.stringify(this.sourceData));
- if (!code) return data;
-
- this.setSubTreeData(data, code);
- this.rmPrjTreeData(data, code);
-
- return data;
- },
- // 璁剧疆鏍戞暟鎹瓙鑺傜偣
- setSubTreeData(data, code) {
- let j = 0;
- while (j < data.length) {
- let d = data[j];
- if (d.type == 1 && d.isProject && d.enName != code) {
- data.splice(j, 1);
- continue;
- }
-
- j++;
- }
-
- for (let i = 0, c = data.length; i < c; i++) {
- if (data[i].children && data[i].children.length) {
- this.setSubTreeData(data[i].children, code);
+ // 鍙抽敭缂栬緫鎸夐挳缂栬緫鏍戣妭鐐�
+ 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);
}
}
},
- // 绉婚櫎椤圭洰鏍戞暟鎹�
- rmPrjTreeData(data, code) {
- /*let j = 0;
- while (j < data.length) {
- let d = data[j];
- if (d.type == 1 && d.isProject && d.enName == code) {
- data.splice(j, 1);
- data.concat(d.children);
- continue;
- }
-
- j++;
- }
-
- for (let i = 0, c = data.length; i < c; i++) {
- if (data[i].children && data[i].children.length) {
- this.rmPrjTreeData(data[i].children, code);
- }
- }*/
-
- let i = 0;
- while (i < data.length) {
- let d = data[i];
- if (!d.children) {
- i++;
- continue;
- }
- if (!d.children.length) {
- data.splice(i, 1);
- continue;
- }
-
- let j = 0;
- while (j < d.children.length) {
- let e = d.children[j];
- if (e.type == 1 && e.isProject && e.enName == code) {
- d.children.splice(j, 1);
- if (e.children && e.children.length) d.children = d.children.concat(e.children);
- continue;
- }
-
- j++;
- }
-
- i++;
- }
-
- for (let i = 0, c = data.length; i < c; i++) {
- if (data[i].children && data[i].children.length) {
- this.rmPrjTreeData(data[i].children, code);
- }
- }
+ // 娣诲姞鐩綍
+ addFold() {
+ let newChild = {
+ id: window.sgworld.Core.getuid(),
+ name: "鏂板缓鐩綍",
+ children: [],
+ rename: true,
+ };
+ this.addData(this.selectNode, newChild);
},
- // 娣诲姞WFS鍥惧眰 *
- addWFSLayers(res) {
- let url =
- res.resource +
- "?service=WFS&version=1.0.0&request=GetFeature&typeName=" +
- res.url +
- "&outputFormat=application%2Fjson";
- $.ajax({
- url: url,
- cache: false,
- async: true,
- success: function (data) {
- let datasource = Cesium.GeoJsonDataSource.load(data, {
- stroke: Cesium.Color.YELLOW,
- fill: Cesium.Color.YELLOW.withAlpha(0.1),
- alpha: 0.1,
- strokeWidth: 8,
- clampToGround: true, //鏄惁璐村湴
+ // 娣诲姞瀹氫綅鐐�
+ 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,
});
- datasource.then((data) => {
- data.name = res.cnName;
- window.Viewer.dataSources.add(data);
- });
- },
- error: function (data) {
- console.log("error");
- },
+ }
+ }
+ },
+ 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,
});
- let vectorLayer = new VectorLayer({
- name: res.cnName,
- source: new VectorSource({
- url: url,
- format: new GeoJSON(),
- }),
- });
- window.map.addLayer(vectorLayer);
- }
+ },
+ allowDrop(draggingNode, dropNode, type) {
+ if (type === "inner") {
+ return false;
+ } else {
+ return true;
+ }
+ },
},
};
</script>
-<style scoped lang="less">
-/* 鐐瑰嚮鑺傜偣鏃剁殑閫変腑棰滆壊 */
-.tree-container /deep/.el-tree-node.is-current > .el-tree-node__content {
- color: #409eff !important;
-}
-.tree-container /deep/ .el-tree-node__expand-icon.expanded {
- -webkit-transform: rotate(90deg);
- transform: rotate(90deg);
-}
-
-.tree-container /deep/ .el-icon-caret-right:before {
- content: "\e791";
- font-size: 18px;
-}
-
-.tree-container /deep/ .el-tree-node__expand-icon {
- margin-left: 1px;
- padding: 0px;
-}
-
-.tree-container /deep/ .el-tree-node__expand-icon.is-leaf {
- margin-left: 0px;
-}
-
-.tree-container /deep/ .el-tree-node {
- position: relative;
- padding-left: 10px;
-}
-
-.tree-container /deep/ .el-tree-node__children {
- padding-left: 16px;
-}
-
-.tree-container /deep/ .el-tree > .el-tree-node:before {
- border-left: none;
-}
-
-.tree-container /deep/ .el-tree > .el-tree-node:after {
- border-top: none;
-}
-
-.tree-container /deep/ .el-tree > .el-tree-node:before {
- border-left: none;
-}
-
-.tree-container /deep/ .el-tree > .el-tree-node:after {
- border-top: none;
-}
-
-.tree-container /deep/ .el-tree-node:before {
- content: "";
- left: 10px;
- position: absolute;
- right: auto;
- border-width: 1px;
-}
-
-.tree-container /deep/ .el-tree-node:after {
- content: "";
- left: 10px;
- position: absolute;
- right: auto;
- border-width: 1px;
-}
-
-.tree-container /deep/ .el-tree-node:before {
- border-left: 1px dashed #ccc;
- bottom: 0px;
+<style scoped lang="less" scoped>
+.treeContainer {
+ width: 100%;
height: 100%;
- top: -19px;
- width: 1px;
-}
-.tree-container /deep/ .el-tree-node:after {
- border-top: 1px dashed #ccc;
- height: 25px;
- top: 20px;
- width: 20px;
-}
+ .treeTitle {
+ text-align: center;
+ margin: 10px 0;
-.el-tree-node :last-child:before {
- height: 40px;
-}
-
-.tree-container {
- margin: 10px;
-}
-
-.tree-container /deep/ .el-tree .el-tree-node {
- position: relative;
-}
-
-.tree-container /deep/ .el-tree-node .el-tree-node__content {
- height: 34px;
- padding-left: 0px !important;
- border: none;
-}
-
-.tree-container /deep/ .el-tree-node .el-tree-node__content::before {
- border-left: 1px dashed #ccc;
- height: 100%;
- top: 0;
- width: 1px;
- margin-left: 1px;
- margin-top: 0px;
- z-index: 8;
-}
-
-.tree-container
- /deep/
- .el-tree-node
- .el-tree-node__children
- .el-tree-node__content::before {
- border-left: 0px dashed #ccc;
- height: 100%;
- top: 0;
- width: 1px;
- margin-left: 1px;
- margin-top: 0px;
- z-index: 8;
-}
-
-.tree-container /deep/ .el-tree-node .el-tree-node__content::after {
- border-top: 1px dashed #ccc;
- height: 1px;
- top: 18px;
- width: 13px;
- margin-left: 1px;
- z-index: 8;
-}
-
-.tree-container /deep/ .el-tree-node {
- .is-leaf + .el-checkbox .el-checkbox__inner {
- display: inline-block;
- }
-
- .el-checkbox .el-checkbox__inner {
- //display: none;
- }
-}
-
-.tree-container
- /deep/
- .el-tree-node
- .el-tree-node__children
- .el-tree-node__content::after {
- border-top: 0px dashed #ccc;
-}
-
-.tree-container .el-tree-node .el-tree-node__content::before,
-.tree-container .el-tree-node .el-tree-node__content::after {
- content: "";
- position: absolute;
- right: auto;
-}
-
-/deep/.el-table__placeholder {
- padding-left: 8px;
-}
-
-/deep/.el-card__body {
- padding: 10px !important;
-
- > div {
- padding-bottom: 10px;
- border-bottom: 1px solid #ccc;
-
- &:hover {
- color: #409eff;
+ /deep/ .el-upload {
+ margin-right: 10px;
}
}
-}
-/deep/ .el-form .el-form-item {
- padding-right: 0px !important;
-}
+ .el-tree {
+ background: transparent;
+ color: #fff;
+ }
-/deep/ .el-form-item {
- margin-bottom: 10px !important;
-}
+ /deep/ .el-tree-node__content:hover {
+ background-color: rgba(245, 247, 250, 0.2);
+ }
-.text {
- font-size: 14px;
-}
+ /deep/ .el-tree-node:focus > .el-tree-node__content {
+ background-color: rgba(245, 247, 250, 0.2);
+ }
-.el-tree {
- width: 100%;
- margin-top: 10px;
-}
+ /deep/ .custom-tree-node {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 14px;
+ padding-right: 10px;
-.search {
- width: 100%;
-}
+ i {
+ margin-right: 5px;
+ }
+ }
-.item {
- padding: 18px 0;
+ /deep/ .el-checkbox > .is-disabled {
+ display: none;
+ }
}
-
-.add {
- cursor: pointer;
- margin-top: 10px;
-}
-
-.delete {
- margin: 10px 0;
- cursor: pointer;
-}
-
-.edit {
- margin-bottom: 10px;
- cursor: pointer;
-}
-
-.search {
- cursor: pointer;
-}
-
-.box-card {
+.rightClickMenu {
position: fixed;
display: block;
z-index: 10000;
- padding: 0px 0px;
+ 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>
diff --git a/src/views/Tools/baseVuex.js b/src/views/Tools/baseVuex.js
index 2226d8e..7a7a7d5 100644
--- a/src/views/Tools/baseVuex.js
+++ b/src/views/Tools/baseVuex.js
@@ -1,18 +1,26 @@
-import { mapState, mapMutations } from 'vuex';
+import {
+ mapState,
+ mapMutations
+} from 'vuex'
export default {
computed: {
- // ...mapState('layerTree', [
- // 'treeData',
- // ]),
- ...mapState('user', ['user']),
+ ...mapState('layerTree', [
+ 'treeData',
+ ]),
+ ...mapState('user', [
+ 'user',
+ ]),
...mapState('mapTools', [
'hideTools',
'hidePositionBtn',
'statusbar',
'navBar',
- 'scaleBarStatus',
+ 'scaleBarStatus'
]),
- ...mapState('mapStatus', ['viewCenter', 'mapStatus']),
+ ...mapState('mapStatus', [
+ 'viewCenter',
+ 'mapStatus',
+ ])
},
methods: {
...mapMutations('layerTree', [
@@ -20,14 +28,19 @@
'addTreeChildren',
'updataTreeNode',
'checkTreeNode',
- 'removeTreeNode',
+ 'removeTreeNode'
]),
- ...mapMutations('user', ['changeUserData']),
+ ...mapMutations('user', [
+ 'changeUserData',
+ ]),
...mapMutations('mapTools', [
'changeScaleBarVisible',
'changeNavBarVisible',
'changeMapToolsVisible',
]),
- ...mapMutations('mapStatus', ['setView', 'changeMapStatus']),
- },
-};
+ ...mapMutations('mapStatus', [
+ 'setView',
+ 'changeMapStatus',
+ ])
+ }
+}
diff --git a/src/views/Tools/maplayer.vue b/src/views/Tools/maplayer.vue
index 476580e..dc6c509 100644
--- a/src/views/Tools/maplayer.vue
+++ b/src/views/Tools/maplayer.vue
@@ -12,7 +12,7 @@
>
<div id="eagleMapContainer">
<div
- style="width:300px;height:400px;"
+ style="height:400px;"
v-drag
@mousedown="dragEagle"
>
diff --git a/vue.config.js b/vue.config.js
index 031f18d..04007e0 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -21,6 +21,8 @@
resolve: {
alias: {
"@": resolve("src"),
+ '@c': resolve('src/components'),
+ '@tools': resolve('src/views/Tools'),
},
},
},
--
Gitblit v1.9.3