地图导出菜单添加

Surpriseplus

2023-07-03 a847f035b36c1005119d7f88d40f41849017ff47

地图导出菜单添加

 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": {

 src/assets/js/Map/menuTool.js

@@ -100,6 +100,7 @@
  },
  // çŸ©å½¢æ­£æ–¹å½¢
  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;

 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) {
                // åœ¨ie下兼容写法
                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 æ­£åˆ™åŒ¹é…æ›¿æ¢
            let styL = sty(dragDom, 'left')
            // ä¸ºå…¼å®¹ie
            if (styL === 'auto') styL = '0px'
            let styT = sty(dragDom, 'top')

            // console.log(styL)
            // æ³¨æ„åœ¨ie中 ç¬¬ä¸€æ¬¡èŽ·å–到的值为组件自带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;

 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>

 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>