From 7540886ea5a498085052104c054cf9f0853310c9 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期一, 05 六月 2023 10:20:58 +0800
Subject: [PATCH] 顶部菜单，左侧菜单，图图层管理界面
---
src/assets/img/leftBtn/形状 3 拷贝.png | 0
src/assets/img/leftBtn/形状 1.png | 0
src/assets/img/topBtn/圆角矩形 12 拷贝 5.png | 0
src/assets/img/topBtn/椭圆 5 拷贝 3.png | 0
src/assets/img/leftBtn/形状 1 拷贝.png | 0
src/assets/img/topBtn/椭圆 7 拷贝 2.png | 0
src/assets/img/leftBtn/形状 2 拷贝.png | 0
src/assets/img/topBtn/椭圆 3 拷贝 23.png | 0
src/assets/img/topBtn/椭圆 8 拷贝 8.png | 0
src/assets/img/leftBtn/形状 4 拷贝.png | 0
src/assets/img/topBtn/图层 14 拷贝 3.png | 0
src/assets/img/topBtn/图层 8 拷贝 2.png | 0
src/assets/img/topBtn/图层 31.png | 0
src/assets/img/topBtn/图标bj.png | 0
src/assets/img/topBtn/矩形 13 拷贝.png | 0
src/assets/img/topBtn/向上1.png | 0
src/assets/img/topBtn/形状 5.png | 0
src/assets/img/topBtn/椭圆 3 拷贝 16.png | 0
src/assets/img/topBtn/矩形 8 拷贝 11.png | 0
src/assets/img/leftBtn/形状 8 拷贝.png | 0
src/assets/img/leftBtn/图层1 (1).png | 0
src/components/topBtn.vue | 223 +++++++-------
src/assets/js/Map/menuData.js | 187 +++++------
src/assets/img/leftBtn/形状 2.png | 0
src/assets/img/topBtn/图层 8.png | 0
src/components/menus.vue | 283 ++++--------------
src/utils/drag.ts | 46 +++
src/assets/img/leftBtn/形状 8.png | 0
src/assets/img/topBtn/文字标注.png | 0
src/assets/img/leftBtn/形状 3.png | 0
src/assets/img/topBtn/椭圆 3 拷贝 20.png | 0
src/assets/img/topBtn/高程测量.png | 0
src/assets/img/topBtn/矢量智能对象 拷贝 3.png | 0
src/assets/img/topBtn/图层 5 拷贝 6.png | 0
src/views/Index.vue | 11
src/assets/img/topBtn/形状 3.png | 0
src/main.ts | 4
src/assets/img/topBtn/图层 7 拷贝 5.png | 0
src/assets/img/topBtn/清除.png | 0
src/assets/img/topBtn/椭圆 6.png | 0
src/assets/img/topBtn/图层 31 拷贝.png | 0
src/assets/img/topBtn/圆角矩形 12 拷贝 6.png | 0
src/assets/img/leftBtn/图层1 (1) 拷贝.png | 0
src/assets/js/Map/menuTool.js | 80 +++++
src/assets/img/leftBtn/形状 4.png | 0
src/views/layer/layerManage.vue | 37 ++
src/assets/img/矩形 1.png | 0
47 files changed, 437 insertions(+), 434 deletions(-)
diff --git "a/src/assets/img/leftBtn/\345\233\276\345\261\2021 \0501\051 \346\213\267\350\264\235.png" "b/src/assets/img/leftBtn/\345\233\276\345\261\2021 \0501\051 \346\213\267\350\264\235.png"
new file mode 100644
index 0000000..2eeedaa
--- /dev/null
+++ "b/src/assets/img/leftBtn/\345\233\276\345\261\2021 \0501\051 \346\213\267\350\264\235.png"
Binary files differ
diff --git "a/src/assets/img/leftBtn/\345\233\276\345\261\2021 \0501\051.png" "b/src/assets/img/leftBtn/\345\233\276\345\261\2021 \0501\051.png"
new file mode 100644
index 0000000..fbce7e5
--- /dev/null
+++ "b/src/assets/img/leftBtn/\345\233\276\345\261\2021 \0501\051.png"
Binary files differ
diff --git "a/src/assets/img/leftBtn/\345\275\242\347\212\266 1 \346\213\267\350\264\235.png" "b/src/assets/img/leftBtn/\345\275\242\347\212\266 1 \346\213\267\350\264\235.png"
new file mode 100644
index 0000000..04cc1cb
--- /dev/null
+++ "b/src/assets/img/leftBtn/\345\275\242\347\212\266 1 \346\213\267\350\264\235.png"
Binary files differ
diff --git "a/src/assets/img/leftBtn/\345\275\242\347\212\266 1.png" "b/src/assets/img/leftBtn/\345\275\242\347\212\266 1.png"
new file mode 100644
index 0000000..4857414
--- /dev/null
+++ "b/src/assets/img/leftBtn/\345\275\242\347\212\266 1.png"
Binary files differ
diff --git "a/src/assets/img/leftBtn/\345\275\242\347\212\266 2 \346\213\267\350\264\235.png" "b/src/assets/img/leftBtn/\345\275\242\347\212\266 2 \346\213\267\350\264\235.png"
new file mode 100644
index 0000000..1bf1893
--- /dev/null
+++ "b/src/assets/img/leftBtn/\345\275\242\347\212\266 2 \346\213\267\350\264\235.png"
Binary files differ
diff --git "a/src/assets/img/leftBtn/\345\275\242\347\212\266 2.png" "b/src/assets/img/leftBtn/\345\275\242\347\212\266 2.png"
new file mode 100644
index 0000000..f5187cc
--- /dev/null
+++ "b/src/assets/img/leftBtn/\345\275\242\347\212\266 2.png"
Binary files differ
diff --git "a/src/assets/img/leftBtn/\345\275\242\347\212\266 3 \346\213\267\350\264\235.png" "b/src/assets/img/leftBtn/\345\275\242\347\212\266 3 \346\213\267\350\264\235.png"
new file mode 100644
index 0000000..62139d8
--- /dev/null
+++ "b/src/assets/img/leftBtn/\345\275\242\347\212\266 3 \346\213\267\350\264\235.png"
Binary files differ
diff --git "a/src/assets/img/leftBtn/\345\275\242\347\212\266 3.png" "b/src/assets/img/leftBtn/\345\275\242\347\212\266 3.png"
new file mode 100644
index 0000000..bd9d2ca
--- /dev/null
+++ "b/src/assets/img/leftBtn/\345\275\242\347\212\266 3.png"
Binary files differ
diff --git "a/src/assets/img/leftBtn/\345\275\242\347\212\266 4 \346\213\267\350\264\235.png" "b/src/assets/img/leftBtn/\345\275\242\347\212\266 4 \346\213\267\350\264\235.png"
new file mode 100644
index 0000000..dfea25a
--- /dev/null
+++ "b/src/assets/img/leftBtn/\345\275\242\347\212\266 4 \346\213\267\350\264\235.png"
Binary files differ
diff --git "a/src/assets/img/leftBtn/\345\275\242\347\212\266 4.png" "b/src/assets/img/leftBtn/\345\275\242\347\212\266 4.png"
new file mode 100644
index 0000000..01395b9
--- /dev/null
+++ "b/src/assets/img/leftBtn/\345\275\242\347\212\266 4.png"
Binary files differ
diff --git "a/src/assets/img/leftBtn/\345\275\242\347\212\266 8 \346\213\267\350\264\235.png" "b/src/assets/img/leftBtn/\345\275\242\347\212\266 8 \346\213\267\350\264\235.png"
new file mode 100644
index 0000000..699d2df
--- /dev/null
+++ "b/src/assets/img/leftBtn/\345\275\242\347\212\266 8 \346\213\267\350\264\235.png"
Binary files differ
diff --git "a/src/assets/img/leftBtn/\345\275\242\347\212\266 8.png" "b/src/assets/img/leftBtn/\345\275\242\347\212\266 8.png"
new file mode 100644
index 0000000..9ed8715
--- /dev/null
+++ "b/src/assets/img/leftBtn/\345\275\242\347\212\266 8.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\345\220\221\344\270\2121.png" "b/src/assets/img/topBtn/\345\220\221\344\270\2121.png"
new file mode 100644
index 0000000..70f3510
--- /dev/null
+++ "b/src/assets/img/topBtn/\345\220\221\344\270\2121.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\345\233\276\345\261\202 14 \346\213\267\350\264\235 3.png" "b/src/assets/img/topBtn/\345\233\276\345\261\202 14 \346\213\267\350\264\235 3.png"
new file mode 100644
index 0000000..348a4b4
--- /dev/null
+++ "b/src/assets/img/topBtn/\345\233\276\345\261\202 14 \346\213\267\350\264\235 3.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\345\233\276\345\261\202 31 \346\213\267\350\264\235.png" "b/src/assets/img/topBtn/\345\233\276\345\261\202 31 \346\213\267\350\264\235.png"
new file mode 100644
index 0000000..8d3ca73
--- /dev/null
+++ "b/src/assets/img/topBtn/\345\233\276\345\261\202 31 \346\213\267\350\264\235.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\345\233\276\345\261\202 31.png" "b/src/assets/img/topBtn/\345\233\276\345\261\202 31.png"
new file mode 100644
index 0000000..9347889
--- /dev/null
+++ "b/src/assets/img/topBtn/\345\233\276\345\261\202 31.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\345\233\276\345\261\202 5 \346\213\267\350\264\235 6.png" "b/src/assets/img/topBtn/\345\233\276\345\261\202 5 \346\213\267\350\264\235 6.png"
new file mode 100644
index 0000000..d9e8f58
--- /dev/null
+++ "b/src/assets/img/topBtn/\345\233\276\345\261\202 5 \346\213\267\350\264\235 6.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\345\233\276\345\261\202 7 \346\213\267\350\264\235 5.png" "b/src/assets/img/topBtn/\345\233\276\345\261\202 7 \346\213\267\350\264\235 5.png"
new file mode 100644
index 0000000..5d363bb
--- /dev/null
+++ "b/src/assets/img/topBtn/\345\233\276\345\261\202 7 \346\213\267\350\264\235 5.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\345\233\276\345\261\202 8 \346\213\267\350\264\235 2.png" "b/src/assets/img/topBtn/\345\233\276\345\261\202 8 \346\213\267\350\264\235 2.png"
new file mode 100644
index 0000000..1d954f3
--- /dev/null
+++ "b/src/assets/img/topBtn/\345\233\276\345\261\202 8 \346\213\267\350\264\235 2.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\345\233\276\345\261\202 8.png" "b/src/assets/img/topBtn/\345\233\276\345\261\202 8.png"
new file mode 100644
index 0000000..467b736
--- /dev/null
+++ "b/src/assets/img/topBtn/\345\233\276\345\261\202 8.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\345\233\276\346\240\207bj.png" "b/src/assets/img/topBtn/\345\233\276\346\240\207bj.png"
new file mode 100644
index 0000000..af07ce2
--- /dev/null
+++ "b/src/assets/img/topBtn/\345\233\276\346\240\207bj.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\345\234\206\350\247\222\347\237\251\345\275\242 12 \346\213\267\350\264\235 5.png" "b/src/assets/img/topBtn/\345\234\206\350\247\222\347\237\251\345\275\242 12 \346\213\267\350\264\235 5.png"
new file mode 100644
index 0000000..1c6e57c
--- /dev/null
+++ "b/src/assets/img/topBtn/\345\234\206\350\247\222\347\237\251\345\275\242 12 \346\213\267\350\264\235 5.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\345\234\206\350\247\222\347\237\251\345\275\242 12 \346\213\267\350\264\235 6.png" "b/src/assets/img/topBtn/\345\234\206\350\247\222\347\237\251\345\275\242 12 \346\213\267\350\264\235 6.png"
new file mode 100644
index 0000000..f7f4659
--- /dev/null
+++ "b/src/assets/img/topBtn/\345\234\206\350\247\222\347\237\251\345\275\242 12 \346\213\267\350\264\235 6.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\345\275\242\347\212\266 3.png" "b/src/assets/img/topBtn/\345\275\242\347\212\266 3.png"
new file mode 100644
index 0000000..7bba23a
--- /dev/null
+++ "b/src/assets/img/topBtn/\345\275\242\347\212\266 3.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\345\275\242\347\212\266 5.png" "b/src/assets/img/topBtn/\345\275\242\347\212\266 5.png"
new file mode 100644
index 0000000..b6bae58
--- /dev/null
+++ "b/src/assets/img/topBtn/\345\275\242\347\212\266 5.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\346\226\207\345\255\227\346\240\207\346\263\250.png" "b/src/assets/img/topBtn/\346\226\207\345\255\227\346\240\207\346\263\250.png"
new file mode 100644
index 0000000..544ddf2
--- /dev/null
+++ "b/src/assets/img/topBtn/\346\226\207\345\255\227\346\240\207\346\263\250.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\346\244\255\345\234\206 3 \346\213\267\350\264\235 16.png" "b/src/assets/img/topBtn/\346\244\255\345\234\206 3 \346\213\267\350\264\235 16.png"
new file mode 100644
index 0000000..31a0d1f
--- /dev/null
+++ "b/src/assets/img/topBtn/\346\244\255\345\234\206 3 \346\213\267\350\264\235 16.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\346\244\255\345\234\206 3 \346\213\267\350\264\235 20.png" "b/src/assets/img/topBtn/\346\244\255\345\234\206 3 \346\213\267\350\264\235 20.png"
new file mode 100644
index 0000000..8197273
--- /dev/null
+++ "b/src/assets/img/topBtn/\346\244\255\345\234\206 3 \346\213\267\350\264\235 20.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\346\244\255\345\234\206 3 \346\213\267\350\264\235 23.png" "b/src/assets/img/topBtn/\346\244\255\345\234\206 3 \346\213\267\350\264\235 23.png"
new file mode 100644
index 0000000..7e17ecc
--- /dev/null
+++ "b/src/assets/img/topBtn/\346\244\255\345\234\206 3 \346\213\267\350\264\235 23.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\346\244\255\345\234\206 5 \346\213\267\350\264\235 3.png" "b/src/assets/img/topBtn/\346\244\255\345\234\206 5 \346\213\267\350\264\235 3.png"
new file mode 100644
index 0000000..dce616f
--- /dev/null
+++ "b/src/assets/img/topBtn/\346\244\255\345\234\206 5 \346\213\267\350\264\235 3.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\346\244\255\345\234\206 6.png" "b/src/assets/img/topBtn/\346\244\255\345\234\206 6.png"
new file mode 100644
index 0000000..38d56ea
--- /dev/null
+++ "b/src/assets/img/topBtn/\346\244\255\345\234\206 6.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\346\244\255\345\234\206 7 \346\213\267\350\264\235 2.png" "b/src/assets/img/topBtn/\346\244\255\345\234\206 7 \346\213\267\350\264\235 2.png"
new file mode 100644
index 0000000..53ce48d
--- /dev/null
+++ "b/src/assets/img/topBtn/\346\244\255\345\234\206 7 \346\213\267\350\264\235 2.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\346\244\255\345\234\206 8 \346\213\267\350\264\235 8.png" "b/src/assets/img/topBtn/\346\244\255\345\234\206 8 \346\213\267\350\264\235 8.png"
new file mode 100644
index 0000000..ef3e416
--- /dev/null
+++ "b/src/assets/img/topBtn/\346\244\255\345\234\206 8 \346\213\267\350\264\235 8.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\346\270\205\351\231\244.png" "b/src/assets/img/topBtn/\346\270\205\351\231\244.png"
new file mode 100644
index 0000000..65d8de6
--- /dev/null
+++ "b/src/assets/img/topBtn/\346\270\205\351\231\244.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\347\237\242\351\207\217\346\231\272\350\203\275\345\257\271\350\261\241 \346\213\267\350\264\235 3.png" "b/src/assets/img/topBtn/\347\237\242\351\207\217\346\231\272\350\203\275\345\257\271\350\261\241 \346\213\267\350\264\235 3.png"
new file mode 100644
index 0000000..76df68b
--- /dev/null
+++ "b/src/assets/img/topBtn/\347\237\242\351\207\217\346\231\272\350\203\275\345\257\271\350\261\241 \346\213\267\350\264\235 3.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\347\237\251\345\275\242 13 \346\213\267\350\264\235.png" "b/src/assets/img/topBtn/\347\237\251\345\275\242 13 \346\213\267\350\264\235.png"
new file mode 100644
index 0000000..0a67611
--- /dev/null
+++ "b/src/assets/img/topBtn/\347\237\251\345\275\242 13 \346\213\267\350\264\235.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\347\237\251\345\275\242 8 \346\213\267\350\264\235 11.png" "b/src/assets/img/topBtn/\347\237\251\345\275\242 8 \346\213\267\350\264\235 11.png"
new file mode 100644
index 0000000..ef957a9
--- /dev/null
+++ "b/src/assets/img/topBtn/\347\237\251\345\275\242 8 \346\213\267\350\264\235 11.png"
Binary files differ
diff --git "a/src/assets/img/topBtn/\351\253\230\347\250\213\346\265\213\351\207\217.png" "b/src/assets/img/topBtn/\351\253\230\347\250\213\346\265\213\351\207\217.png"
new file mode 100644
index 0000000..f770a7c
--- /dev/null
+++ "b/src/assets/img/topBtn/\351\253\230\347\250\213\346\265\213\351\207\217.png"
Binary files differ
diff --git "a/src/assets/img/\347\237\251\345\275\242 1.png" "b/src/assets/img/\347\237\251\345\275\242 1.png"
new file mode 100644
index 0000000..e34079a
--- /dev/null
+++ "b/src/assets/img/\347\237\251\345\275\242 1.png"
Binary files differ
diff --git a/src/assets/js/Map/menuData.js b/src/assets/js/Map/menuData.js
index 636ca07..89236d3 100644
--- a/src/assets/js/Map/menuData.js
+++ b/src/assets/js/Map/menuData.js
@@ -3,199 +3,184 @@
{
id: 'a1',
name: "婕父",
- class: 'twoMenu_imge21',
+ imgUrl: '鍥惧眰 8 鎷疯礉 2.png',
+ level: 1,
children: [
{
id: 'a2',
name: "鐐规极娓�",
- class: 'twoMenu_imge21',
+ imgUrl: '妞渾 6.png',
+ level: 2,
},
{
id: 'a3',
name: "绾胯矾婕父",
- class: 'twoMenu_imge21',
+ imgUrl: '妞渾 7 鎷疯礉 2.png',
+ level: 2,
}
],
},
{
id: 'b1',
- name: "娴嬮噺",
- class: 'twoMenu_imge21',
+ name: "閲忔祴",
+ imgUrl: '鍥惧眰 5 鎷疯礉 6.png',
+ level: 1,
children: [
{
id: 'b2',
name: "琛ㄩ潰璺濈",
- class: 'twoMenu_imge21',
+ imgUrl: '鍥惧眰 31.png',
+ level: 2,
},
{
id: 'b3',
name: "骞抽潰闈㈢Н",
- class: 'twoMenu_imge21',
+ imgUrl: '鐭╁舰 13 鎷疯礉.png',
+ level: 2,
}, {
id: 'b4',
name: "楂樼▼娴嬮噺",
- class: 'twoMenu_imge21',
+ imgUrl: '楂樼▼娴嬮噺.png',
+ level: 2,
},
{
id: 'b5',
name: "鍨傜洿楂樺害",
- class: 'twoMenu_imge21',
+ imgUrl: '鍥惧眰 31 鎷疯礉.png',
+ level: 2,
}
],
},
{
id: 'c1',
name: "鏍囩粯",
- class: 'twoMenu_imge21',
+ imgUrl: '鐭╁舰 8 鎷疯礉 11.png',
+ level: 1,
children: [{
id: 'c2',
name: "鐐�",
- class: 'twoMenu_imge21',
+ imgUrl: '妞渾 5 鎷疯礉 3.png',
+ level: 2,
},
{
id: 'c3',
name: "鏂囧瓧",
- class: 'twoMenu_imge21',
+ imgUrl: '鏂囧瓧鏍囨敞.png',
+ level: 2,
}, {
id: 'c4',
name: "绾�",
- class: 'twoMenu_imge21',
+ imgUrl: '妞渾 3 鎷疯礉 16.png',
+ level: 2,
},
{
id: 'c5',
name: "鐭╁舰",
- class: 'twoMenu_imge21',
+ imgUrl: '妞渾 3 鎷疯礉 20.png',
+ level: 2,
}, {
id: 'c6',
name: "澶氳竟褰�",
- class: 'twoMenu_imge21',
+ imgUrl: '妞渾 3 鎷疯礉 23.png',
+ level: 2,
}],
},
{
id: 'd1',
name: "鍒嗘瀽",
- class: 'twoMenu_imge21',
+ imgUrl: '鐭㈤噺鏅鸿兘瀵硅薄 鎷疯礉 3.png',
+ level: 1,
children: [{
id: 'd2',
name: "绛夐珮绾垮垎鏋�",
- class: 'twoMenu_imge21',
+ imgUrl: '妞渾 8 鎷疯礉 8.png',
+ level: 2,
},
{
id: 'd3',
name: "鍧″害鍒嗘瀽",
- class: 'twoMenu_imge21',
+ imgUrl: '鍦嗚鐭╁舰 12 鎷疯礉 5.png',
+ level: 2,
}, {
id: 'd4',
name: "鍦熸柟閲忚绠�",
- class: 'twoMenu_imge21',
+ imgUrl: '鍥惧眰 14 鎷疯礉 3.png',
+ level: 2,
},
{
id: 'd5',
name: "褰卞儚瀵规瘮",
- class: 'twoMenu_imge21',
+ imgUrl: '鍦嗚鐭╁舰 12 鎷疯礉 6.png',
+
+ level: 2,
}, {
id: 'd6',
name: "闃村奖鍒嗘瀽",
- class: 'twoMenu_imge21',
+ imgUrl: '鍥惧眰 8.png',
+ level: 2,
}],
},
{
id: 'e1',
- class: 'twoMenu_imge21',
- name: "鎴浘",
+ imgUrl: '褰㈢姸 5.png',
+ name: "蹇収",
+ level: 1,
},
{
id: 'f1',
- name: "鏌ヨ",
- class: 'twoMenu_imge21',
+ name: "绌洪棿鏌ヨ",
+ imgUrl: '褰㈢姸 3.png',
+ level: 1,
children: [],
},
{
id: 'g1',
- class: 'twoMenu_imge21',
- name: "瀹氫綅",
+ imgUrl: '鍥惧眰 7 鎷疯礉 5.png',
+ name: "鍧愭爣瀹氫綅",
+ level: 1,
},
{
id: 'k1',
- class: 'twoMenu_imge21',
+ imgUrl: '娓呴櫎.png',
+ level: 1,
name: "娓呴櫎",
},
],
- toolMenu: null,
- toolFlag: null,
- colorAll: {
-
- },
- menuTools(res) {
- this.clearTools();
- this.toolFlag = res.id;
- switch (res.id) {
- case 'a2'://鐐规极娓�
- this.pointRoam();
- break;
- case 'a3'://绾挎极娓�
- this.lineRoam();
- break;
- case 'b2'://琛ㄩ潰璺濈
- this.surfaceDistance();
- break;
- case 'b3'://骞抽潰闈㈢Н
- this.planeDistance();
- break;
- case 'b4'://楂樼▼娴嬮噺
- this.heightMeasure();
- break;
- case 'b5'://鍨傜洿楂樺害
- this.verticalHeight();
- break;
+ leftMenu: [
+ {
+ id: 'l1',
+ name: '鍥惧眰绠＄悊',
+ imgUrl: '鍥惧眰1 (1).png',
+ checkImgUrl: '鍥惧眰1 (1) 鎷疯礉.png'
+ },
+ {
+ id: 'l2',
+ name: '鏍囩粯鏌ヨ',
+ imgUrl: '褰㈢姸 4.png',
+ checkImgUrl: '褰㈢姸 4 鎷疯礉.png'
+ }, {
+ id: 'l3',
+ name: '涓撻鍥惧埗浣�',
+ imgUrl: '褰㈢姸 2.png',
+ checkImgUrl: '褰㈢姸 2 鎷疯礉.png'
+ }, {
+ id: 'l4',
+ name: '宸ュ叿绠�',
+ imgUrl: '褰㈢姸 1.png',
+ checkImgUrl: '褰㈢姸 1 鎷疯礉.png'
+ }, {
+ id: 'l5',
+ name: '鍏ㄥ睆',
+ imgUrl: '褰㈢姸 8.png',
+ checkImgUrl: '褰㈢姸 8 鎷疯礉.png'
+ }, {
+ id: 'l6',
+ name: '搴曞浘鍒囨崲',
+ imgUrl: '褰㈢姸 3.png',
+ checkImgUrl: '褰㈢姸 3 鎷疯礉.png'
}
- },
- //娓呴櫎鏂规硶
- clearTools() {
- if (this.toolFlag) {
- switch (this.toolFlag) {
- case 'a2':
-
- break;
- case 'a3':
-
- break;
- case 'b2':
- case 'b3':
- case 'b4':
- case 'b5':
-
- break;
- }
- this.toolFlag = null;
- this.toolMenu = null;
- }
- },
-
- //鍨傜洿楂樺害
- verticalHeight() {
-
- },
- //楂樼▼娴嬮噺
- heightMeasure() {
-
- },
- //骞抽潰闈㈢Н
- planeDistance() {
-
- },
- //琛ㄩ潰璺濈
- surfaceDistance() {
-
- },
- //鐐规极娓�
- pointRoam() {
-
- },
- //绾挎极娓�
- lineRoam() {
+ ]
- }
}
export default menuData;
\ No newline at end of file
diff --git a/src/assets/js/Map/menuTool.js b/src/assets/js/Map/menuTool.js
new file mode 100644
index 0000000..e7ae2df
--- /dev/null
+++ b/src/assets/js/Map/menuTool.js
@@ -0,0 +1,80 @@
+const menuTool = {
+ toolMenu: null,
+ toolFlag: null,
+ colorAll: {
+ },
+ menuTools(res) {
+ this.clearTools();
+ this.toolFlag = res.id;
+ switch (res.id) {
+ case 'a2'://鐐规极娓�
+ this.pointRoam();
+ break;
+ case 'a3'://绾挎极娓�
+ this.lineRoam();
+ break;
+ case 'b2'://琛ㄩ潰璺濈
+ this.surfaceDistance();
+ break;
+ case 'b3'://骞抽潰闈㈢Н
+ this.planeDistance();
+ break;
+ case 'b4'://楂樼▼娴嬮噺
+ this.heightMeasure();
+ break;
+ case 'b5'://鍨傜洿楂樺害
+ this.verticalHeight();
+ break;
+ }
+ },
+ //鍨傜洿楂樺害
+ verticalHeight() {
+
+ },
+ //楂樼▼娴嬮噺
+ heightMeasure() {
+
+ },
+ //骞抽潰闈㈢Н
+ planeDistance() {
+
+ },
+ //琛ㄩ潰璺濈
+ surfaceDistance() {
+
+ },
+ //鐐规极娓�
+ pointRoam() {
+
+ },
+ //绾挎极娓�
+ lineRoam() {
+
+
+ },
+
+ //娓呴櫎鏂规硶
+ clearTools() {
+ if (this.toolFlag) {
+ switch (this.toolFlag) {
+ case 'a2':
+
+ break;
+ case 'a3':
+
+ break;
+ case 'b2':
+ case 'b3':
+ case 'b4':
+ case 'b5':
+
+ break;
+ }
+ this.toolFlag = null;
+ this.toolMenu = null;
+ }
+ },
+
+
+}
+export default menuTool;
\ No newline at end of file
diff --git a/src/components/menus.vue b/src/components/menus.vue
index 00667d0..fb946b4 100644
--- a/src/components/menus.vue
+++ b/src/components/menus.vue
@@ -7,7 +7,7 @@
class="logo"
/>
<div class="logo_name">
- <h3>鏁板瓧鏈堢悆绯荤粺</h3>
+ <h3>鏈堢悆澶ф暟鎹湴鐞嗙┖闂村垎鏋愬睍绀哄钩鍙�</h3>
<img
src="../assets/img/logob.png"
alt=""
@@ -16,52 +16,27 @@
</div>
</div>
<div class="menus_box">
- <div class="menus_btn">
- <div
- class="menus_btn_btn1"
- :class="{ CDactive: btnstate.CDbj }"
- @click="isactive('CDbj')"
- ></div>
- <div
- class="menus_btn_btn2"
- :class="{ SSactive: btnstate.SSbj }"
- @click="isactive('SSbj')"
- ></div>
- <div
- class="menus_btn_btn3"
- :class="{ SZactive: btnstate.SZbj }"
- @click="isactive('SZbj')"
- ></div>
- <div
- class="menus_btn_btn4"
- :class="{ TCactive: btnstate.TCbj }"
- @click="isactive('TCbj')"
- ></div>
- </div>
- <div class="menus_content">
- <div class="menus_content_TC">
- <div class="menus_content_TC_h">
- <i></i>
- <h3>鏁板瓧鏈堢悆绯荤粺</h3>
- </div>
- <div class="menus_content_TC_c">
- <el-tree
- :data="data"
- show-checkbox
- node-key="id"
- :default-expanded-keys="[2, 3]"
- :default-checked-keys="[5]"
- :props="defaultProps"
- />
- </div>
- </div>
+ <div
+ class="imgBox"
+ v-for="(item,i) in menuOptions"
+ @click="setMenuClick(item)"
+ >
+ <img
+ v-if="checkMenuFlag != item.id"
+ class="imgIcon"
+ :src="require('../assets/img/leftBtn/'+item.imgUrl)"
+ >
+ <img
+ v-if="checkMenuFlag == item.id"
+ class="imgIcon"
+ :src="require('../assets/img/leftBtn/'+item.checkImgUrl)"
+ >
</div>
</div>
</div>
</template>
<script lang="ts" setup>
-// import { layerList } from "@/api/api";
import {
ref,
onMounted,
@@ -70,203 +45,67 @@
defineProps,
defineEmits,
} from "vue";
-const defaultProps = {
- children: "children",
- label: "label",
-};
-const data = [
- {
- id: 1,
- label: "Level one 1",
- children: [
- {
- id: 4,
- label: "Level two 1-1",
- },
- ],
- },
- {
- id: 2,
- label: "Level one 2",
- children: [
- {
- id: 5,
- label: "Level two 2-1",
- },
- {
- id: 6,
- label: "Level two 2-2",
- },
- ],
- },
- {
- id: 3,
- label: "Level one 3",
- children: [
- {
- id: 7,
- label: "Level two 3-1",
- },
- {
- id: 8,
- label: "Level two 3-2",
- },
- ],
- },
-];
-let btnstate = reactive({
- CDbj: false,
- SSbj: false,
- SZbj: false,
- TCbj: false,
-});
-const isactive = (e: string) => {
- for (const k in btnstate) {
- btnstate[k] = false;
- if (k == e) {
- btnstate[k] = true;
- }
+import menuData from "@/assets/js/Map/menuData";
+const menuOptions = ref([]);
+const checkMenuFlag = ref("");
+const setMenuClick = (res) => {
+ if (checkMenuFlag.value && checkMenuFlag.value == res.id) {
+ checkMenuFlag.value = null;
+ } else {
+ checkMenuFlag.value = res.id;
}
};
-const getList = async () => {
- // const data = await layerList();
- console.log(data);
-};
-getList();
+onMounted(() => {
+ menuOptions.value = menuData.leftMenu;
+});
</script>
<style lang="less" scoped>
.menus {
- // height: ;
position: absolute;
- top: 23px;
- left: 10px;
-}
-.logo_box {
- display: flex;
- align-items: center;
- // justify-content: space-between;
- padding-left: 6px;
- margin-bottom: 14px;
- .logo {
- width: 68px;
- height: 68px;
- }
- .logo_name {
- margin-left: 18px;
- h3 {
- font-size: 36px;
- font-weight: 400;
- color: #ffffff;
- margin: 0;
- }
- .logo_name_b {
- text-align: center;
- width: 208px;
- height: 9px;
- }
- }
-}
-.menus_box {
- height: 70vh;
- display: flex;
- .menus_btn {
- height: 100%;
- width: 72px;
- padding-top: 60px;
- box-sizing: border-box;
- background: url("../assets/img/menusbtnb.png") no-repeat center;
- background-size: 100% 100%;
+ top: 27px;
+ left: 14px;
+ .logo_box {
display: flex;
- flex-direction: column;
align-items: center;
- // justify-content: space-evenly;
- margin-right: 6px;
- .menus_btn_btn1 {
- width: 32px;
- height: 32px;
- background: url("../assets/img/cd.png") no-repeat center;
- background-size: 100% 100%;
- margin-bottom: 50px;
- cursor: pointer;
+ .logo {
+ width: 68px;
+ height: 68px;
}
- .menus_btn_btn2 {
- width: 32px;
- height: 32px;
- background: url("../assets/img/ss.png") no-repeat center;
- background-size: 100% 100%;
- margin-bottom: 50px;
- cursor: pointer;
- }
- .menus_btn_btn3 {
- width: 32px;
- height: 32px;
- background: url("../assets/img/sz.png") no-repeat center;
- background-size: 100% 100%;
- margin-bottom: 50px;
- cursor: pointer;
- }
- .menus_btn_btn4 {
- width: 32px;
- height: 32px;
- background: url("../assets/img/tc.png") no-repeat center;
- background-size: 100% 100%;
- cursor: pointer;
- }
- .CDactive {
- background: url("../assets/img/cdl.png") no-repeat center;
- background-size: 100% 100%;
- }
- .SSactive {
- background: url("../assets/img/ssl.png") no-repeat center;
- background-size: 100% 100%;
- }
- .SZactive {
- background: url("../assets/img/szl.png") no-repeat center;
- background-size: 100% 100%;
- }
- .TCactive {
- background: url("../assets/img/tcl.png") no-repeat center;
- background-size: 100% 100%;
- }
- }
- .menus_content {
- height: 100%;
- }
- .menus_content_TC {
- width: 359px;
- height: 100%;
- .menus_content_TC_h {
- padding: 12px;
- background: #171e2e;
- box-shadow: 0px 10px 10px 0px #262f47,
- 0px 20px 20px 0px rgba(8, 12, 19, 0.3);
- display: flex;
- align-items: center;
+ .logo_name {
+ margin-left: 14px;
- i {
- display: inline-block;
- width: 11px;
- height: 18px;
- background: url("../assets/img/jiantouZ.png") no-repeat center;
- background-size: 100% 100%;
- cursor: pointer;
- margin-right: 10px;
- }
h3 {
- font-size: 18px;
+ font-size: 36px;
+ font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
- font-family: Source Han Sans CN;
+ line-height: 9px;
+ }
+ .logo_name_b {
+ text-align: center;
+ width: 100%;
+ height: 9px;
}
}
- .menus_content_TC_c {
- }
}
-}
-.el-tree {
- background: transparent;
- /deep/ .el-tree-node__label {
- color: #ffffff;
+ .menus_box {
+ background: url("../assets/img/鐭╁舰 1.png");
+ left: 7px;
+ position: absolute;
+ top: 105px;
+ width: 71px;
+ height: 628px;
+ padding: 36px 0px;
+ .imgBox {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ margin-bottom: 52px;
+ img {
+ width: 30px;
+ height: 30px;
+ }
+ }
}
}
</style>
diff --git a/src/components/topBtn.vue b/src/components/topBtn.vue
index acaa101..f4dc141 100644
--- a/src/components/topBtn.vue
+++ b/src/components/topBtn.vue
@@ -1,52 +1,49 @@
<template>
<div class="top_btn">
- <div>
- <ul>
- <li
- class="firstMenu"
- v-for="(item,i) in menuOptions"
- @mousemove="setFirstLevlMenu(item,1)"
- @mouseleave="setFirstLevlMenu(item,2)"
- >
- <div
- class="menuDiv"
- :title="item.name"
- :class="{ 'border_left' : i == 0, 'border_right' :i == (menuOptions.length -1)}"
- @click="setMenuClick(item)"
+ <div class="menu_Box">
+ <div
+ class="first_Menu"
+ :title="item.name"
+ v-for="(item,i) in menuOptions"
+ @click="setMenuClick(item)"
+ >
+ <div class="First_img">
+ <img
+ class="imgIcon"
+ :src="require('../assets/img/topBtn/'+item.imgUrl)"
>
+ </div>
+ <div
+ class="menu_second"
+ v-if="item.children && item.children.length > 0"
+ v-show="menuFlag == item.id"
+ >
+ <div class="upTop">
+ <div class="upimg"></div>
+ </div>
+ <div class="second_Box">
<div
- class="menuFirstImage"
- :class="item.class"
+ class="second_Menu"
+ :title="res.name"
+ v-for="(res,j) in item.children"
+ @click="setMenuClick(res)"
+ :class="{'second_Menu_click':checkFlag == res.id}"
>
+ <img
+ class="imgIcon"
+ style="margin-bottom: 5px;"
+ :src="require('../assets/img/topBtn/'+res.imgUrl)"
+ >
+ <div>
+ {{ res.name }}
+ </div>
+
</div>
</div>
- <ul
- @mouseleave="setFirstLevlMenu(item,2)"
- v-show="item.children &&menuFlag == item.id"
- >
- <li v-for="(res,j) in item.children">
- <div
- class="tmenuDiv"
- :title="res.name"
- @click="setMenuClick(res)"
- >
- <div class="tmenuImg">
- <div
- class="menuFirstImage"
- :class="res.class"
- >
- </div>
- </div>
- <div class="tmenulabel">
- {{ res.name }}
- </div>
- </div>
- </li>
+ </div>
- </ul>
- </li>
- </ul>
+ </div>
</div>
</div>
</template>
@@ -61,21 +58,27 @@
defineEmits,
} from "vue";
import menuData from "@/assets/js/Map/menuData.js";
+import menuTool from "@/assets/js/Map/menuTool.js";
const menuFlag = ref(null);
const menuOptions = ref([]);
-const setFirstLevlMenu = (res, flag) => {
- if (flag == 1) {
- menuFlag.value = res.id;
- } else {
- menuFlag.value = null;
- }
-};
+const checkFlag = ref(null);
const setMenuClick = (res) => {
- if (res.children && res.children.length > 0) {
- return;
+ if (res.children) {
+ if (menuFlag.value && menuFlag.value == res.id) {
+ menuFlag.value = null;
+ checkFlag.value = null;
+ } else {
+ menuFlag.value = res.id;
+ }
+ } else {
+ if (res.level == 1) {
+ checkFlag.value = null;
+ } else if (res.level == 2) {
+ checkFlag.value = res.id;
+ }
+ menuFlag.value = null;
+ menuTool.menuTools(res);
}
- menuFlag.value = null;
- menuData.menuTools(res);
};
onMounted(() => {
menuOptions.value = menuData.topMenu;
@@ -86,68 +89,70 @@
.top_btn {
position: absolute;
top: 23px;
- right: 25px;
+ right: 0px;
display: flex;
cursor: pointer;
+ .menu_Box {
+ margin-right: 104px;
+ display: flex;
+ .imgIcon {
+ width: 30px;
+ height: 30px;
+ }
+ .first_Menu {
+ min-width: 50px;
+ height: 50px;
+ margin-right: 7px;
+ background: url("../assets/img/topBtn/鍥炬爣bj.png") no-repeat;
+ background-size: 100% 100%;
+ .First_img {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+ .upTop {
+ width: 100%;
+ height: 10px;
+ display: flex;
+ justify-content: center;
+ .upimg {
+ width: 15px;
+ height: 100%;
+ background: url("../assets/img/topBtn/鍚戜笂1.png") no-repeat;
+ }
+ }
+ .menu_second {
+ margin-top: 0px;
+ }
+ .second_Box {
+ background: #07080e;
+ box-shadow: inset 0px 0px 15px 0px rgb(38, 47, 71, 0.68);
- .menuDiv {
- width: 72px;
- padding: 20px 0px;
- display: flex;
- justify-content: center;
- align-items: center;
- background: rgba(1, 10, 28, 1);
- border-top: 1px solid gray;
- border-bottom: 1px solid gray;
- }
- .border_left {
- border-radius: 5px 0px 0px 5px;
- border-left: 1px solid gray;
- }
- .border_right {
- border-radius: 0px 5px 5px 0px;
- border-right: 1px solid gray;
- }
- .tmenuDiv {
- width: 70px;
- padding: 10px 0px;
- border-right: 1px solid gray;
- border-left: 1px solid gray;
- border-bottom: 1px solid gray;
- background: rgba(1, 10, 28, 1);
- }
- .tmenuDiv :hover {
- color: #409eff;
- }
- .tmenuImg {
- width: 100%;
+ .second_Menu {
+ background: #07080e;
+ box-shadow: inset 0px 0px 8px 0px rgb(38, 47, 71, 0.68);
+ margin-top: 1px;
+ font-size: 12px;
+ font-family: Source Han Sans CN;
+ padding: 10px 10px;
+ font-weight: 300;
+ color: #d1e0ff;
+ line-height: 7px;
+ text-align: center;
+ border: 1px solid none;
+ }
- display: flex;
- justify-content: center;
- }
- .tmenulabel {
- width: 100%;
-
- display: flex;
- justify-content: center;
- color: #fff;
- font-size: 12px;
- margin-top: 2px;
- }
- .firstMenu {
- float: left;
- }
- .menuScond {
- width: 100%;
- display: flex;
- justify-content: center;
- }
- .menuFirstImage {
- width: 15px;
- height: 15px;
- }
- .twoMenu_imge21 {
- background: url("../assets/img/cd.png") no-repeat 100% 100%;
+ .second_Menu_click {
+ background: #171e2e;
+ border: 1px solid;
+ border-image: linear-gradient(47deg, #397bc9, #77a5cd, #397bc9) 1 1;
+ box-shadow: 0px 0px 6px 0px #080c13,
+ 0px 7px 8px 0px rgba(38, 47, 71, 0.68);
+ }
+ }
}
}
</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index eb854ab..8c72bb5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,11 +9,13 @@
import "./assets/css/global.css";
//鑷�傚簲
import "amfe-flexible/index";
-import Particles from "particles.vue3";
+//绮掑瓙鐗规晥
import VueParticles from "vue-particles";
+import Drag from "./utils/drag";
createApp(App)
.use(ElementPlus)
.use(store)
.use(router)
.use(VueParticles)
+ .use(Drag)
.mount("#app");
diff --git a/src/utils/drag.ts b/src/utils/drag.ts
new file mode 100644
index 0000000..d69a83d
--- /dev/null
+++ b/src/utils/drag.ts
@@ -0,0 +1,46 @@
+const drag = {
+ mounted(el: HTMLElement) {
+ let moveEl = el as HTMLElement;
+ const mouseDown = (e: MouseEvent) => {
+ //榧犳爣鐐瑰嚮鐗╀綋閭ｄ竴鍒荤浉瀵逛簬鐗╀綋宸︿晶杈规鐨勮窛绂�=鐐瑰嚮鏃剁殑浣嶇疆鐩稿浜庢祻瑙堝櫒鏈�宸﹁竟鐨勮窛绂�-鐗╀綋宸﹁竟妗嗙浉瀵逛簬娴忚鍣ㄦ渶宸﹁竟鐨勮窛绂�
+ // console.log(e.clientX, e.clientY, "-----璧峰", el.offsetLeft);
+ let X = e.clientX - el.offsetLeft;
+ let Y = e.clientY - el.offsetTop;
+ const move = (e: MouseEvent) => {
+ // 鑾峰彇鎷栨嫿鍏冪礌鐨勪綅缃�
+ let left = e.clientX - X;
+ let top = e.clientY - Y;
+
+ if (left <= 0) {
+ left = 0;
+ } else if (
+ left >=
+ document.documentElement.clientWidth - el.offsetWidth
+ ) {
+ left = document.documentElement.clientWidth - el.offsetWidth;
+ }
+
+ // if (top <= 0) {
+ // top = 0
+ // } else if (top > document.documentElement.clientHeight - el.offsetHeigh) {
+ // top = document.documentElement.clientHeight - el.offsetHeight
+ // }
+
+ el.style.left = left + "px";
+ el.style.top = top + "px";
+ };
+ document.addEventListener("mousemove", move);
+ document.addEventListener("mouseup", () => {
+ document.removeEventListener("mousemove", move);
+ });
+ };
+ moveEl.addEventListener("mousedown", mouseDown);
+ },
+};
+
+const directives = {
+ install: function (app: any) {
+ app.directive("drag", drag);
+ },
+};
+export default directives;
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 53374a1..d466975 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -7,6 +7,9 @@
<menus></menus>
<bottom-btn></bottom-btn>
<top-btn></top-btn>
+ <layer-manage>
+
+ </layer-manage>
</div>
</template>
@@ -19,11 +22,17 @@
defineProps,
defineEmits,
} from "vue";
-
+//宸︿晶鑿滃崟
import menus from "@/components/menus.vue";
+//搴曢儴鑿滃崟
import bottomBtn from "@/components/bottomBtn.vue";
+//椤堕儴鑿滃崟
import topBtn from "@/components/topBtn.vue";
+//鍥惧眰绠＄悊椤甸潰
+import layerManage from "@/views/layer/layerManage.vue";
+
import InitMap from "@/assets/js/Map/index.js";
+
let map;
var viewer;
const init = () => {
diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue
new file mode 100644
index 0000000..8af9544
--- /dev/null
+++ b/src/views/layer/layerManage.vue
@@ -0,0 +1,37 @@
+<template>
+ <div
+ v-drag
+ class="layerBox"
+ >
+ <div class="layerTitle">
+
+ </div>
+
+ </div>
+</template>
+
+<script lang="ts" setup>
+import {
+ ref,
+ onMounted,
+ onBeforeUnmount,
+ reactive,
+ defineProps,
+ defineEmits,
+} from "vue";
+</script>
+
+<style lang="less" scoped>
+.layerBox {
+ position: absolute;
+ top: 135px;
+ left: 100px;
+ width: 359px;
+ height: 680px;
+ background: rgba(7, 8, 14, 0.8);
+ .layerTitle {
+ width: 100%;
+ height: 42px;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3