From a847f035b36c1005119d7f88d40f41849017ff47 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期一, 03 七月 2023 09:27:59 +0800
Subject: [PATCH] 地图导出菜单添加

---
 src/assets/js/drag.js          |   86 ++++++++++
 package-lock.json              |   96 +++++------
 src/assets/js/Map/menuTool.js  |   16 +
 src/views/export/exportMap.vue |  235 +++++++++++++++++++++++++++++
 src/views/Index.vue            |   21 ++
 5 files changed, 397 insertions(+), 57 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8202489..3143d45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -624,6 +624,11 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "npm:@sxzz/popperjs-es@2.11.7",
+      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
@@ -2393,49 +2398,6 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
-      },
-      "dependencies": {
-        "@vue/vue-loader-v15": {
-          "version": "npm:vue-loader@15.10.1",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
-          "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-          "dev": true,
-          "requires": {
-            "@vue/component-compiler-utils": "^3.1.0",
-            "hash-sum": "^1.0.2",
-            "loader-utils": "^1.1.0",
-            "vue-hot-reload-api": "^2.3.0",
-            "vue-style-loader": "^4.1.0"
-          },
-          "dependencies": {
-            "hash-sum": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-              "dev": true
-            }
-          }
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2627,6 +2589,47 @@
       "version": "3.2.47",
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.47.tgz",
       "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+    },
+    "@vue/vue-loader-v15": {
+      "version": "npm:vue-loader@15.10.1",
+      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
+      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
+      "dev": true,
+      "requires": {
+        "@vue/component-compiler-utils": "^3.1.0",
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.1.0",
+        "vue-hot-reload-api": "^2.3.0",
+        "vue-style-loader": "^4.1.0"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
+      }
     },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
@@ -4183,13 +4186,6 @@
         "lodash-unified": "^1.0.2",
         "memoize-one": "^6.0.0",
         "normalize-wheel-es": "^1.2.0"
-      },
-      "dependencies": {
-        "@popperjs/core": {
-          "version": "npm:@sxzz/popperjs-es@2.11.7",
-          "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
-          "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
-        }
       }
     },
     "emoji-regex": {
diff --git a/src/assets/js/Map/menuTool.js b/src/assets/js/Map/menuTool.js
index 59048c0..018745f 100644
--- a/src/assets/js/Map/menuTool.js
+++ b/src/assets/js/Map/menuTool.js
@@ -100,6 +100,7 @@
   },
   // 鐭╁舰姝f柟褰�
   createRectangle(entity) {
+    this.delRectangle();
     var west = Cesium.Math.toDegrees(
       entity.rectangle._coordinates.getValue().west
     ); // 鏍规嵁寮у害鑾峰彇鍒扮粡搴�
@@ -148,6 +149,11 @@
     this.squareOjb.push(e);
     // earthCtrl.Creator.SimpleGraphic.clear();
     Viewer.entities.remove(entity);
+    debugger
+    window.functionForJs({
+      type: 'exportMap',
+      value: true
+    })
   },
   // 鍒涘缓鍥惧舰
   createSimpleGraphic(type, scene) {
@@ -166,7 +172,7 @@
   },
 
   //鍧愭爣瀹氫綅
-  Coordposition() {},
+  Coordposition() { },
   //褰卞儚瀵规瘮
   CurtainContrast() {
     this.toolMenu = earthCtrl.analysis.createCurtainContrast({
@@ -181,7 +187,7 @@
   },
   //鍨傜洿楂樺害
   verticalHeight() {
-    earthCtrl.measure.measureHeight(function (e) {});
+    earthCtrl.measure.measureHeight(function (e) { });
   },
   //楂樼▼娴嬮噺
   heightMeasure() {
@@ -190,11 +196,11 @@
       polyline: Cesium.Color.fromCssColorString("#ffff0050"),
       polygon: Cesium.Color.fromCssColorString("#ffff0050"),
     };
-    earthCtrl.Analysis.altitude(colorAll, () => {});
+    earthCtrl.Analysis.altitude(colorAll, () => { });
   },
   //骞抽潰闈㈢Н
   planeDistance() {
-    earthCtrl.analysis.getPlaneArea(function (e) {});
+    earthCtrl.analysis.getPlaneArea(function (e) { });
   },
   //琛ㄩ潰璺濈
   surfaceDistance() {
@@ -278,6 +284,6 @@
       this.toolMenu = null;
     }
   },
-  clearLeftTools(res) {},
+  clearLeftTools(res) { },
 };
 export default menuTool;
