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