From bf48462e6ce0e0baa899c1c64c24c05290dc77fd Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期五, 21 七月 2023 18:01:32 +0800
Subject: [PATCH] 图层树开发方法（待验证）下拉框选择图片（有bug）
---
src/api/api.js | 2
src/assets/js/Map/server.js | 87 ++++++++++++++++++++-
src/views/layer/layerDetail.vue | 38 ++++++---
src/views/layer/layerSet.vue | 54 ++++++++++++-
src/views/layer/layerManage.vue | 52 ++++++++++--
5 files changed, 197 insertions(+), 36 deletions(-)
diff --git a/src/api/api.js b/src/api/api.js
index 07d4636..3d175dc 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -33,5 +33,5 @@
//鍥惧眰鏌ヨ
export function layer_selectAll(params) {
//璇锋眰鍦板潃
- return request.get("/layer/selectAll", { params: params });
+ return request.get("/res/selectAll", { params: params });
}
diff --git a/src/assets/js/Map/server.js b/src/assets/js/Map/server.js
index f5a5df2..d792466 100644
--- a/src/assets/js/Map/server.js
+++ b/src/assets/js/Map/server.js
@@ -1,11 +1,12 @@
+import { getToken } from "@/utils/auth";
const server = {
addTreeData(treeNode, checked) {
console.log(treeNode, checked);
- let _data = sgworld.ProjectTree.getObject(treeNode.id);
+ let _data = earthCtrl.ProjectTree.getObject(treeNode.id);
let pID = 0;
console.log(_data);
if (_data) {
- sgworld.ProjectTree.setVisibility(treeNode.id, treeNode.checked);
+ earthCtrl.ProjectTree.setVisibility(treeNode.id, treeNode.checked);
return;
} else {
// _data = _getTreeData(treeNode.id);
@@ -27,15 +28,87 @@
// return;
// }
}
- switch (treeNode.sourceType) {
- case "tms":
+ // comment on table lf.sys_res is '璧勬簮琛�';
+ // comment on column lf.sys_res.id is '涓婚敭ID';
+ // comment on column lf.sys_res.pid is '鐖禝D锛�0-鏍硅妭鐐�';
+ // comment on column lf.sys_res.cn_name is '涓枃鍚嶇О';
+ // comment on column lf.sys_res.en_name is '鑻辨枃鍚嶇О';
+ // comment on column lf.sys_res.type is '绫诲瀷锛�1-鍥惧眰缁�,2-鏅�氬浘灞�,3-浠ｇ悊鍥惧眰';
+ // comment on column lf.sys_res.status is '鐘舵�侊細-1-搴熷純锛�0-鍋滅敤锛�1-鍚敤';
+ // comment on column lf.sys_res.category is '绫诲瀷锛�0-URL锛�1-TMS锛�2-WMTS锛�3-WFS锛�4-Tileset';
+ // comment on column lf.sys_res.firm is '鍘傚晢锛�0-鍏朵粬锛�1-GisServer锛�2-GeoServer锛�3-鏁扮畝';
+ // comment on column lf.sys_res.url is '鏈嶅姟鍦板潃';
+ // comment on column lf.sys_res.test is '娴嬭瘯鍦板潃';
+ // comment on column lf.sys_res.proxy is '浠ｇ悊鍦板潃';
+ // comment on column lf.sys_res.descr is '鎻忚堪';
+ // comment on column lf.sys_res.depid is '鍗曚綅缂栫爜';
+ // comment on column lf.sys_res.dirid is '椤圭洰缂栫爜';
+ // comment on column lf.sys_res.img is '缂╃暐鍥�';
+ // comment on column lf.sys_res.level is '灞傜骇锛�0-鏍硅妭鐐�';
+ // comment on column lf.sys_res.sort is '鎺掑簭';
+ // comment on column lf.sys_res.create_user is '鍒涘缓浜篒D';
+ // comment on column lf.sys_res.create_time is '鍒涘缓鏃堕棿';
+ // comment on column lf.sys_res.update_user is '鏇存柊浜篒D';
+ // comment on column lf.sys_res.update_time is '鏇存柊鏃堕棿';
+ // comment on column lf.sys_res.bak is '澶囨敞';
+ // 浠ｇ悊锛�/proxy/{token}/4
+ // 鍦板潃锛歨ttp://192.168.20.83:8088/MoonServer + proxy.replace("{token}", token)
+ // order_num -> sort
+ // serve_type -> category
+
+ switch (treeNode.type) {
+ case 1:
+ treeNode.useUrl = treeNode.url;
+ break;
+ case 2:
+ treeNode.useUrl = treeNode.url;
+ break;
+ case 3:
+ var token = getToken();
+ treeNode.useUrl = BASE_URL + treeNode.proxy.replace("{token}", token);
+ break;
+ }
+ if (treeNode.firm == 2) {
+ this.addGeoServer(treeNode);
+ } else {
+ this.addGisServer(treeNode);
+ }
+ },
+ addGisServer(treeNode) {
+ console.log(treeNode);
+ // 0-URL锛�1-TMS锛�2-WMTS锛�3-WFS锛�4-Tileset';
+ switch (treeNode.category) {
+ case 1:
+ this.AddTmsLayer(treeNode.useUrl);
+ break;
+ case 2:
+ this.AddWmtesLayer(treeNode.useUrl);
+ break;
+ case 3:
+ break;
+ case 4:
+ break;
+ }
+ },
+ addGeoServer(treeNode) {
+ // 0-URL锛�1-TMS锛�2-WMTS锛�3-WFS锛�4-Tileset';
+ switch (treeNode.category) {
+ case 1:
+ break;
+ case 2:
+ this.AddGeoWmsLayer(treeNode.useUrl);
+ break;
+ case 3:
+ break;
+ case 4:
break;
}
},
//娣诲姞geoserver鏈嶅姟wms鏈嶅姟
- AddGeoWmsLayer(url, s) {
+ AddGeoWmsLayer(url) {
window.layerWMS = new SmartEarth.Cesium.WebMapServiceImageryProvider({
- url: "http://192.168.22.198:8090/geoserver/moon/wms",
+ // url: "http://192.168.22.198:8090/geoserver/moon/wms",
+ url: url,
layers: "moon:lunar_place_nane",
parameters: {
transparent: true,
@@ -56,7 +129,7 @@
// url: url + "/{z}/{x}/{y}.png"
// });
// Viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);
- sgworld.Creator.createUrlTemplateImageryProvider(
+ earthCtrl.Creator.createUrlTemplateImageryProvider(
"tms鏈嶅姟",
{
url: Cesium.buildModuleUrl(url + "/{z}/{x}/{reverseY}.png"),
diff --git a/src/views/layer/layerDetail.vue b/src/views/layer/layerDetail.vue
index 35270c0..be47681 100644
--- a/src/views/layer/layerDetail.vue
+++ b/src/views/layer/layerDetail.vue
@@ -26,13 +26,18 @@
class="m-2"
placeholder="Select"
size="small"
+ @change="changeSelection(stretchValue)"
+ ref="select"
>
<el-option
v-for="item in stretchOptions"
:key="item.value"
:label="item.label"
:value="item.value"
- />
+ >
+ <img :src="item.url" style="height: 30px; margin-right: 10px" />
+ <span>{{ item.label }}</span>
+ </el-option>
</el-select>
</div>
</div>
@@ -52,26 +57,17 @@
const transparence = ref(0);
let layerName = ref("鍥惧眰鍚嶇О");
let layerState = ref(false);
+let select = ref();
const stretchOptions = [
{
value: "Option1",
label: "Option1",
+ url: "https://img2.baidu.com/it/u=3727554264,855092936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
},
{
value: "Option2",
label: "Option2",
- },
- {
- value: "Option3",
- label: "Option3",
- },
- {
- value: "Option4",
- label: "Option4",
- },
- {
- value: "Option5",
- label: "Option5",
+ url: "https://img2.baidu.com/it/u=3727554264,855092936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
},
];
const emits = defineEmits(["detailClose"]);
@@ -83,6 +79,22 @@
emits("detailClose", false);
};
const handlCheckAllChange = (res) => {};
+const changeSelection = (scope) => {
+ let brand = scope;
+ for (let index in stretchOptions) {
+ let aa = stretchOptions[index];
+ let value = aa.value;
+ if (brand === value) {
+ console.log(select.value);
+ select.value.$el.children[0].children[0].setAttribute(
+ "style",
+ "background:url(" +
+ aa.url +
+ ") no-repeat 10px;background-size: 30px 30px;color:#333;padding-left: 50px;"
+ );
+ }
+ }
+};
</script>
<style lang="less" scoped>
diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue
index b33a066..4b33b1e 100644
--- a/src/views/layer/layerManage.vue
+++ b/src/views/layer/layerManage.vue
@@ -33,7 +33,7 @@
Delete
</a>
</span> -->
- <span class="button" v-if="data.type == 2">
+ <span class="button" v-if="data.type == 2 || data.type == 3">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
<el-icon class="el-icon--right">
@@ -91,6 +91,7 @@
import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
import { layer_selectAll } from "@/api/api";
import server from "@/assets/js/Map/server";
+import { ElMessage } from "element-plus";
const store = useStore(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥
const stretchValue = ref("");
@@ -119,6 +120,7 @@
];
const transparence = ref(0);
var treeData = ref([]);
+var layerListData = ref([]);
let menuOption = reactive([
{
id: 1,
@@ -305,16 +307,47 @@
};
//缂栬緫鍥惧眰鏍�
const addlayer = (res) => {
- menuOption.push(res);
- // treeData.value = handleTree(menuOption, "id", "pid", "children");
+ console.log(res);
+ let node;
+ layerListData.value.forEach((e) => {
+ if (e.id == res.id) {
+ node = estreeRef.value.getNode(e);
+ }
+ });
+ // 灏嗗彉鍔ㄤ箣鍓嶇殑node澶囦唤
+ let copyNode = { ...node };
+ copyNode.previousSibling = { ...node.previousSibling };
+ copyNode.nextSibling = { ...node.nextSibling };
+ if (res.type === 1) {
+ // 涓婄Щ
+ if (node.previousSibling) {
+ // 鍒犻櫎鍘熷厛鐨刵ode
+ estreeRef.value.remove(node.data);
+ // 鎷垮埌copy鐨刵ode
+ // nodeData = CircularJSON.parse(window.sessionStorage.getItem("menuNode"));
+ // 澶嶅埗璇ode鍒版寚瀹氫綅缃�(鍙傛暟锛�1. 瑕佸鍔犵殑鑺傜偣鐨� data 2. 瑕佸鍔犵殑鑺傜偣鐨勫悗涓�涓妭鐐圭殑 data銆乲ey 鎴栬�� node)
+
+ estreeRef.value.insertBefore(
+ copyNode.data,
+ copyNode.previousSibling.data
+ );
+ // window.sessionStorage.removeItem("menuNode");
+ }
+ } else {
+ // 涓嬬Щ
+ if (node.nextSibling) {
+ estreeRef.value.remove(node.data);
+ estreeRef.value.insertAfter(copyNode.data, copyNode.nextSibling.data);
+ }
+ }
};
//鍒犻櫎鍥惧眰鏍�
const delLayer = (res) => {
- menuOption = menuOption.filter((item) => {
- return item.id != res;
- });
- console.log(res);
- console.log(menuOption);
+ // menuOption = menuOption.filter((item) => {
+ // return item.id != res;
+ // });
+ // console.log(res);
+ // console.log(menuOption);
// treeData = handleTree(menuOption, "id", "pid", "children");
};
@@ -322,6 +355,7 @@
const dt = await layer_selectAll();
if (dt.code == 200) {
treeData.value = setTreeData(dt.result);
+ layerListData.value = dt.result;
}
// treeData.value = JSON.parse(JSON.stringify(treeData.value));
@@ -337,7 +371,7 @@
let branchArr = cloneData.filter((child) => father.id == child.pid);
if (branchArr.length > 0) {
branchArr.sort(function (a, b) {
- return a.orderNum - b.orderNum;
+ return a.sort - b.sort;
});
}
diff --git a/src/views/layer/layerSet.vue b/src/views/layer/layerSet.vue
index ae13792..3908cd2 100644
--- a/src/views/layer/layerSet.vue
+++ b/src/views/layer/layerSet.vue
@@ -74,8 +74,12 @@
@click="delLayer"
>鍒犻櫎</el-button
>
- <el-button type="primary" :icon="Top">鍚戜笂绉诲姩</el-button>
- <el-button type="primary" :icon="Bottom">鍚戜笅绉诲姩</el-button>
+ <el-button type="primary" :icon="Top" @click="move(1)"
+ >鍚戜笂绉诲姩</el-button
+ >
+ <el-button type="primary" :icon="Bottom" @click="move(2)"
+ >鍚戜笅绉诲姩</el-button
+ >
</div>
<div class="edit_box_form">
<el-form :model="form" label-width="120px">
@@ -208,7 +212,7 @@
}
var addObj = {
id: id,
- name: form.name,
+ cnName: form.name,
region: form.region,
layerUrl: form.layerUrl,
children: [],
@@ -220,11 +224,13 @@
}
if (t == "t") {
- addObj.parentId = selectedObj.value.parentId;
+ // console.log(treeRef.value.getNode(selectedObj.value));
+ // addObj.parentId = selectedObj.value.parentId;
+ treeRef.value.insertAfter(addObj, treeRef.value.getNode(selectedObj.value));
} else {
- addObj.parentId = selectedNodeId.value;
+ // addObj.parentId = selectedNodeId.value;
+ treeRef.value.append(addObj, treeRef.value.getNode(selectedObj.value));
}
- emits("addlayer", addObj);
};
//鍒犻櫎
const delLayer = () => {
@@ -246,6 +252,42 @@
}
});
};
+//绉诲姩
+const move = (type) => {
+ // let node = treeRef.value.getCurrentNode();
+ let node = treeRef.value.getNode(selectedObj.value);
+ let data = selectedObj.value;
+ // 灏嗗彉鍔ㄤ箣鍓嶇殑node澶囦唤
+ let copyNode = { ...node };
+ copyNode.previousSibling = { ...node.previousSibling };
+ copyNode.nextSibling = { ...node.nextSibling };
+ // window.sessionStorage.setItem("menuNode", CircularJSON.stringify(copyNode));
+
+ if (type === 1) {
+ // 涓婄Щ
+ if (node.previousSibling) {
+ // 鍒犻櫎鍘熷厛鐨刵ode
+ treeRef.value.remove(node.data);
+ // 鎷垮埌copy鐨刵ode
+ // nodeData = CircularJSON.parse(window.sessionStorage.getItem("menuNode"));
+ // 澶嶅埗璇ode鍒版寚瀹氫綅缃�(鍙傛暟锛�1. 瑕佸鍔犵殑鑺傜偣鐨� data 2. 瑕佸鍔犵殑鑺傜偣鐨勫悗涓�涓妭鐐圭殑 data銆乲ey 鎴栬�� node)
+
+ treeRef.value.insertBefore(copyNode.data, copyNode.previousSibling.data);
+ // window.sessionStorage.removeItem("menuNode");
+ } else {
+ return ElMessage.warning("璇ヨ彍鍗曞凡缁忔槸褰撳墠灞傛渶涓婄骇");
+ }
+ } else {
+ // 涓嬬Щ
+ if (node.nextSibling) {
+ treeRef.value.remove(node.data);
+ treeRef.value.insertAfter(copyNode.data, copyNode.nextSibling.data);
+ } else {
+ return ElMessage.warning("璇ヨ彍鍗曞凡缁忔槸褰撳墠灞傛渶涓嬬骇");
+ }
+ }
+ emits("addlayer", { type: type, id: selectedObj.value.id });
+};
</script>
<style lang="less" scoped>
--
Gitblit v1.9.3