diff --git a/src/assets/js/drag.js b/src/assets/js/drag.js
new file mode 100644
index 0000000..6d0b4d3
--- /dev/null
+++ b/src/assets/js/drag.js
@@ -0,0 +1,86 @@
+// 鎷栨嫿鐨勬寚浠�
+const drag = {
+    beforeMount(el: any, binding: any) {
+        // 鑷畾涔夊睘鎬э紝鍒ゆ柇鏄惁鍙嫋鎷�
+        if (!binding.value) return
+        const dragDom = el.querySelector('.drag_content')
+        const dialogHeaderEl = el.querySelector('.drag_header')
+        dialogHeaderEl.style.cssText += ';cursor:move;'
+
+        // 鑾峰彇鍘熸湁灞炴�� ie dom鍏冪礌.currentStyle 鐏嫄璋锋瓕 window.getComputedStyle(dom鍏冪礌, null);
+        const sty = (function () {
+            if ((document.body as any).currentStyle) {
+                // 鍦╥e涓嬪吋瀹瑰啓娉�
+                return (dom: any, attr: any) => dom.currentStyle[attr]
+            }
+            return (dom: any, attr: any) => getComputedStyle(dom, null)[attr]
+        })()
+
+        dialogHeaderEl.onmousedown = (e: any) => {
+            // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
+            const disX = e.clientX - dialogHeaderEl.offsetLeft
+            const disY = e.clientY - dialogHeaderEl.offsetTop
+            const screenWidth = document.body.clientWidth // body褰撳墠瀹藉害
+            const screenHeight = document.documentElement.clientHeight // 鍙鍖哄煙楂樺害(搴斾负body楂樺害锛屽彲鏌愪簺鐜涓嬫棤娉曡幏鍙�)
+
+            const dragDomWidth = dragDom.offsetWidth // 绉诲姩鍐呭瀹藉害 - 蹇呴』璁剧疆
+            const dragDomheight = dragDom.offsetHeight // 绉诲姩鍐呭楂樺害 - 蹇呴』璁剧疆
+
+            const minDragDomLeft = dragDom.offsetLeft // 绂诲乏渚ф渶灏忚窛绂�
+            const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth // 绂诲乏渚ф渶澶ц窛绂�
+
+            const minDragDomTop = dragDom.offsetTop // 绂婚《閮ㄦ渶灏忚窛绂�
+            const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight // 绂婚《閮ㄦ渶澶ц窛绂�
+
+            // 鑾峰彇鍒扮殑鍊煎甫px 姝e垯鍖归厤鏇挎崲
+            let styL = sty(dragDom, 'left')
+            // 涓哄吋瀹筰e
+            if (styL === 'auto') styL = '0px'
+            let styT = sty(dragDom, 'top')
+
+            // console.log(styL)
+            // 娉ㄦ剰鍦╥e涓� 绗竴娆¤幏鍙栧埌鐨勫�间负缁勪欢鑷甫50% 绉诲姩涔嬪悗璧嬪�间负px
+            if (styL.includes('%')) {
+                styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)
+                styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100)
+            } else {
+                styL = +styL.replace(/px/g, '')
+                styT = +styT.replace(/px/g, '')
+            }
+
+            document.onmousemove = function (e) {
+                // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈
+                let left = e.clientX - disX
+                let top = e.clientY - disY
+                // 杈圭晫澶勭悊
+                if (-(left) > minDragDomLeft) {
+                    left = -(minDragDomLeft)
+                } else if (left > maxDragDomLeft) {
+                    left = maxDragDomLeft
+                }
+
+                if (-(top) > minDragDomTop) {
+                    top = -(minDragDomTop)
+                } else if (top > maxDragDomTop) {
+                    top = maxDragDomTop
+                }
+
+                // 绉诲姩褰撳墠鍏冪礌
+                dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+            }
+
+            document.onmouseup = function (e: any) {
+                document.onmousemove = null
+                document.onmouseup = null
+            }
+            return false
+        }
+    }
+}
+// 鎸傝浇锛屾敞鍐�
+const directives = {
+    install: function (app: any) {
+        app.directive('dialogDrag', drag)
+    }
+};
+export default directives;
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 218394c..79abcff 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -4,7 +4,10 @@
       id="cesiumContainer"
       style="width: 100%; height: 100%; position: absolute"
     ></div>
-
+    <export-map
+      v-if="layerExportshow"
+      @SETexportMap="SETexportMap"
+    ></export-map>
     <menus></menus>
     <bottom-btn></bottom-btn>
   </div>
@@ -23,21 +26,35 @@
 import menus from "@/views/menus.vue";
 //搴曢儴鑿滃崟
 import bottomBtn from "@/components/bottomBtn.vue";
-
+import exportMap from "./export/exportMap.vue";
 import InitMap from "@/assets/js/Map/index.js";
 // import * as SmartEarth from "../../public/CIMSDK/index.js";
 // import * as SmartEarth from "../assets/js/CIMSDK/index.js";
 let map;
 var viewer;
+const layerExportshow = ref(false);
 const init = () => {
   viewer = InitMap.Viewer;
   map = InitMap.sgworld;
 };
+//鍏抽棴鐘舵��
+const SETexportMap = (res) => {
+  layerExportshow.value = res;
+};
+const functionForJs = (res) => {
+  switch (res.type) {
+    case "exportMap":
+      layerExportshow.value = res.value;
 
+      break;
+  }
+};
 onMounted(() => {
   // console.log(SmartEarth);
   InitMap.init3DMap();
   init();
+
+  window.functionForJs = functionForJs;
 });
 </script>
 <style lang="less" scoped>
