<template>
|
<div class="legendBox">
|
<div class="titleLenged">
|
<div>
|
图例
|
</div>
|
<!-- <div>
|
<el-icon @click.stop="setDownloadLegend" :size="21">
|
<Download />
|
</el-icon>
|
<el-icon @click.stop="setCloseLegend" :size="21">
|
<Close />
|
</el-icon>
|
|
</div> -->
|
</div>
|
<div class="legendContent">
|
|
</div>
|
<iframe id="downFrame" src="" style="display: none; border: 0; padding: 0; height: 0; width: 0"></iframe>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
nextTick,
|
watch,
|
} from "vue";
|
import store from "@/store";
|
import menuTool from '@/assets/js/Map/menuTool';
|
import { removeToken, getToken } from "@/utils/auth";
|
import $ from "jquery";
|
import * as turf from "@turf/turf";
|
import WKT from "terraformer-wkt-parser";
|
import { rasterAnalysis_downloadSlopXls } from "@/api/api.js";
|
const setDownloadLegend = () => {
|
var geom = menuTool.legendBox;
|
var coord = turf.polygon([[
|
[geom[0], geom[1]],
|
[geom[0], geom[3]],
|
[geom[2], geom[3]],
|
[geom[2], geom[1]],
|
[geom[0], geom[1]],
|
]]);
|
var wkt = WKT.convert(coord.geometry)
|
|
setDownLoadShp(wkt);
|
setDownLoadExcel(wkt);
|
|
|
}
|
const setDownLoadExcel = (res) => {
|
var url = config.proxy + "/rasterAnalysis/downloadSlopXls?token=" + getToken() + "&wkt=" + res;
|
$("#downFrame").attr("src", url).click();
|
|
}
|
const setDownLoadShp = (res) => {
|
var obj = {
|
"bak": null,
|
"fillColor": null,
|
"id": 10086,
|
"name": "图例",
|
"opacity": null,
|
"type": "rectangle",
|
"wkt": res
|
}
|
$.ajax({
|
url: config.proxy + "/comprehensive/downloadShp?token=" + getToken(),
|
type: "POST",
|
data: JSON.stringify([obj]),
|
dataType: "json", // html、json、jsonp、script、text
|
contentType: "application/json", // "application/x-www-form-urlencoded"
|
success: (rs) => {
|
if (rs && rs.code == 200) {
|
setDownLoadFile(rs.result);
|
}
|
},
|
error: function (e) { },
|
});
|
}
|
const setDownLoadFile = (res) => {
|
var a = document.createElement("a"); // 创建一个a标签元素
|
a.style.display = "none"; // 设置元素不可见
|
|
a.href =
|
config.proxy +
|
"/comprehensive/downloadFile?token=" +
|
getToken() +
|
"&guid=" +
|
res;
|
|
document.body.appendChild(a); // 加入
|
a.click(); // 触发点击,下载
|
document.body.removeChild(a); // 释放
|
|
}
|
const setCloseLegend = () => {
|
menuTool.setCloseEsriLayer();
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.legendBox {
|
|
bottom: 70px;
|
right: 100px;
|
position: absolute;
|
z-index: 9999;
|
/* background: url('@/assets/img/图例.png') no-repeat;
|
background-size: 100% 100%; */
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
padding: 10px;
|
border-radius: 5px;
|
|
.titleLenged {
|
font-family: Source Han Sans SC;
|
font-size: 12px;
|
color: white;
|
display: flex;
|
height: 100%;
|
align-items: center;
|
|
justify-content: space-between;
|
|
div {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
}
|
|
margin-bottom: 10px;
|
}
|
|
.legendContent {
|
width: 100px;
|
height: 300px;
|
background: url('@/assets/img/图例.png') no-repeat;
|
background-size: 100% 100%;
|
}
|
|
}
|
</style>
|
