From 4867ac0db2e48fac8e595ad78836cb2e92e3ca79 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期三, 18 十月 2023 15:22:13 +0800
Subject: [PATCH] 临时图层管理，在线制图
---
src/assets/js/Map/index.js | 2
src/api/api.js | 16 +++
src/views/plotting/attributeInfo.vue | 1
src/assets/js/Map/temporaryTools.js | 5
src/views/layer/layerManage.vue | 143 +++++++++++++++++++++++-----
src/views/export/exportMap.vue | 130 +++++++++++--------------
6 files changed, 193 insertions(+), 104 deletions(-)
diff --git a/src/api/api.js b/src/api/api.js
index af1bc9b..ad90f88 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -104,5 +104,21 @@
export function publish_updateSjLayerStretch(params) {
return request.post("/publish/updateSjLayerStretch", params);
}
+//鏍囦細=>鍒嗛〉鏌ヨ骞惰繑鍥炶褰曟暟
+export function mark_selectByPageAndCount(params) {
+ return request.get("/mark/selectByPageAndCount", { params: params });
+}
+//鏍囩粯=>鎻掑叆涓�鏉�
+export function mark_insert(params) {
+ return request.post("/mark/insert", params);
+}
+//鏍囦細=>鍒嗗垹闄ゅ鏉�
+export function mark_deletes(params) {
+ return request.get("/mark/deletes", { params: params });
+}
+//鏍囦細=>鏇存柊涓�鏉�
+export function mark_update(params) {
+ return request.post("/mark/update", params)
+}
diff --git a/src/assets/js/Map/index.js b/src/assets/js/Map/index.js
index 0315911..832d2a0 100644
--- a/src/assets/js/Map/index.js
+++ b/src/assets/js/Map/index.js
@@ -89,7 +89,7 @@
}
}
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
},
setEditTemporaryLayer(res) {
// store.state.editTemporaryId = res;
diff --git a/src/assets/js/Map/temporaryTools.js b/src/assets/js/Map/temporaryTools.js
index d888bb1..77aaa7f 100644
--- a/src/assets/js/Map/temporaryTools.js
+++ b/src/assets/js/Map/temporaryTools.js
@@ -5,7 +5,7 @@
removeTemporaryLayer(res) {
var entities = window.Viewer.entities._entities._array;
for (var i in entities) {
- if (entities[i].id == res.id && entities[i].shpType == res.shpType) {
+ if (entities[i].id == res.id && entities[i]._shpType == res.shpType) {
window.Viewer.entities.remove(entities[i])
}
}
@@ -130,7 +130,7 @@
res.far
),
outline: true,
- outlineWidth:res.width,
+ outlineWidth: res.width,
outlineColor: Cesium.Color.fromCssColorString(
res.outlineColor
).withAlpha(res.outlineAlpha),
@@ -260,7 +260,6 @@
var coord = this.setCartesianToEightFour(val[i])
geom.push(coord.lng, coord.lat)
}
- debugger
return {
id: this.isedit ? res.id : (new Date()).getTime(),
cnName: res.name,
diff --git a/src/views/export/exportMap.vue b/src/views/export/exportMap.vue
index ea59f64..2a3f33e 100644
--- a/src/views/export/exportMap.vue
+++ b/src/views/export/exportMap.vue
@@ -1,8 +1,5 @@
<template>
- <div
- class="expiort"
- v-drag="true"
- >
+ <div class="expiort" v-drag="true">
<div class="leftMenu">
<div class="menuTitle">鍦板浘璁捐</div>
<div class="menmuContent">
@@ -20,12 +17,7 @@
<p>鍒朵綔鏃ユ湡</p>
<div class="contentInput">
<!-- <el-input v-model="exportFrom.date"></el-input> -->
- <el-date-picker
- v-model="exportFrom.date"
- style="width: 100%;"
- type="date"
- :clearable="false"
- />
+ <el-date-picker v-model="exportFrom.date" style="width: 100%;" type="date" :clearable="false" />
</div>
</div>
@@ -36,36 +28,19 @@
<div class="contentBox">
<p>瀵煎嚭鏍煎紡</p>
<div class="contentInput">
- <el-select
- style="width: 100%;"
- v-model="exportFrom.type"
- >
- <el-option
- label=".PNG"
- value="png"
- ></el-option>
+ <el-select style="width: 100%;" v-model="exportFrom.type">
+ <el-option label=".PNG" value="png"></el-option>
</el-select>
</div>
<p>绾稿紶璁剧疆</p>
<div class="contentInput">
- <el-select
- style="width: 100%;"
- v-model="exportFrom.pageSize"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.name"
- :value="item.value"
- />
+ <el-select style="width: 100%;" v-model="exportFrom.pageSize">
+ <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</div>
<p>鏃嬭浆瑙掑害</p>
<div class="contentInput">
- <el-input
- v-model="exportFrom.role"
- placeholder="璇疯緭鍏ユ棆杞搴�(0-360)"
- ></el-input>
+ <el-input v-model="exportFrom.role" placeholder="璇疯緭鍏ユ棆杞搴�(0-360)"></el-input>
</div>
</div>
@@ -73,50 +48,22 @@
<div class="contentImg"></div>
鍥惧眰鍒楄〃
</div>
- <div
- class="contentBox spatialTable"
- style="height: 15vh; overflow: auto;"
- >
- <el-table
- ref="singleTableRef"
- :data="tableData"
- highlight-current-row
- style="width: 100%"
- height="calc(100% - 1px)"
- >
- <el-table-column
- type="index"
- label="搴忓彿"
- width="100"
- />
- <el-table-column
- property="cnName"
- label="鍥惧眰鍚嶇О"
- />
+ <div class="contentBox spatialTable" style="height: 15vh; overflow: auto;">
+ <el-table ref="singleTableRef" :data="tableData" highlight-current-row style="width: 100%"
+ height="calc(100% - 1px)">
+ <el-table-column type="index" label="搴忓彿" width="100" />
+ <el-table-column property="cnName" label="鍥惧眰鍚嶇О" />
</el-table>
</div>
</div>
<div class="menuButton">
- <el-button
- size="small"
- type="primary"
- @click.stop="setInsertExporLayer"
- >纭</el-button>
- <el-button
- size="small"
- type="primary"
- class="delbtn"
- @click="editExport"
- >鍙栨秷</el-button>
+ <el-button size="small" type="primary" @click.stop="setInsertExporLayer">纭</el-button>
+ <el-button size="small" type="primary" class="delbtn" @click="editExport">鍙栨秷</el-button>
</div>
</div>
<div class="rightMap">
- <el-image
- style="width: 100%; height: 100%;"
- :src="url"
- fit="fill"
- />
+ <el-image style="width: 100%; height: 100%;" :src="url" fit="fill" />
</div>
</div>
</template>
@@ -179,7 +126,17 @@
const myCanvas = window.Viewer.scene.canvas;
var res = canvas2image.convertToImage(myCanvas, "869", "783", "png");
url.value = res.src;
- tableData.value = store.state.chekNowLayers;
+ //
+
+
+ var layers = store.state.chekNowLayers
+ var tabLayer = layers.filter((rs) => {
+ console.log(rs)
+ if (!rs.shpType && rs.isLayer == 1) {
+ return rs
+ }
+ })
+ tableData.value = tabLayer.reverse();
var val = menuTool.exportSquare;
exportFrom.value.xmin = val[0];
exportFrom.value.ymin = val[1];
@@ -192,14 +149,20 @@
store.state.loading = true;
var token = "?token=" + getToken();
var res = [];
+ var ids = [];
for (var i in tableData.value) {
if (tableData.value[i].tab) {
res.push(tableData.value[i].tab.replace("moon:", ""));
+
}
+ if (!tableData.value[i].shpType) {
+ ids.push(tableData.value[i].id);
+ }
}
res.push("moon");
var obj = {
+ layerIds: ids,
token: token.replace("?token=", ""),
title: exportFrom.value.name,
pageSize: exportFrom.value.pageSize,
@@ -219,7 +182,7 @@
data: JSON.stringify(obj),
contentType: "application/json",
dataType: "json",
- error: function () {},
+ error: function () { },
success: (rs) => {
store.state.loading = false;
var value = "code = " + rs.code + ", result = " + rs.result;
@@ -257,6 +220,7 @@
z-index: 10;
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
}
+
.leftMenu {
width: 358px;
height: 100%;
@@ -264,12 +228,14 @@
display: flex;
flex-direction: column;
}
+
.rightMap {
height: calc(100% - 20px);
width: 849px;
border-right: 1px solid #d6e4ff;
padding: 10px;
}
+
.menmuContent {
flex: 1;
width: 100%;
@@ -288,12 +254,14 @@
background: #0e151f;
margin: 2px 0px;
}
+
.contentBox {
margin: 5px 7px;
width: calc(100% - 76px);
background: #1e2a3d;
padding: 14px 23px 5px 39px;
+
p {
font-size: 12px;
font-family: Source Han Sans CN;
@@ -302,6 +270,7 @@
line-height: 9px;
margin-bottom: 10px;
}
+
.contentInput {
margin-bottom: 10px;
}
@@ -318,6 +287,7 @@
font-family: Source Han Sans CN;
}
}
+
.menuButton {
padding: 10px;
display: flex;
@@ -333,14 +303,17 @@
font-weight: 400;
color: #ffffff;
}
+
.el-button:hover {
border: 1px solid #689cff;
}
+
.delbtn {
background: rgba(245, 108, 108, 0.2);
border: 1px solid #5a0914;
}
}
+
.spatialTable {
margin-top: 10px;
width: 100%;
@@ -351,46 +324,56 @@
background-color: rgba(38, 47, 71, 1) !important;
color: #d6e4ff;
}
+
// 淇敼姣忚鏍峰紡锛�
.el-table /deep/ .el-table__row {
background-color: rgba(38, 47, 71, 1) !important;
color: #d6e4ff;
}
- .el-table /deep/ .el-table__body tr.current-row > td {
+
+ .el-table /deep/ .el-table__body tr.current-row>td {
background-color: rgba(38, 47, 71, 1) !important;
}
- .el-table /deep/ .el-table__body tr:hover > td {
+
+ .el-table /deep/ .el-table__body tr:hover>td {
background-color: rgba(38, 47, 71, 1) !important;
}
+
// 淇敼琛ㄦ牸姣忚杈规鐨勬牱寮忥細
.el-table /deep/ td,
.el-table /deep/ th.is-leaf {
// border-bottom: 1px solid #409eff;
// border-right: 1px solid #409eff;
}
+
.el-table /deep/ .el-table__cell {
padding: 8px 0;
}
+
// 璁剧疆琛ㄦ牸姣忚鐨勯珮搴︼細
.el-table /deep/ .el-table__header tr,
.el-table /deep/ .el-table__header th {
height: 50px;
}
+
.el-table__body tr,
.el-table__body td {
height: 50px;
padding: 0;
}
+
// 璁剧疆琛ㄦ牸杈规棰滆壊锛�
.el-table--border::after,
.el-table--group::after {
width: 0;
}
+
.el-table::before {
height: 0;
}
}
+
.menuTitle {
width: calc(100% - 30px);
@@ -402,13 +385,16 @@
padding: 10px;
padding-left: 28px;
}
+
::-webkit-scrollbar {
width: 10px;
}
+
/* Change the scrollbar background color here */
::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0);
}
+
/* Change the scrollbar button color and roundedness here */
::-webkit-scrollbar-thumb {
background-color: rgba(104, 156, 255, 0.2);
diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue
index b5be958..7d5b0c9 100644
--- a/src/views/layer/layerManage.vue
+++ b/src/views/layer/layerManage.vue
@@ -74,10 +74,11 @@
import attributeList from "./attributeList";
import layerDetail from "./layerDetail";
import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
-import { perms_selectLayers } from "@/api/api";
+import { perms_selectLayers, mark_selectByPageAndCount, mark_insert, mark_deletes, mark_update } from "@/api/api";
import server from "@/assets/js/Map/server";
import { ElMessage } from "element-plus";
import temporaryTool from "@/assets/js/Map/temporaryTools";
+import json from "@/assets/js/colorValue";
const store = useStore(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥
const stretchValue = ref("");
const emits = defineEmits(["setCloseLayer"]);
@@ -114,7 +115,7 @@
emits("setCloseLayer", false);
};
const temporary = ref(new Date().getTime());
-const clickdTemporary = (res, data) => {
+const clickdTemporary = async (res, data) => {
if (res == 1) {
if (store.state.editTemporaryId) {
var id = store.state.editTemporaryId;
@@ -128,6 +129,10 @@
sgworld.Creator.SimpleGraphic.SimpleGraphicObj.push(data.id);
sgworld.Creator.SimpleGraphic.edit(true, { editProp: false });
} else if (res == 2) {
+ var layerId = []
+ layerId.push(data.sid)
+ const data1 = await mark_deletes({ ids: layerId.toString() })
+ if (data1.code != 200) return
temporaryTool.removeTemporaryLayer(data);
var keys = estreeRef.value.getCheckedKeys();
const checkedKeys = [];
@@ -153,32 +158,84 @@
const handleCheckChange = (data, checked) => {
layerAttributeIsshow.value = false;
layerDetailIsshow.value = false;
-
let isCheck = checked.checkedKeys.indexOf(data.id) > -1;
if (isCheck) {
let son = estreeRef.value.getCheckedNodes().reverse();
- var setGeoWms = [];
- var url = null;
for (var i in son) {
var layerArr = son[i];
layerArr.checked = true;
- if (layerArr.category == 2 && layerArr.type == 3) {
-
- if (layerArr.tab != "moon:geo_mappable_unit") {
-
- server.addTreeData(layerArr)
- }
+ if (layerArr.shpType && layerArr.shpType == 'temporaryLayer') {//涓存椂鍥惧眰娣诲姞
+ temporaryTool.addTemporaryTool(layerArr);
} else {
server.addTreeData(layerArr);
}
}
-
- store.commit("SET_CHECKLAYER", son);
} else {
- server.delLayer(data.id)
+ if (data.isLayer == 0) {
+ var layers = data.children;
+ for (var i in layers) {
+ if (layers[i].shpType && layers[i].shpType == 'temporaryLayer') {//涓存椂鍥惧眰娣诲姞
+ temporaryTool.removeTemporaryLayer(layers[i]);
+ } else {
+ server.delLayer(layers[i].id)
+ }
+ }
+ } else {
+ if (data.shpType && data.shpType == 'temporaryLayer') {//涓存椂鍥惧眰娣诲姞
+ temporaryTool.removeTemporaryLayer(data);
+ } else {
+ server.delLayer(data.id)
+ }
+ }
+
}
+
+
+
+ //鍒ゆ柇鏄惁涓虹埗绾�
+ // if (data.isLayer == 0) {//涓虹埗绾�
+
+ // let son = estreeRef.value.getCheckedNodes().reverse();
+ // for(var i in )
+
+
+
+
+ // } else {//涓哄瓙绾�
+
+ // }
+
+
+ //
+ // if (data.shpType && data.shpType == 'temporaryLayer') {
+ // if (isCheck) {
+ // temporaryTool.addTemporaryTool(data);
+ // } else if(!isCheck) {
+ // temporaryTool.removeTemporaryLayer(data);
+ // }
+ // } else {
+ // if (isCheck) {
+ // let son = estreeRef.value.getCheckedNodes().reverse();
+ // for (var i in son) {
+ // var layerArr = son[i];
+ // layerArr.checked = true;
+ // if (layerArr.category == 2 && layerArr.type == 3) {
+
+ // if (layerArr.tab != "moon:geo_mappable_unit") {
+
+ // server.addTreeData(layerArr)
+ // }
+ // } else {
+ // server.addTreeData(layerArr);
+ // }
+ // }
+ // store.commit("SET_CHECKLAYER", son);
+ // } else {
+ //
+ // }
+ // }
};
const setVisiable = (treeNode, checked) => {
if (checked !== undefined) {
@@ -224,10 +281,6 @@
if (layerId.length <= 0) {
return ElMessage.error("璇峰厛鍕鹃�夊浘灞�");
}
-
- // layerDetailIsshow.value = true;
- // store.state.tab = e;
-
} else {
var val = estreeRef.value!.getCheckedKeys(false);
if (val.indexOf(e.id) > -1) {
@@ -305,10 +358,6 @@
};
const setRestLayerData = () => {
let son = estreeRef.value.getCheckedNodes().reverse();
- // server.delLayerAll();
-
- var setGeoWms = [];
- var url = null;
for (var i in son) {
var layerArr = son[i];
layerArr.checked = true;
@@ -335,7 +384,19 @@
treeData.value = setTreeData(dt.result).sort(function (a, b) {
return a.orderNum - b.orderNum;
});
-
+ const comperLayer = await mark_selectByPageAndCount({
+ pageIndex: 1,
+ pageSize: 100000,
+ name: null,
+ })
+ var children = [];
+ if (comperLayer.code == 200 && comperLayer.result) {
+ for (var i in comperLayer.result) {
+ var slayer = JSON.parse(comperLayer.result[i].wkt);
+ slayer.sid = comperLayer.result[i].id;
+ children.push(slayer)
+ }
+ }
treeData.value.unshift({
cnName: "涓存椂鍥惧眰",
level: 1,
@@ -344,7 +405,7 @@
type: 6,
id: temporary.value,
isTemporaryLayer: true,
- children: [],
+ children: children,
});
var std = [];
@@ -414,8 +475,16 @@
return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
});
}
-const addTemporaryLayer = (res) => {
+const addTemporaryLayer = async (res) => {
+ var obj = {
+ id: res.id,
+ name: res.cnName,
+ wkt: JSON.stringify(res)
+ }
+ const data = await mark_insert(obj);
+ if (data.code != 200 || !data.result) return
store.state.temporaryLayer = null;
+ res.sid = data.result;
treeData.value[0].children.push(res);
var id = res.id;
@@ -437,7 +506,7 @@
for (var i = 0; i < val.length; i++) {
if (val[i].id == id) {
val[i].cnName = res;
- treeData.value = [...treeData.value];
+ setEditLayerChange(val[i])
}
}
defaultExpanded.value = [treeData.value[0].id];
@@ -445,13 +514,33 @@
const editTemporaryBackById = (res) => {
var obj = temporaryTool.getEntityObj(res);
var val = treeData.value[0].children;
+ var checkedKeys = estreeRef.value.getCheckedKeys();
+ if (checkedKeys.indexOf(temporary.value) > -1) {
+ checkedKeys.splice(checkedKeys.indexOf(temporary.value), 1)
+ }
for (var i = 0; i < val.length; i++) {
if (val[i].id == res) {
+ obj.sid = val[i].sid;
val[i] = obj;
- treeData.value = [...treeData.value];
+ setEditLayerChange(obj)
}
}
+ nextTick(() => {
+
+
+ estreeRef.value.setCheckedKeys(checkedKeys, true);
+
+ });
};
+const setEditLayerChange = async (res) => {
+ var obj = {
+ id: res.sid,
+ name: res.cnName,
+ wkt: JSON.stringify(res)
+ }
+ const data = await mark_update(obj)
+ if (data.code != 200) return
+}
watch(
() => store.state.restLayer,
(nVal, oVal) => {
diff --git a/src/views/plotting/attributeInfo.vue b/src/views/plotting/attributeInfo.vue
index 5bd51cc..5b0795e 100644
--- a/src/views/plotting/attributeInfo.vue
+++ b/src/views/plotting/attributeInfo.vue
@@ -335,7 +335,6 @@
var res = entity.value;
var type = res.GeoType;
entityType.value = type;
- debugger
switch (type) {
case "label":
showEntity.value.label = true;
--
Gitblit v1.9.3