1. 新增绘图模式的切换 2. 新增行政区划的切换展示

riku

2025-03-12 42f42dc88214f283b43c422f37e10ab45c5c5578

1. 新增绘图模式的切换
2. 新增行政区划的切换展示

 src/components.d.ts

@@ -33,7 +33,6 @@
    ElFormItem: typeof import('element-plus/es')['ElFormItem']
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElPopover: typeof import('element-plus/es')['ElPopover']
@@ -43,6 +42,7 @@
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElSlider: typeof import('element-plus/es')['ElSlider']
    ElSwitch: typeof import('element-plus/es')['ElSwitch']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElText: typeof import('element-plus/es')['ElText']

 src/components/core/CoreMenu.vue

@@ -56,6 +56,10 @@
        {
          name: '走航监测',
          path: 'rmode'
        },
        {
          name: '走航融合',
          path: 'underwaymix'
        }
        // {
        //   name: '污染溯源2',

 src/components/map/MapScene.vue

@@ -42,6 +42,8 @@
import sceneInfoApi from '@/api/sceneInfoApi';
import marks from '@/utils/map/marks';
import MapUtil from '@/utils/map/util';
import { useToolboxStore } from '@/stores/toolbox';
import { mapStores } from 'pinia';

const lableMarkMap = new Map();

