月球大数据地理空间分析展示平台-【前端】-月球2期前端
Surpriseplus
2023-07-18 12d6cdda86f1801793c58c7693bf4664e7826ecd
src/views/export/exportMap.vue
@@ -7,7 +7,9 @@
      <div class="menuTitle">地图设计</div>
      <div class="menmuContent">
        <div class="contentTitle">
          <div class="contentImg"></div>
          <div class="contentImg">
          </div>
          图件信息
        </div>
        <div class="contentBox">
@@ -17,7 +19,13 @@
          </div>
          <p>制作日期</p>
          <div class="contentInput">
            <el-input v-model="exportFrom.date"></el-input>
            <!-- <el-input v-model="exportFrom.date"></el-input> -->
            <el-date-picker
              v-model="exportFrom.date"
              style="width: 100%;"
              type="date"
              placeholder="Pick a day"
            />
          </div>
          <p>制作单位</p>
          <div class="contentInput">
@@ -49,7 +57,13 @@
        <div class="contentBox">
          <p>DPI</p>
          <div class="contentInput">
            <el-input v-model="exportFrom.name"></el-input>
            <!-- <el-input v-model="exportFrom.name"></el-input> -->
            <el-input-number
              style="width: 100%;"
              v-model="exportFrom.name"
              :min="1"
              :max="10"
            />
          </div>
          <p>导出格式</p>
          <div class="contentInput">
@@ -91,12 +105,17 @@
      </div>
    </div>
    <div class="rightMap">
      <el-image
        style="width: 100%; height: 100%;"
        :src="url"
        fit="fill"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import store from "@/store";
import {
  ref,
  onMounted,
@@ -105,16 +124,27 @@
  defineProps,
  defineEmits,
} from "vue";
import canvas2image from "@/assets/js/canvas2image";
const emits = defineEmits(["SETexportMap"]);
const exportFrom = ref({
  name: "",
  date: "",
  dep: "",
});
const url = ref("");
const editExport = () => {
  emits("SETexportMap", false);
};
const setImgStart = () => {
  // window.Viewer.scene.render();
  const myCanvas = window.Viewer.scene.canvas;
  var res = canvas2image.convertToImage(myCanvas, "869", "783", "png");
  debugger;
  url.value = res.src;
};
onMounted((res) => {
  setImgStart();
});
</script>
 
@@ -141,6 +171,12 @@
  display: flex;
  flex-direction: column;
}
.rightMap {
  height: calc(100% - 20px);
  width: 849px;
  border-right: 1px solid #d6e4ff;
  padding: 10px;
}
.menmuContent {
  flex: 1;
  width: 100%;