src/assets/3dmap.css | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/assets/border.css | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components.d.ts | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/monitor/FactorRadio.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/utils/map/3dLayer.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/historymode/HistoryMode.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
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 { src/assets/border.css
@@ -366,6 +366,7 @@ /* 内容 */ .ff-content { position: relative; display: inline-block; } /* .ff-content .ff-border-top { 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'] 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> 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 当前展示的监测因子的值value * @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); } } }; 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>