@@ -56,10 +58,14 @@
      sceneMap: new Map()
    };
  },
  computed: {
    ...mapStores(useToolboxStore)
  },
  watch: {
    // å½“切换区县时，清空所有选项
    districtCode(nV, oV) {
      if (nV != oV) {
        this.toolboxStore.selectedDistrict = nV;
        this.handelCheckAllChange(false);
      }
    }

 src/components/map/MapToolbox.vue

@@ -39,6 +39,15 @@
      toolItem: [
        {
          icon: 'fa fa-map-signs',
          label: '行政区划',
          value: false,
          click: function () {
            this.value = !this.value;
            toolbox.toggleDistrict(this.value);
          }
        },
        {
          icon: 'fa fa-map-signs',
          label: '地物标注',
          value: false,
          click: function () {

 src/components/monitor/FactorLegend.vue

@@ -27,6 +27,18 @@
          <span class="w-60 m-l-8">{{ item.unit }}</span>
        </el-row>
      </div>
      <div>
        åˆ‡æ¢ç»˜å›¾æ¨¡å¼ï¼š
        <el-switch
          v-model="legendType"
          width="60"
          inline-prompt
          style=""
          active-text="动态"
          inactive-text="标准"
          @change="handleChange"
        />
      </div>
    </template>
  </BaseCard>
</template>
@@ -43,21 +55,38 @@
      default: () => new Factor()
    }
  },
  emits: ['change'],
  data() {
    return {};
    return {
      // ç»˜å›¾æ¨¡å¼ï¼Œfalse: æ ‡å‡†æ¨¡å¼ï¼›true：动态模式
      legendType: false,
      legends: []
    };
  },
  watch: {
    factor(nValue, oValue) {
      if (nValue != oValue && nValue) {
        this.legends = this.refreshLegend(
          nValue.factorName,
          nValue.legendType,
          nValue.min,
          nValue.max
        );
      }
    }
  },
  computed: {
    legends() {
      const res = this.factor
        ? this.refreshLegend(
            this.factor.factorName,
            this.factor.legendType,
            this.factor.min,
            this.factor.max
          )
        : [];
      return res;
    }
    // legends() {
    //   const res = this.factor
    //     ? this.refreshLegend(
    //         this.factor.factorName,
    //         this.factor.legendType,
    //         this.factor.min,
    //         this.factor.max
    //       )
    //     : [];
    //   return res;
    // }
  },
  methods: {
    /**
@@ -108,6 +137,17 @@
      }

      return legendList;
    },

    handleChange(value) {
      this.$emit('change', value, () => {
        this.legends = this.refreshLegend(
          this.factor.factorName,
          this.factor.legendType,
          this.factor.min,
          this.factor.max
        );
      });
    }
  }
};
@@ -120,4 +160,9 @@
.text-center {
  text-align: center;
}

.el-switch {
  --el-switch-on-color: #1f9956;
  --el-switch-off-color: #8b8b8b;
}
</style>

 src/components/search/OptionDevice.vue

@@ -77,6 +77,7 @@
      this.fetchDevice();
    } else {
      this.handleChange(this.deviceOptions[0].value);
      this.$emit('initOver');
    }
  }
};

 src/components/search/OptionMission.vue

@@ -60,6 +60,7 @@
    } else {
      this.index = 0;
      this.handleChange(0);
      this.$emit('initOver');
    }
  }
};

 src/components/search/SearchBar.vue

@@ -104,6 +104,10 @@
    handleClick() {
      this.$emit('search', { ...this.formSearch, mission: this.mission });
    }
  },
  created() {
    initCount = 0;
    initEvents = [];
  }
};
</script>

 src/model/Factor.js

@@ -60,24 +60,33 @@
  this.standardMin = -1; //监测因子类型对应的标准最小值
  this.standardMax = -1; //监测因子类型对应的标准最大值

  // this.legendType = Legend.S_TYPE; //图例模式
  this.legendType = Legend.D_TYPE; //图例模式
  this.legendType = Legend.S_TYPE; //图例模式
  // this.legendType = Legend.D_TYPE; //图例模式

  if (options != undefined) {
    this.datas = options.datas;
    this.heights = options.heights;
    this.min = options.min;
    this.max = options.max;
    this.originMin = options.originMin;
    this.originMax = options.originMax;
  if (typeof options === 'object') {
    for (const key in options) {
      if (Object.prototype.hasOwnProperty.call(options, key)) {
        const value = options[key];
        this[key] = value;
      }
    }

    this.factorName = options.factorName;
    this.factorId = options.factorId;
    this.colors = options.colors;
    this.bottomColors = options.bottomColors;
    this.bottomColor = options.bottomColor;
    this.standardMin = options.standardMin;
    this.standardMax = options.standardMax;
    // this.datas = options.datas;
    // this.heights = options.heights;
    // this.min = options.min;
    // this.max = options.max;
    // this.originMin = options.originMin;
    // this.originMax = options.originMax;

    // this.factorName = options.factorName;
    // this.factorId = options.factorId;
    // this.colors = options.colors;
    // this.bottomColors = options.bottomColors;
    // this.bottomColor = options.bottomColor;
    // this.standardMin = options.standardMin;
    // this.standardMax = options.standardMax;

    // this.legendType = options.legendType;
  }
}


 src/model/FactorDatas.js

@@ -1,5 +1,6 @@
import { Factor } from './Factor';
import calculate from '@/utils/map/calculate';
import { Legend } from './Legend';

/**
 *
@@ -16,12 +17,24 @@
  // ç›‘测因子数据，Map<String, Factor>
  this.factor = new Map();

  if (options != undefined) {
    this.times = options.times;
    this.lnglats_GPS = options.lnglats_GPS;
    this.lnglats_GD = options.lnglats_GD;
    this.coors_GD = options.coors_GD;
    this.factor = options.factor;
  this.legendType = Legend.S_TYPE; //图例模式

  // if (options != undefined) {
  //   this.times = options.times;
  //   this.lnglats_GPS = options.lnglats_GPS;
  //   this.lnglats_GD = options.lnglats_GD;
  //   this.coors_GD = options.coors_GD;
  //   this.factor = options.factor;
  //   this.legendType = options.legendType;
  // }

  if (typeof options === 'object') {
    for (const key in options) {
      if (Object.prototype.hasOwnProperty.call(options, key)) {
        const value = options[key];
        this[key] = value;
      }
    }
  }
}

@@ -58,7 +71,9 @@
      d.values.forEach((v) => {
        var f = this.factor[v.factorId];
        if (f == undefined) {
          f = new Factor();
          f = new Factor({
            legendType: this.legendType
          });
          this.factor[v.factorId] = f;
        }
        f.pushData(v, drawMode == undefined ? 0 : drawMode);
@@ -118,17 +133,38 @@

  // è®¾ç½®ç»˜å›¾èŒƒå›´
  setRange: function (key, range) {
    this.legendType = Legend.C_TYPE;
    if (key != undefined) {
    this.factor[key].setRange(range);
    } else {
      for (const k in this.factor) {
        this.factor[k].setRange(range);
      }
    }
  },

  // é‡ç½®ç»˜å›¾èŒƒå›´
  resetRange: function (key) {
    this.legendType = Legend.D_TYPE;
    if (key != undefined) {
    this.factor[key].clearRange();
    } else {
      for (const k in this.factor) {
        this.factor[k].clearRange();
      }
    }
  },

  // è®¾ç½®ä¸ºæ ‡å‡†ç»˜å›¾èŒƒå›´
  standardRange: function (key) {
    this.legendType = Legend.S_TYPE;
    if (key != undefined) {
    this.factor[key].standardRange();
    } else {
      for (const k in this.factor) {
        this.factor[k].standardRange();
      }
    }
  },

  // æ ¹æ®å½“前绘图范围重新计算绘图高度

 src/router/index.js

@@ -36,6 +36,12 @@
          name: 'realtimeMode',
          component: () => import('@/views/realtimemode/RealtimeMode.vue')
        },
        // èµ°èˆªèžåˆ
        {
          path: 'underwaymix',
          name: 'underwayMixMode',
          component: () => import('@/views/underwaymix/UnderwayMixMode.vue')
        },
        // é£Žé™©æ¨¡åž‹
        {
          path: 'riskmode',

 src/stores/toolbox.js

@@ -2,6 +2,9 @@
import { defineStore } from 'pinia';

export const useToolboxStore = defineStore('toolbox', () => {
  const selectedDistrict = ref(null);
  // å¼€å…³è¡Œæ”¿åŒºåˆ’
  const districtStatus = ref(false);
  // å¼€å…³åœ°ç‰©æ ‡æ³¨
  const featuresStatus = ref(false);
  // å¼€å…³å«æ˜Ÿåœ°å›¾
@@ -18,6 +21,8 @@
  const sceneSearchStatus = ref(true);

  return {
    selectedDistrict,
    districtStatus,
    featuresStatus,
    satelliteStatus,
    controlbarStatus,

 src/utils/map/3dLayer.js

@@ -167,6 +167,12 @@
}

export default {
  clear() {
    if (_cylinder != undefined) {
      object3Dlayer.remove(_cylinder);
    }
  },

  drawMesh: drawMesh,
  /**
   * ç»˜åˆ¶3D走行路线图

 src/utils/map/toolbox.js

@@ -1,9 +1,19 @@
/* eslint-disable no-undef */
import { map, satellite } from './index_old';
import { watch } from 'vue';
import { map, satellite, onMapMounted } from './index_old';
import { useToolboxStore } from '@/stores/toolbox';
import { DialogUtil } from '@/utils/map/dialog';

const toolboxStore = useToolboxStore();
watch(
  () => toolboxStore.selectedDistrict,
  (nV, oV) => {
    if (nV != oV && toolboxStore.districtStatus) {
      if (activeDistrict) map.remove(activeDistrict);
      drawDistrict(toolboxStore.selectedDistrict);
    }
  }
);

/**
 * åæ ‡æ‹¾å–鼠标点击回调事件
@@ -38,8 +48,66 @@
  }
}

let districtPolygonMap = new Map();
let activeDistrict = undefined;
// ç»˜åˆ¶åŒºåŽ¿è¾¹ç•Œ
function drawDistrict(districtName, isNew) {
  onMapMounted(() => {
    if (!isNew && districtPolygonMap.has(districtName)) {
      const districtPolygon = districtPolygonMap.get(districtName);
      map.remove(districtPolygon);
      map.add(districtPolygon);
      activeDistrict = districtPolygon;
    } else {
      // eslint-disable-next-line no-undef
      var district = new AMap.DistrictSearch({
        extensions: 'all', //返回行政区边界坐标等具体信息
        level: 'district' //设置查询行政区级别为区
      });
      district.search(districtName, function (status, result) {
        var bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息
        if (bounds) {
          for (var i = 0; i < bounds.length; i++) {
            //生成行政区划 polygon
            // eslint-disable-next-line no-undef
            const districtPolygon = new AMap.Polygon({
              map: map, //显示该覆盖物的地图对象
              strokeWeight: 1, //轮廓线宽度
              path: bounds[i], //多边形轮廓线的节点坐标数组
              fillOpacity: 0.6, //多边形填充透明度
              // fillColor: '#CCF3FF', //多边形填充颜色
              fillColor: '#0077ff',
              // strokeColor: '#ffffff' //线条颜色
              strokeColor: 'white', //线条颜色
              zIndex: 9
            });

            districtPolygonMap.set(districtName, districtPolygon);
            activeDistrict = districtPolygon;
          }
          // map.setFitView(); //将覆盖物调整到合适视野
        }
      });
    }
  });
}

export default {
  /**
   * å¼€å…³è¡Œæ”¿åŒºåˆ’
   * @param {boolean} value
   */
  toggleDistrict(value) {
    if (value) {
      if (toolboxStore.selectedDistrict)
        drawDistrict(toolboxStore.selectedDistrict);
    } else {
      if (activeDistrict) map.remove(activeDistrict);
    }
    toolboxStore.districtStatus = value;
  },

  /**
   * å¼€å…³åœ°ç‰©æ ‡æ³¨
   * @param {boolean} value
   */

 src/utils/map/util.js

@@ -1,5 +1,6 @@
import { map, isDragging } from '@/utils/map/index_old';
import marks from '@/utils/map/marks';
import Layer from '@/utils/map/3dLayer';

/**
 * åæ ‡é›†åˆçš„最西南角和最东北角
@@ -84,6 +85,7 @@
  clearMap() {
    marks.clearMassMarks();
    map.clearMap();
    Layer.clear();
  },
  setFitView(views) {
    if (views) {

 src/views/HomePage.vue

@@ -19,45 +19,45 @@
<script setup>
import { map, onMapMounted } from '@/utils/map/index_old';

let districtPolygon;
// ç»˜åˆ¶åŒºåŽ¿è¾¹ç•Œ
function drawDistrict(districtName, isNew) {
  onMapMounted(() => {
    if (districtPolygon && !isNew) {
      map.remove(districtPolygon);
      map.add(districtPolygon);
    } else {
      // eslint-disable-next-line no-undef
      var district = new AMap.DistrictSearch({
        extensions: 'all', //返回行政区边界坐标等具体信息
        level: 'district' //设置查询行政区级别为区
      });
      district.search(districtName, function (status, result) {
        var bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息
        if (bounds) {
          for (var i = 0; i < bounds.length; i++) {
            //生成行政区划 polygon
            // eslint-disable-next-line no-undef
            districtPolygon = new AMap.Polygon({
              map: map, //显示该覆盖物的地图对象
              strokeWeight: 1, //轮廓线宽度
              path: bounds[i], //多边形轮廓线的节点坐标数组
              fillOpacity: 0.6, //多边形填充透明度
              // fillColor: '#CCF3FF', //多边形填充颜色
              fillColor: '#0077ff',
              // strokeColor: '#ffffff' //线条颜色
              strokeColor: 'white', //线条颜色
              zIndex: 9
            });
          }
          map.setFitView(); //将覆盖物调整到合适视野
        }
      });
    }
  });
}
// let districtPolygon;
// // ç»˜åˆ¶åŒºåŽ¿è¾¹ç•Œ
// function drawDistrict(districtName, isNew) {
//   onMapMounted(() => {
//     if (districtPolygon && !isNew) {
//       map.remove(districtPolygon);
//       map.add(districtPolygon);
//     } else {
//       // eslint-disable-next-line no-undef
//       var district = new AMap.DistrictSearch({
//         extensions: 'all', //返回行政区边界坐标等具体信息
//         level: 'district' //设置查询行政区级别为区
//       });
//       district.search(districtName, function (status, result) {
//         var bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息
//         if (bounds) {
//           for (var i = 0; i < bounds.length; i++) {
//             //生成行政区划 polygon
//             // eslint-disable-next-line no-undef
//             districtPolygon = new AMap.Polygon({
//               map: map, //显示该覆盖物的地图对象
//               strokeWeight: 1, //轮廓线宽度
//               path: bounds[i], //多边形轮廓线的节点坐标数组
//               fillOpacity: 0.6, //多边形填充透明度
//               // fillColor: '#CCF3FF', //多边形填充颜色
//               fillColor: '#0077ff',
//               // strokeColor: '#ffffff' //线条颜色
//               strokeColor: 'white', //线条颜色
//               zIndex: 9
//             });
//           }
//           map.setFitView(); //将覆盖物调整到合适视野
//         }
//       });
//     }
//   });
// }

drawDistrict('长宁区');
// drawDistrict('长宁区');
</script>

<style scoped>

 src/views/historymode/HistoryMode.vue

@@ -19,6 +19,7 @@
      <FactorLegend
        class="m-t-2"
        :factor="factorDatas.factor[factorType]"
        @change="handleLegendTypeChange"
      ></FactorLegend>
    </el-row>
    <el-row class="historical" justify="center">
@@ -134,12 +135,21 @@
        this.sceneStore.searchScene(lng, lat);
      }
    },
    handleLegendTypeChange(value, done) {
      if (value) {
        this.factorDatas.resetRange();
      } else {
        this.factorDatas.standardRange();
      }
      done();
      this.draw();
    },
    draw() {
      // åˆ·æ–°å›¾ä¾‹
      const factor = this.factorDatas.factor[this.factorType];
      sector.clearSector();
      this.drawRoadLine(factor);
      // this.drawRoadMap(factor);
      // this.drawRoadLine(factor);
      this.drawRoadMap(factor);
      this.drawMassMarks(factor);
    },
    // ç»˜åˆ¶3D走行路线图

 src/views/satellitetelemetry/SatelliteTelemetry.vue

ÎļþÒÑɾ³ý

 src/views/underwaymix/UnderwayMixMode.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,6 @@
<template>
  <div class="p-events-none m-t-2"></div>
</template>

<script setup></script>
<style scoped></style>