走航融合（待完成）

Riku

2025-03-20 7d02024c5351e620dcc2d49f36331e4a37228ea4

走航融合（待完成）

 src/model/SatelliteGrid.js

@@ -196,11 +196,7 @@
    // 根据绘制颜色方式绘制网格
    let resGridViews;
    if (customColor) {
      resGridViews = gridMapUtil.drawGridColorCustom(
        res,
        gridDataDetail,
        style.opacity
      );
      resGridViews = gridMapUtil.drawGridColorCustom(res, gridDataDetail);
    } else {
      resGridViews = gridMapUtil.drawGridColor(
        res,
@@ -383,8 +379,7 @@
          if (useCustomColor) {
            gridMapUtil.drawGridColorCustom(
              v.lastGridViews,
              lastGridDataDetail,
              { opacity, zIndex }
              lastGridDataDetail
            );
          } else {
            gridMapUtil.drawGridColor(
@@ -435,18 +430,19 @@
  /**
   * 将多组网格进行融合
   * 重叠的网格进行监测数据均值计算并重新计算对应颜色，形成新的一组融合网格
   * @param {...String} tags 需要融合的网格标签，当为空时，默认融合所有网格
   * @param {Array} tags 需要融合的网格标签，当为空时，默认融合所有网格
   */
  mixGrid(tags) {
  mixGrid(tags, isMixGridHighlight) {
    tags.sort((a, b) => {
      return a < b ? -1 : 1;
    });
    const mixTag = tags.join('-');
    if (this.mapViewsMap.has(mixTag)) {
      this.changeVisibility({
        tag: mixTag,
        tags: [mixTag],
        showGridViews: true
      });
      this.changeGridColor({ tag: mixTag, isMixGridHighlight });
    } else {
      // const mixMapViews = this._createNewMapViews();
      // 根据标签tag，获取对应多组网格数据
@@ -501,11 +497,13 @@
        data: resGridDataDetail,
        grid: {
          style: {
            isMixGridHighlight: true
            isMixGridHighlight:
              isMixGridHighlight == undefined ? true : isMixGridHighlight
          }
        },
        extData: {
          name: `走航融合 - ${mixTag}`
          name: `走航融合 - ${mixTag}`,
          type: 1
        }
      });
    }
@@ -513,6 +511,14 @@
    return mixTag;
  }

  /**
   * 绘制热力图网格
   * @param {string} tag
   */
  drawHeatGrid(tag) {
    
  }

  _getMapViews(...tags) {
    let _mapViewsList = [],
      _gridDataDetailList = [];

 src/utils/map/grid.js

@@ -264,7 +264,8 @@
        strokeWeight: 1, //线条宽度，默认为 2
        strokeColor: 'white', //线条颜色
        fillOpacity: 0,
        extData: p.extData
        extData: p.extData,
        zIndex: 11
      });

      if (typeof event === 'function') {
@@ -349,7 +350,12 @@
   * @param {number} opacity 透明度
   */
  drawGridColor(gridViews, gridDataDetail, factorName, style) {
    let { strokeWeight, strokeColor, opacity, zIndex } = style;
    let {
      strokeWeight = 1,
      strokeColor = 'white',
      opacity = 1,
      zIndex = 11
    } = style;
    const res = [];
    // 遍历卫星遥测数据数组
    gridDataDetail.forEach((d, i) => {
@@ -369,9 +375,11 @@

        const _extData = grid.getExtData();
        grid.setOptions({
          ...style,
          strokeWeight,
          strokeColor,
          zIndex,
          fillColor: _color, //多边形填充颜色
          fillOpacity: style.opacity ? style.opacity : color[3] == 0 ? 0 : 1,
          fillOpacity: opacity,
          extData: {
            ..._extData,
            gridData: d
@@ -393,8 +401,7 @@
    return res;
  },

  drawGridColorCustom(gridViews, gridDataDetail, style) {
    const { strokeWeight, strokeColor, opacity, zIndex } = style;
  drawGridColorCustom(gridViews, gridDataDetail) {

    var max, min;
    gridDataDetail.forEach((t) => {
@@ -424,9 +431,8 @@
          ratio
        );
        grid.setOptions({
          ...style,
          fillColor: _color, //多边形填充颜色
          fillOpacity: style.opacity ? style.opacity : color[3] == 0 ? 0 : 1
          // fillOpacity: style.opacity ? style.opacity : color[3] == 0 ? 0 : 1
        });

        res.push(grid);

 src/views/underwaymix/UnderwayMixMode.vue

@@ -259,7 +259,8 @@
          tag: d.id,
          data: gdd,
          extData: {
            name: `走航网格 - ${d.mixDataId}`
            name: `走航网格 - ${d.mixDataId}`,
            type: 0
          }
        });
        gridCtrls.value = [satelliteGrid];

 src/views/underwaymix/component/GridStyleTool.vue

@@ -16,7 +16,7 @@
            <div v-for="(g, i) in gridCtrlList" :key="i">
              {{ g.name }}
              <div v-for="(value, t) in g.views" :key="t">
                <!-- {{ value[0] }} -->
                <span v-if="value.extData.type == 0">{{ value.tag + '.' }}</span>
                {{ value.extData.name }}
                <!-- {{ key }} -->
                <!-- <el-text>{{ g.name }}</el-text> -->
@@ -53,10 +53,18 @@
                  >
                  </CheckButton>
                  <CheckButton
                    v-if="value.extData.type == 0"
                    active-text="显示走航轨迹"
                    inactive-text="隐藏走航轨迹"
                    :default-value="false"
                    @change="(e) => handleUnderwayClick(e, i, value)"
                  >
                  </CheckButton>
                  <CheckButton
                    v-if="value.extData.type == 1"
                    active-text="高亮融合网格"
                    :default-value="true"
                    @change="(e) => handleHighlightGridClick(e, i, value)"
                  >
                  </CheckButton>
                </el-row>
@@ -188,11 +196,18 @@
    dataId: value.tag
  });
}

function handleHighlightGridClick(e, index, value) {
  toRaw(props.gridCtrls[index]).mixGrid(value.tag.split('-'), e);
}
</script>
<style scoped>
.content-wrap {
  min-width: 300px;
  min-height: 600px;
  max-height: 80vh;
  height: 80vh;
  padding: 4px 16px;
}

:deep(.el-input-number) {