From aef7a66e9568004d3e8bb9930db5866d82ed96c6 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期一, 29 四月 2024 22:32:46 +0800
Subject: [PATCH] 新增绘制3d走航图功能
---
src/views/historymode/HistoryMode.vue | 4 +
src/components/monitor/FactorRadio.vue | 18 +++++
src/assets/border.css | 1
src/components.d.ts | 2
src/utils/map/3dLayer.js | 88 +++++++++++++++++++++++++++++
src/assets/3dmap.css | 11 ---
6 files changed, 110 insertions(+), 14 deletions(-)
diff --git a/src/assets/3dmap.css b/src/assets/3dmap.css
index a4523ba..0ddf6ed 100644
--- a/src/assets/3dmap.css
+++ b/src/assets/3dmap.css
@@ -66,19 +66,10 @@
}
.map-factor-selector {
- /* background-color: rgb(223, 223, 223); */
position: absolute;
left: 1px;
- /* left: 10px; */
- top: 120px;
+ top: 64px;
z-index: 100px;
- /* display: flex;
- align-items: flex-start;
- flex-wrap: wrap-reverse;
- flex-direction: column; */
- /* background-color: #ffffffb0; */
- /* min-height: 200px; */
- /* max-height: 50vh; */
}
.factorbox {
diff --git a/src/assets/border.css b/src/assets/border.css
index 44f8112..11ac6b5 100644
--- a/src/assets/border.css
+++ b/src/assets/border.css
@@ -366,6 +366,7 @@
/* 鍐呭 */
.ff-content {
position: relative;
+ display: inline-block;
}
/* .ff-content .ff-border-top {
diff --git a/src/components.d.ts b/src/components.d.ts
index 4d59aea..efd3d0d 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,8 @@
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElIcon: typeof import('element-plus/es')['ElIcon']
+ ElRadio: typeof import('element-plus/es')['ElRadio']
+ ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
FactorRadio: typeof import('./components/monitor/FactorRadio.vue')['default']
MapToolbox: typeof import('./components/map/MapToolbox.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/components/monitor/FactorRadio.vue b/src/components/monitor/FactorRadio.vue
index f77cf2f..a5ebb94 100644
--- a/src/components/monitor/FactorRadio.vue
+++ b/src/components/monitor/FactorRadio.vue
@@ -1,7 +1,7 @@
<template>
- <BaseCard>
+ <BaseCard class="map-factor-selector">
<template #content>
- <el-radio-group v-model="radio">
+ <el-radio-group v-model="radio" size="default" @change="handleChange">
<el-radio v-for="(item, i) in options" :key="i" :value="item.value">{{
item.label
}}</el-radio>
@@ -14,11 +14,25 @@
// 鐩戞祴鍥犲瓙鍗曢�夋
import { radioOptions } from '@/constant/radio-options';
export default {
+ emits:['change'],
data() {
return {
radio: radioOptions.type0[0].value,
options: radioOptions.type0
};
+ },
+ method:{
+ handleChange(value) {
+ this.$emit('change', value)
+ // todo 鍦板浘3d鍥惧儚鍒囨崲灞曠ず鐩戞祴鍥犲瓙
+ }
}
};
</script>
+<style scoped>
+.el-radio {
+ --el-radio-text-color: white;
+ margin-right: 10px;
+ height: initial;
+}
+</style>
diff --git a/src/utils/map/3dLayer.js b/src/utils/map/3dLayer.js
index fef02a0..d0ad682 100644
--- a/src/utils/map/3dLayer.js
+++ b/src/utils/map/3dLayer.js
@@ -1 +1,87 @@
-import { object3Dlayer } from '../map';
+import { map, object3Dlayer } from './index_old';
+
+// 3d鍥惧舰
+var _cylinder = undefined,
+ // 褰撳墠缁樺埗鐨勫浘褰腑鐨勬渶灏忛珮搴�
+ _minH = -1,
+ // 褰撳墠缁樺埗鐨勫浘褰腑鐨勬渶澶ч珮搴�
+ _maxH = -1;
+
+//鐩戞祴鏁版嵁
+var _factorDatas = {
+ lnglats: [],
+ heights: [],
+ type: ''
+ },
+ //褰撳墠閫変腑鐨勭洃娴嬪洜瀛愭暟鎹�
+ _factor = {},
+ _zoomFirst = true;
+
+function onMapZoom() {
+ // 棣栨鍦板浘缂╂斁鐩戝惉涓嶆墽琛岋紙鍥犱负璁惧畾鐩戝惉鍑芥暟鍚庝細绔嬪嵆鎵ц涓�娆★紝鍙兘瀹樻柟鍑芥暟鏈夌浉鍏冲弬鏁帮紝鍚庣画寰呬慨鏀癸級
+ if (_zoomFirst) {
+ _zoomFirst = false;
+ return;
+ }
+ const fDatas = _factorDatas;
+ const factor = _factor;
+ // MapUtil._object3Dlayer.clear()
+ // MapUtil.drawMesh(f.lnglats, f.heights, f.type, false)
+ MapUtil.drawMesh2(fDatas, factor);
+ MapUtil.drawMarker();
+}
+
+export default {
+ /**
+ * 缁樺埗3D璧拌璺嚎鍥�
+ * @param fDatas 瀹屾暣鐩戞祴鏁版嵁
+ * @param factor 褰撳墠灞曠ず鐨勭洃娴嬪洜瀛愮殑鍊紇alue
+ * @param merge 鏄惁鍜屼箣鍓嶇粯鍒剁殑鍥惧舰鍚堝苟
+ * @param setCenter 闀滃ご鏄惁鑷姩绉诲姩鑷冲浘褰腑蹇�
+ */
+ drawRoadMap(fDatas, factor, merge, setCenter) {
+ const lnglats_GD = fDatas.lnglats_GD;
+ const heights = factor.heights;
+
+ // 1.鍏抽棴鍦板浘缂╂斁鐩戝惉
+ map.off('zoomend', this._onMapZoom);
+
+ // 2.璁＄畻缁樺浘楂樺害鐨勮竟鐣屽��
+ if (merge != true) {
+ var minH = _minH < 0 ? heights[0] : _minH;
+ var maxH = _maxH < 0 ? heights[0] : _maxH;
+ for (let i = 0; i < heights.length; i++) {
+ const h = heights[i];
+ minH = Math.min(minH, h);
+ maxH = Math.max(maxH, h);
+ }
+ _minH = minH;
+ _maxH = maxH;
+ }
+
+ // 3.纭畾瀹氫綅鍧愭爣鐐�
+ var center;
+ if (setCenter && lnglats_GD.length > 0) {
+ var p = lnglats_GD[0];
+ for (let i = 0; i < lnglats_GD.length; i++) {
+ const e = lnglats_GD[i];
+ if (e[0] != 0) {
+ p = e;
+ break;
+ }
+ }
+ center = new AMap.LngLat(...p);
+ }
+
+ // 5.缁樺埗3D鍥惧舰
+ drawMesh2(fDatas, factor, center, merge);
+
+ // 缂╂斁鍦板浘鍒板悎閫傜殑瑙嗛噹绾у埆
+ // map.setFitView()
+
+ // 6.寮�鍚湴鍥剧缉鏀剧洃鍚�
+ if (lnglats_GD.length > 0) {
+ map.on('zoomend', this._onMapZoom);
+ }
+ }
+};
diff --git a/src/views/historymode/HistoryMode.vue b/src/views/historymode/HistoryMode.vue
index b718675..a6576bf 100644
--- a/src/views/historymode/HistoryMode.vue
+++ b/src/views/historymode/HistoryMode.vue
@@ -1,5 +1,7 @@
<template>
- <div class="fy-container">HomePage</div>
+ <div class="fy-container">
+ <FactorRadio></FactorRadio>
+ </div>
</template>
<script>
--
Gitblit v1.9.3