新增绘制3d走航图功能

riku

2024-04-29 aef7a66e9568004d3e8bb9930db5866d82ed96c6

新增绘制3d走航图功能

 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>