diff --git a/src/views/export/exportMap.vue b/src/views/export/exportMap.vue
new file mode 100644
index 0000000..9a11ad6
--- /dev/null
+++ b/src/views/export/exportMap.vue
@@ -0,0 +1,235 @@
+<template>
+  <div
+    class="expiort"
+    v-drag="true"
+  >
+    <div class="leftMenu">
+      <div class="menuTitle">鍦板浘璁捐</div>
+      <div class="menmuContent">
+        <div class="contentTitle">
+          <div class="contentImg"></div>
+          鍥句欢淇℃伅
+        </div>
+        <div class="contentBox">
+          <p>鍦板浘鍚嶇О</p>
+          <div class="contentInput">
+            <el-input v-model="exportFrom.name"></el-input>
+          </div>
+          <p>鍒朵綔鏃ユ湡</p>
+          <div class="contentInput">
+            <el-input v-model="exportFrom.date"></el-input>
+          </div>
+          <p>鍒朵綔鍗曚綅</p>
+          <div class="contentInput">
+            <el-input v-model="exportFrom.dep"></el-input>
+          </div>
+        </div>
+        <div class="contentTitle">
+          <div class="contentImg"></div>
+          鍦板浘瑕佺礌
+        </div>
+        <div class="contentBox">
+          <p>鎸囧寳閽�</p>
+          <div class="contentInput">
+            <el-input v-model="exportFrom.name"></el-input>
+          </div>
+          <p>姣斾緥灏�</p>
+          <div class="contentInput">
+            <el-input v-model="exportFrom.date"></el-input>
+          </div>
+          <p>鍥句緥</p>
+          <div class="contentInput">
+            <el-input v-model="exportFrom.dep"></el-input>
+          </div>
+        </div>
+        <div class="contentTitle">
+          <div class="contentImg"></div>
+          鎵撳嵃璁剧疆
+        </div>
+        <div class="contentBox">
+          <p>DPI</p>
+          <div class="contentInput">
+            <el-input v-model="exportFrom.name"></el-input>
+          </div>
+          <p>瀵煎嚭鏍煎紡</p>
+          <div class="contentInput">
+            <el-select
+              style="width: 100%;"
+              v-model="exportFrom.date"
+            >
+              <el-option
+                label=".PNG"
+                value="png"
+              ></el-option>
+            </el-select>
+          </div>
+          <p>绾稿紶璁剧疆</p>
+          <div class="contentInput">
+            <el-select
+              style="width: 100%;"
+              v-model="exportFrom.date"
+            >
+              <el-option
+                label="A4"
+                value="A4"
+              ></el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+      <div class="menuButton">
+        <el-button
+          size="small"
+          type="primary"
+        >纭</el-button>
+        <el-button
+          size="small"
+          type="primary"
+          class="delbtn"
+          @click="editExport"
+        >鍙栨秷</el-button>
+      </div>
+    </div>
+    <div class="rightMap">
+
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  reactive,
+  defineProps,
+  defineEmits,
+} from "vue";
+
+const emits = defineEmits(["SETexportMap"]);
+const exportFrom = ref({
+  name: "",
+  date: "",
+  dep: "",
+});
+const editExport = () => {
+  emits("SETexportMap", false);
+};
+</script>
+ 
+
+
+<style lang="less" scoped>
+.expiort {
+  width: 1227px;
+  height: 783px;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 20%;
+  transform: translateX(-50%);
+  transform: translateY(-50%);
+  background: rgba(7, 8, 14, 0.8);
+  border: 1px solid #d6e4ff;
+  z-index: 10;
+}
+.leftMenu {
+  width: 358px;
+  height: 100%;
+  border-right: 1px solid #d6e4ff;
+  display: flex;
+  flex-direction: column;
+}
+.menmuContent {
+  flex: 1;
+  width: 100%;
+  margin-top: 2px;
+  overflow: auto;
+
+  .contentTitle {
+    font-size: 20px;
+    font-family: Source Han Sans CN;
+    font-weight: 300;
+    color: #ffffff;
+    height: 42px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    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;
+      font-weight: 300;
+      color: #d6e4ff;
+      line-height: 9px;
+      margin-bottom: 10px;
+    }
+    .contentInput {
+      margin-bottom: 10px;
+    }
+  }
+
+  .contentImg {
+    width: 22px;
+    height: 22px;
+    background: url("../../assets/img/leftBtn/鐭╁舰 8 鎷疯礉 3.png") no-repeat;
+    margin-top: 9px;
+    margin-left: 16px;
+    margin-right: 9px;
+  }
+}
+.menuButton {
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .el-button {
+    height: 37px;
+    background: rgba(104, 156, 255, 0.2);
+    border: 1px solid #234066;
+    border-radius: 2px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #ffffff;
+  }
+  .el-button:hover {
+    border: 1px solid #689cff;
+  }
+  .delbtn {
+    background: rgba(245, 108, 108, 0.2);
+    border: 1px solid #5a0914;
+  }
+}
+
+.menuTitle {
+  width: calc(100% - 30px);
+  height: 42px;
+  background: #0e151f;
+
+  font-size: 24px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #ffffff;
+  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);
+  border-radius: 0.5rem;
+}
+</style>
\ No newline at end of file

--
Gitblit v1.9.3