From 5d0ad67a45c25938c0ee890083ddb5aa4b97cd40 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期四, 14 九月 2023 16:03:43 +0800
Subject: [PATCH] 标绘贴地
---
src/assets/js/Map/index.js | 1
src/views/plotting/plottingInquire.vue | 128 ++++++++++++++++++++++++
src/utils/downloadCSV.js | 2
src/components/BarGraphAxisLine.vue | 154 ++++++++++++++++++++++++++++++
src/views/plotting/plotting.vue | 9 +
5 files changed, 287 insertions(+), 7 deletions(-)
diff --git a/src/assets/js/Map/index.js b/src/assets/js/Map/index.js
index 77b7b1b..02c15dc 100644
--- a/src/assets/js/Map/index.js
+++ b/src/assets/js/Map/index.js
@@ -39,6 +39,7 @@
//=======================
window.Viewer.imageryLayers.removeAll();
+ Viewer.scene.globe.depthTestAgainstTerrain = false; // 寮�鍚繁搴︽祴璇�
Viewer.animation.container.style.visibility = "hidden";
Viewer.timeline.container.style.visibility = "hidden";
//=======================
diff --git a/src/components/BarGraphAxisLine.vue b/src/components/BarGraphAxisLine.vue
new file mode 100644
index 0000000..f980895
--- /dev/null
+++ b/src/components/BarGraphAxisLine.vue
@@ -0,0 +1,154 @@
+<template>
+ <div class="Echarts_box" :style="{ width: width, height: height }">
+ <div id="myEcharts1" style="width: 100%; height: 100%"></div>
+ </div>
+</template>
+<script lang="ts" setup>
+import {
+ ref,
+ onMounted,
+ onBeforeUnmount,
+ reactive,
+ defineProps,
+ defineEmits,
+ watch,
+ onUnmounted,
+} from "vue";
+import * as echarts from "echarts";
+
+//defineProps 鏉ユ帴鏀剁粍浠剁殑浼犲��
+const props = defineProps({
+ width: String,
+ height: String,
+});
+let myEcharts = echarts;
+onMounted(() => {
+ initChart();
+});
+
+onUnmounted(() => {
+ myEcharts.dispose;
+});
+
+function initChart() {
+ let chart = myEcharts.init(
+ document.getElementById("myEcharts1"),
+ "purple-passion"
+ );
+ chart.setOption({
+ title: {
+ text: "",
+ left: "center",
+ },
+ toolbox: {
+ show: true, //鏄惁鏄剧ず宸ュ叿鏍忕粍浠�
+ orient: "horizontal", //宸ュ叿鏍� icon 鐨勫竷灞�鏈濆悜'horizontal' 'vertical'
+ itemSize: 15, //宸ュ叿鏍� icon 鐨勫ぇ灏�
+ itemGap: 10, //宸ュ叿鏍� icon 姣忛」涔嬮棿鐨勯棿闅�
+ showTitle: true, //鏄惁鍦ㄩ紶鏍� hover 鐨勬椂鍊欐樉绀烘瘡涓伐鍏� icon 鐨勬爣棰�
+ feature: {
+ mark: {
+ // '杈呭姪绾垮紑鍏�'
+ show: true,
+ },
+ // dataView : { //鏁版嵁瑙嗗浘宸ュ叿锛屽彲浠ュ睍鐜板綋鍓嶅浘琛ㄦ墍鐢ㄧ殑鏁版嵁锛岀紪杈戝悗鍙互鍔ㄦ�佹洿鏂�
+ // show: true, //鏄惁鏄剧ず璇ュ伐鍏枫��
+ // title:"鏁版嵁瑙嗗浘",
+ // readOnly: false, //鏄惁涓嶅彲缂栬緫锛堝彧璇伙級
+ // lang: ['鏁版嵁瑙嗗浘', '鍏抽棴', '鍒锋柊'], //鏁版嵁瑙嗗浘涓婃湁涓変釜璇濇湳锛岄粯璁ゆ槸['鏁版嵁瑙嗗浘', '鍏抽棴', '鍒锋柊']
+ // backgroundColor:"#fff", //鏁版嵁瑙嗗浘娴眰鑳屾櫙鑹层��
+ // textareaColor:"#fff", //鏁版嵁瑙嗗浘娴眰鏂囨湰杈撳叆鍖鸿儗鏅壊
+ // textareaBorderColor:"#333", //鏁版嵁瑙嗗浘娴眰鏂囨湰杈撳叆鍖鸿竟妗嗛鑹�
+ // textColor:"#000", //鏂囨湰棰滆壊銆�
+ // buttonColor:"#c23531", //鎸夐挳棰滆壊銆�
+ // buttonTextColor:"#fff", //鎸夐挳鏂囨湰棰滆壊銆�
+ // },
+ // magicType: { //鍔ㄦ�佺被鍨嬪垏鎹�
+ // show: true,
+ // title:"鍒囨崲", //鍚勪釜绫诲瀷鐨勬爣棰樻枃鏈紝鍙互鍒嗗埆閰嶇疆銆�
+ // type: ['line', 'bar'], //鍚敤鐨勫姩鎬佺被鍨嬶紝鍖呮嫭'line'锛堝垏鎹负鎶樼嚎鍥撅級, 'bar'锛堝垏鎹负鏌辩姸鍥撅級, 'stack'锛堝垏鎹负鍫嗗彔妯″紡锛�, 'tiled'锛堝垏鎹负骞抽摵妯″紡锛�
+ // },
+ // restore : { //閰嶇疆椤硅繕鍘熴��
+ // show: true, //鏄惁鏄剧ず璇ュ伐鍏枫��
+ // title:"杩樺師",
+ // },
+ saveAsImage: {
+ //淇濆瓨涓哄浘鐗囥��
+ show: true, //鏄惁鏄剧ず璇ュ伐鍏枫��
+ type: "png", //淇濆瓨鐨勫浘鐗囨牸寮忋�傛敮鎸� 'png' 鍜� 'jpeg'銆�
+ name: "pic1", //淇濆瓨鐨勬枃浠跺悕绉帮紝榛樿浣跨敤 title.text 浣滀负鍚嶇О
+ backgroundColor: "#ffffff", //淇濆瓨鐨勫浘鐗囪儗鏅壊锛岄粯璁や娇鐢� backgroundColor锛屽鏋渂ackgroundColor涓嶅瓨鍦ㄧ殑璇濅細鍙栫櫧鑹�
+ title: "淇濆瓨涓哄浘鐗�",
+ pixelRatio: 1, //淇濆瓨鍥剧墖鐨勫垎杈ㄧ巼姣斾緥锛岄粯璁よ窡瀹瑰櫒鐩稿悓澶у皬锛屽鏋滈渶瑕佷繚瀛樻洿楂樺垎杈ㄧ巼鐨勶紝鍙互璁剧疆涓哄ぇ浜� 1 鐨勫�硷紝渚嬪 2
+ },
+ // dataZoom :{ //鏁版嵁鍖哄煙缂╂斁銆傜洰鍓嶅彧鏀寔鐩磋鍧愭爣绯荤殑缂╂斁
+ // show: true, //鏄惁鏄剧ず璇ュ伐鍏枫��
+ // title:"缂╂斁", //缂╂斁鍜岃繕鍘熺殑鏍囬鏂囨湰
+ // xAxisIndex:0, //鎸囧畾鍝簺 xAxis 琚帶鍒躲�傚鏋滅己鐪佸垯鎺у埗鎵�鏈夌殑x杞淬�傚鏋滆缃负 false 鍒欎笉鎺у埗浠讳綍x杞淬�傚鏋滆缃垚 3 鍒欐帶鍒� axisIndex 涓� 3 鐨剎杞淬�傚鏋滆缃负 [0, 3] 鍒欐帶鍒� axisIndex 涓� 0 鍜� 3 鐨剎杞�
+ // yAxisIndex:false, //鎸囧畾鍝簺 yAxis 琚帶鍒躲�傚鏋滅己鐪佸垯鎺у埗鎵�鏈夌殑y杞淬�傚鏋滆缃负 false 鍒欎笉鎺у埗浠讳綍y杞淬�傚鏋滆缃垚 3 鍒欐帶鍒� axisIndex 涓� 3 鐨剏杞淬�傚鏋滆缃负 [0, 3] 鍒欐帶鍒� axisIndex 涓� 0 鍜� 3 鐨剏杞�
+ // },
+ },
+ zlevel: 0, //鎵�灞炲浘褰㈢殑Canvas鍒嗗眰锛寊level 澶х殑 Canvas 浼氭斁鍦� zlevel 灏忕殑 Canvas 鐨勪笂闈�
+ z: 2, //鎵�灞炵粍浠剁殑z鍒嗗眰锛寊鍊煎皬鐨勫浘褰細琚珃鍊煎ぇ鐨勫浘褰㈣鐩�
+ left: "right", //缁勪欢绂诲鍣ㄥ乏渚х殑璺濈,'left', 'center', 'right','20%'
+ top: "top", //缁勪欢绂诲鍣ㄤ笂渚х殑璺濈,'top', 'middle', 'bottom','20%'
+ right: "auto", //缁勪欢绂诲鍣ㄥ彸渚х殑璺濈,'20%'
+ bottom: "auto", //缁勪欢绂诲鍣ㄤ笅渚х殑璺濈,'20%'
+ width: "auto", //鍥句緥瀹藉害
+ height: "auto", //鍥句緥楂樺害
+ },
+
+ legend: {
+ data: [],
+ },
+ xAxis: {
+ type: "category",
+ data: [
+ "涓�鏈�",
+ "浜屾湀",
+ "涓夋湀",
+ "鍥涙湀",
+ "浜旀湀",
+ "鍏湀",
+ "涓冩湀",
+ "鍏湀",
+ "涔濇湀",
+ "鍗佹湀",
+ "鍗佷竴鏈�",
+ "鍗佷簩鏈�",
+ ],
+ },
+ tooltip: {
+ trigger: "axis",
+ },
+ yAxis: {
+ type: "value",
+ },
+ series: [
+ {
+ data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
+ type: "line",
+ smooth: true,
+ symbol: "none", //鍙栨秷鎶樼偣鍦嗗湀
+ itemStyle: {
+ normal: {
+ label: {
+ show: false,
+ position: "top",
+ formatter: "{c}",
+ },
+ },
+ },
+ },
+ ],
+ });
+ window.onresize = function () {
+ chart.resize();
+ };
+}
+</script>
+<style lang="less" scoped>
+.Echarts_box {
+ background: #fff;
+}
+</style>
diff --git a/src/utils/downloadCSV.js b/src/utils/downloadCSV.js
index 8e3624d..7326ce6 100644
--- a/src/utils/downloadCSV.js
+++ b/src/utils/downloadCSV.js
@@ -41,7 +41,7 @@
},
],
// 杩欐槸瀵瑰簲body甯搁噺鐨勮〃澶�
- ["layerName", "min", "max", "avg", "lng", "lat"],
+ ["layerName", "min", "max", "avg", "lon", "lat"],
];
body.unshift(...header); // 灏嗗畾涔夊ソ鐨勮〃澶存坊鍔犲埌 body 涓�
const sheet = XLSXS.utils.aoa_to_sheet(body); // aoa_to_sheet 灏嗕簩缁存暟缁勮浆鎴� sheet
diff --git a/src/views/plotting/plotting.vue b/src/views/plotting/plotting.vue
index 874fe06..f049424 100644
--- a/src/views/plotting/plotting.vue
+++ b/src/views/plotting/plotting.vue
@@ -172,7 +172,11 @@
positions: Cesium.Cartesian3.fromDegreesArray(std),
width: 6,
material: lineColor.value,
- clampToGround: true,
+ //clampToGround: true,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //璁剧疆 HeightReference 楂樺害鍙傝�冪被鍨嬩负 CLAMP_TO_GROUND 璐村湴绫诲瀷
+ //classificationType: Cesium.ClassificationType.BOTH, //璐村湴褰㈠拰3dtile BOTH 鎴� CESIUM_3D_TILE 鎴� TERRAIN
+ verticalOrigin: Cesium.VerticalOrigin.CENTER, // 鍨傜洿浣嶇疆
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 姘村钩浣嶇疆
},
});
var linestring = turf.lineString(coord);
@@ -205,9 +209,10 @@
outline: true,
outlineColor: lineColor.value,
outlineWidth: 2,
- classificationType: Cesium.ClassificationType.BOTH, //璐村湴褰㈠拰3dtile
+ classificationType: Cesium.ClassificationType.BOTH, //璐村湴褰㈠拰3dtile BOTH 鎴� CESIUM_3D_TILE 鎴� TERRAIN
clampToGround: true, //寮�鍚创鍦�
height: 0,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //璁剧疆 HeightReference 楂樺害鍙傝�冪被鍨嬩负 CLAMP_TO_GROUND 璐村湴绫诲瀷
},
});
diff --git a/src/views/plotting/plottingInquire.vue b/src/views/plotting/plottingInquire.vue
index c87ada0..9cd78a5 100644
--- a/src/views/plotting/plottingInquire.vue
+++ b/src/views/plotting/plottingInquire.vue
@@ -45,7 +45,7 @@
@change="pixelChange"
>
<el-option
- v-for="item in options"
+ v-for="item in pixeloptions"
:key="item.value"
:label="item.label"
:value="item.value"
@@ -53,9 +53,42 @@
</el-select>
</div>
</div>
- <div class="chart_box" v-if="chartIsshow">
- <Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
+ <div class="chart" v-if="chartIsshow">
+ <div class="chart_box">
+ <div class="chart_btn">
+ <el-button
+ :icon="Search"
+ link
+ class="linkBtn"
+ @click="openDialog"
+ ></el-button>
+
+ <el-button :icon="Download" link class="linkBtn"></el-button>
+ <el-button
+ :icon="Delete"
+ link
+ class="del linkBtn"
+ ></el-button>
+ </div>
+ <Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
+ </div>
+ <div class="select_box">
+ <el-select
+ v-model="layerValue"
+ class="m-2"
+ placeholder="閫夋嫨鍥惧眰"
+ size="small"
+ >
+ <el-option
+ v-for="item in layeroptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </div>
</div>
+
<div class="inquireContent_msg" v-if="!chartIsshow">
<div class="inquireContent_msg_k">
<span>鎻愬彇鐨勮竟鐣屾</span>
@@ -97,6 +130,14 @@
</div>
</div>
</div>
+ <div class="dialog" v-if="dialogShow" @click.self="dialogShow = false">
+ <div class="chart">
+ <i @click.capture="closeDialog"
+ ><el-icon><Close /></el-icon
+ ></i>
+ <BarGraphAxisLine :width="'856px'" :height="'636px'"></BarGraphAxisLine>
+ </div>
+ </div>
</template>
<script lang="ts" setup>
@@ -113,9 +154,11 @@
import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
//echarts
import BarGraph from "@/components/BarGraph.vue";
+import BarGraphAxisLine from "@/components/BarGraphAxisLine.vue";
import { saveFSDZJsonToExcel } from "@/utils/downloadCSV.js";
import { selectByPoint, selectByPolygon, selectByPolyline } from "@/api/api";
import { ElMessage } from "element-plus";
+import { Search, Delete, Download } from "@element-plus/icons-vue";
const store = useStore(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥
const emits = defineEmits(["setCloseplotting"]);
let isShow = ref(false);
@@ -129,7 +172,22 @@
Scop: "",
pixel: "1",
});
-const options = [
+let layerValue = ref("");
+const layeroptions = [
+ {
+ value: "鍥惧眰鍚嶇О",
+ label: "鍥惧眰鍚嶇О",
+ },
+ {
+ value: "鍥惧眰鍚嶇О",
+ label: "鍥惧眰鍚嶇О",
+ },
+ {
+ value: "鍥惧眰鍚嶇О",
+ label: "鍥惧眰鍚嶇О",
+ },
+];
+const pixeloptions = [
{
value: "1",
label: "1脳1",
@@ -168,6 +226,16 @@
},
];
let resultList = ref([]);
+let dialogShow = ref(false);
+//鍏抽棴
+const closeDialog = () => {
+ dialogShow.value = false;
+ // alert(1);
+};
+//鎵撳紑
+const openDialog = () => {
+ dialogShow.value = true;
+};
//鍍忕礌閫夋嫨
const pixelChange = (val) => {
if (store.state.plottingInquireData.entitiesData.icon == "d.png") {
@@ -279,6 +347,7 @@
});
}
if (nVal.entitiesData.icon == "m.png") {
+ chartIsshow.value = false;
if (nVal.entitiesData.name == oVal.entitiesData.name) {
return;
}
@@ -286,6 +355,7 @@
selectPolygon({ wkt: nVal.entitiesData.wkt });
}
if (nVal && nVal.entitiesData.icon == "d.png") {
+ chartIsshow.value = false;
selectPoint({
pixel: ScopeBox.value.pixel,
wkt: nVal.entitiesData.wkt,
@@ -516,6 +586,56 @@
color: #d6e4ff;
}
}
+ .chart {
+ width: 100%;
+ }
+ .chart_box {
+ width: 100%;
+ .chart_btn {
+ display: flex;
+ justify-content: flex-end;
+ margin: 0 10px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ // border-bottom: 1px solid rgba(214, 228, 255, 0.4);
+ .linkBtn {
+ color: #d6e4ff;
+ }
+ .del {
+ color: red;
+ }
+ }
+ }
+ .select_box {
+ display: flex;
+ justify-content: center;
+ padding-bottom: 20px;
+ }
+ }
+}
+.dialog {
+ position: absolute;
+ top: 0;
+ height: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: rgba(255, 255, 255, 0.4);
+ z-index: 110;
+ .chart {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: rgb(33, 37, 44);
+ padding: 20px;
+ i {
+ position: absolute;
+ right: 2px;
+ top: 2px;
+ color: #fff;
+ font-size: 14px;
+ cursor: pointer;
+ }
}
}
</style>
--
Gitblit v1.9.3