From b33e28bc2843555355ecad59a80c83e3c26445a3 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期一, 01 九月 2025 17:29:36 +0800
Subject: [PATCH] 走航季度报告模块(待完成)

---
 src/model/SatelliteGrid.js |  534 ++++++++++++++++++++++++++++++++++++++++++++++++-----------
 1 files changed, 432 insertions(+), 102 deletions(-)

diff --git a/src/model/SatelliteGrid.js b/src/model/SatelliteGrid.js
index dad244c..af3f0f7 100644
--- a/src/model/SatelliteGrid.js
+++ b/src/model/SatelliteGrid.js
@@ -1,7 +1,11 @@
+import { reactive } from 'vue';
 import calculate from '@/utils/map/calculate';
 import gridMapUtil from '@/utils/map/grid';
 import { map, onMapMounted } from '@/utils/map/index_old';
-import { useCloned } from '@vueuse/core';
+import { getGridDataDetailFactorValue } from '@/model/GridDataDetail';
+import { useGridStore } from '@/stores/grid-info';
+
+const gridStore = useGridStore();
 
 /**
  * 鍗槦閬ユ祴缃戞牸绠$悊
@@ -10,16 +14,18 @@
   constructor(name) {
     this.name = name;
   }
+
+  gridGroupId;
+
   // 榛樿鍦板浘缃戞牸鐩稿叧瀵硅薄
   mapViews;
-
+  gridState;
   gridDataDetail;
-
-  infoMap = new Map();
 
   // 鍦板浘缃戞牸瀵硅薄Map缁撴瀯锛屽瓨鍌ㄥ搴攌ey涓嬬殑缃戞牸瀵硅薄銆佺綉鏍煎潗鏍囦俊鎭�
   mapViewsMap = new Map();
-
+  // 鍦板浘缃戞牸瀵硅薄鐨勫弬鏁扮姸鎬�
+  gridStateMap = new Map();
   // 缃戞牸鏁版嵁Map缁撴瀯锛屽瓨鍌ㄥ搴攌ey涓嬬殑缃戞牸鐩戞祴鏁版嵁淇℃伅
   gridDataDetailMap = new Map();
 
@@ -28,6 +34,14 @@
   firstEvent;
 
   events = new Map();
+
+  selectedFactorType;
+
+  setShowFactorType(e) {
+    this.selectedFactorType = e;
+    this.changeGridColor({ factorName: e.name });
+    this.changeText({ factorName: e.name });
+  }
 
   // 缁樺埗鍖哄幙杈圭晫
   drawDistrict(districtName, isNew) {
@@ -132,8 +146,7 @@
     const data = gridDataDetail.map((v, i) => {
       return {
         lnglat_GD: points[i],
-        // data: v.pm25 ? (v.pm25 + '渭g/m鲁') : ''
-        data: v.pm25 ? v.pm25 : ''
+        data: getGridDataDetailFactorValue(v, this.selectedFactorType.name)
       };
     });
     // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
@@ -143,8 +156,54 @@
       anchor: 'top-center',
       type: 'data',
       isCustomColor,
-      useColor
+      useColor,
+      factorName: this.selectedFactorType.name
     });
+  }
+
+  changeText({ tags = [], factorName, isCustomColor, useColor, type }) {
+    let { _mapViewsList, _gridDataDetailList } = this._getMapViews(...tags);
+    if (_mapViewsList.length == _gridDataDetailList.length) {
+      _mapViewsList.forEach((v, i) => {
+        if (v.dataTxt) {
+          let dataList = [];
+          if (type == 'data' || type == undefined) {
+            dataList.push({
+              type: 'data',
+              data: _gridDataDetailList[i].map((v) => {
+                return {
+                  data: getGridDataDetailFactorValue(
+                    v,
+                    factorName ? factorName : this.selectedFactorType.name
+                  )
+                };
+              })
+            });
+          }
+          if (type == 'rank' || type == undefined) {
+            dataList.push({
+              type: 'rank',
+              data: _gridDataDetailList[i].map((v) => {
+                return {
+                  data: v.rank ? v.rank : ''
+                };
+              })
+            });
+          }
+
+          dataList.forEach((d) => {
+            gridMapUtil.changeGridText({
+              points: d.data,
+              textViews: d.type == 'data' ? v.dataTxt : v.rankTxt,
+              type: d.type,
+              isCustomColor,
+              useColor,
+              factorName: factorName ? factorName : this.selectedFactorType.name
+            });
+          });
+        }
+      });
+    }
   }
 
   // 缁樺埗鐩戞祴鏁版嵁鎺掑悕鏂囨湰
@@ -152,8 +211,7 @@
     const data = gridDataDetail.map((v, i) => {
       return {
         lnglat_GD: points[i],
-        // data: v.pm25 ? ('鎺掑悕: ' + v.rank) : ''
-        data: v.pm25 ? v.rank : ''
+        data: v.rank ? v.rank : ''
       };
     });
     // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
@@ -161,7 +219,8 @@
       points: data,
       textViews,
       anchor: 'bottom-center',
-      type: 'rank'
+      type: 'rank',
+      factorName: this.selectedFactorType.name
     });
   }
 
@@ -199,13 +258,13 @@
       resGridViews = gridMapUtil.drawGridColorCustom(
         res,
         gridDataDetail,
-        style.opacity
+        this.selectedFactorType.name
       );
     } else {
       resGridViews = gridMapUtil.drawGridColor(
         res,
         gridDataDetail,
-        'PM25',
+        this.selectedFactorType.name,
         style
       );
     }
@@ -214,7 +273,7 @@
       map.remove(lastGridViews);
     }
     map.add(resGridViews);
-    // map.setFitView(resGridViews);
+    map.setFitView(resGridViews);
 
     return { resGridViews, pointsRes };
   }
@@ -229,13 +288,20 @@
   // 缁樺埗缃戞牸閬ユ劅鏁版嵁鍊煎拰缃戞牸棰滆壊
   drawGrid({
     mapViews,
+    gridState,
     data,
-    grid = { useCustomColor: false, style: { opacity: 1, zIndex: 11 } },
+    grid = {
+      useCustomColor: false,
+      style: { opacity: 1, zIndex: 11, isMixGridHighlight: false }
+    },
     dataTxt = { isShow: false, useCustomColor: false, useColor: false },
     rankTxt = { isShow: false }
   }) {
+    // 纭畾缁樺埗鐨勭綉鏍肩粍鍙婂叾鍙傛暟瀵硅薄
     const _mapViews = mapViews ? mapViews : this.mapViews;
-    this.gridDataDetail = data;
+    const _gridState = gridState ? gridState : this.gridState;
+
+    // 鏍规嵁缃戞牸鏁版嵁缁樺埗瀵瑰簲鐨勭綉鏍�
     const { resGridViews, pointsRes } = this.drawColor({
       gridViews: _mapViews.gridViews,
       points: _mapViews.points,
@@ -244,10 +310,17 @@
       customColor: grid.useCustomColor,
       style: grid.style
     });
+    // 淇濆瓨鍦板浘缃戞牸鍥惧舰瀵硅薄鍜岀粡绾害瀵硅薄
     _mapViews.lastGridViews = resGridViews;
     _mapViews.lastPoints = pointsRes;
+    // 鏇存柊缃戞牸鐘舵�佸弬鏁�
+    _gridState.showGrid = true;
+    _gridState.showGridCustomColor = false;
+    _gridState.gridOpacityValue = grid.style.opacity;
+    _gridState.gridZIndex = grid.style.zIndex;
+    _gridState.highlightFusionGrid = grid.style.isMixGridHighlight;
 
-    // 鏁版嵁鏍囪
+    // 缁樺埗鏁版嵁鏂囨湰
     const { textViews: dtv } = this.drawDataText(
       _mapViews.lastPoints,
       data,
@@ -256,7 +329,12 @@
       dataTxt.useColor
     );
     _mapViews.dataTxt = dtv;
+    // 鏇存柊鏁版嵁鏂囨湰鐘舵�佸弬鏁�
+    _gridState.showData = dataTxt.isShow;
+    _gridState.showDataColor = dataTxt.useColor;
+    _gridState.showDataCustomColor = dataTxt.useCustomColor;
 
+    // 缁樺埗鎺掑悕鏂囨湰
     const { textViews: rtv } = this.drawRankText(
       _mapViews.lastPoints,
       data,
@@ -264,6 +342,8 @@
       _mapViews.rankLayer
     );
     _mapViews.rankTxt = rtv;
+    // 鏇存柊鎺掑悕鏂囨湰鐘舵�佸弬鏁�
+    _gridState.showRank = rankTxt.isShow;
 
     if (dataTxt.isShow) {
       map.add(_mapViews.dataTxt);
@@ -290,13 +370,17 @@
   drawTagGrid({ tag, data, grid, dataTxt, rankTxt, extData }) {
     if (!this.mapViewsMap.has(tag)) {
       const newMapViews = this._createNewMapViews({ extData });
-      this.infoMap.set(tag, extData);
+      const newGridState = this._createNewGridState({ extData });
       this.mapViewsMap.set(tag, newMapViews);
+      map.on('zoomend', newMapViews.mapZoomEvent);
+      this.gridStateMap.set(tag, newGridState);
       this.gridDataDetailMap.set(tag, data);
     }
     const _mapViews = this.mapViewsMap.get(tag);
+    const _gridState = this.gridStateMap.get(tag);
     this.drawGrid({
       mapViews: _mapViews,
+      gridState: _gridState,
       data,
       grid,
       dataTxt,
@@ -304,55 +388,90 @@
     });
   }
 
+  /**
+   * 鏍规嵁鏍囩鍒犻櫎瀵瑰簲鐨勭綉鏍硷紝鍚屾椂绉婚櫎鍦板浘缂╂斁浜嬩欢绛�
+   * @param {*} tags 缃戞牸鏍囩鏁扮粍
+   */
+  deleteTagGrid(tags) {
+    this.changeVisibility({
+      tags,
+      showGridViews: false,
+      showDataTxt: false,
+      showRankTxt: false
+    });
+    tags.forEach((t) => {
+      const { mapZoomEvent } = this.mapViewsMap.get(t);
+      map.off('zoomend', mapZoomEvent);
+      this.mapViewsMap.delete(t);
+      this.gridDataDetailMap.delete(t);
+      this.gridStateMap.delete(t);
+    });
+  }
+
   // 璋冩暣鍚勭被鍦板浘瑕嗙洊鐗╃殑鍙鎬�
   changeVisibility({ tags = [], showGridViews, showDataTxt, showRankTxt }) {
-    let { _mapViewsList } = this._getMapViews(...tags);
+    let { _mapViewsList, _gridStateList } = this._getMapViews(...tags);
 
     if (showGridViews != undefined) {
       if (showGridViews) {
-        // map.add(this.mapViews.lastGridViews);
-        _mapViewsList.forEach((v) => {
-          if (v.lastGridViews) map.add(v.lastGridViews);
+        _mapViewsList.forEach((v, i) => {
+          if (v.lastGridViews) {
+            map.add(v.lastGridViews);
+            _gridStateList[i].showGrid = true;
+          }
         });
       } else {
-        // map.remove(this.mapViews.lastGridViews);
-        _mapViewsList.forEach((v) => {
-          if (v.lastGridViews) map.remove(v.lastGridViews);
+        _mapViewsList.forEach((v, i) => {
+          if (v.lastGridViews) {
+            map.remove(v.lastGridViews);
+            _gridStateList[i].showGrid = false;
+            _gridStateList[i].showHeatMap = false;
+          }
         });
       }
     }
     if (showDataTxt != undefined) {
       if (showDataTxt) {
-        // map.add(this.mapViews.dataTxt);
-        _mapViewsList.forEach((v) => {
-          if (v.dataTxt) map.add(v.dataTxt);
+        _mapViewsList.forEach((v, i) => {
+          if (v.dataTxt) {
+            map.add(v.dataTxt);
+            _gridStateList[i].showData = true;
+          }
         });
       } else {
-        // map.remove(this.mapViews.dataTxt);
-        _mapViewsList.forEach((v) => {
-          if (v.dataTxt) map.remove(v.dataTxt);
+        _mapViewsList.forEach((v, i) => {
+          if (v.dataTxt) {
+            map.remove(v.dataTxt);
+            _gridStateList[i].showData = false;
+          }
         });
       }
     }
     if (showRankTxt != undefined) {
       if (showRankTxt) {
-        // map.add(this.mapViews.rankTxt);
-        _mapViewsList.forEach((v) => {
-          if (v.rankTxt) map.add(v.rankTxt);
+        _mapViewsList.forEach((v, i) => {
+          if (v.rankTxt) {
+            map.add(v.rankTxt);
+            _gridStateList[i].showRank = true;
+          }
         });
       } else {
-        // map.remove(this.mapViews.rankTxt);
-        _mapViewsList.forEach((v) => {
-          if (v.rankTxt) map.remove(v.rankTxt);
+        _mapViewsList.forEach((v, i) => {
+          if (v.rankTxt) {
+            map.remove(v.rankTxt);
+            _gridStateList[i].showRank = false;
+          }
         });
       }
     }
   }
 
   changeGridOpacity({ tag, isOpacity, opacityValue }) {
-    let { _mapViewsList } = tag ? this._getMapViews(tag) : this._getMapViews();
+    let { _mapViewsList, _gridStateList } = tag
+      ? this._getMapViews(tag)
+      : this._getMapViews();
 
-    _mapViewsList.forEach((v) => {
+    _mapViewsList.forEach((v, i) => {
       if (v.lastGridViews) {
         v.lastGridViews.forEach((e) => {
           e.setOptions({
@@ -364,33 +483,43 @@
                   : 0.7
           });
         });
+        _gridStateList[i].gridOpacityValue = opacityValue;
       }
     });
   }
 
   changeGridColor({
-    tag,
+    tags = [],
+    factorName,
     useCustomColor,
     opacity,
     zIndex,
     isMixGridHighlight
   }) {
-    let { _mapViewsList, _gridDataDetailList } = this._getMapViews(tag);
+    let { _mapViewsList, _gridDataDetailList, _gridStateList } =
+      this._getMapViews(...tags);
     if (_mapViewsList.length == _gridDataDetailList.length) {
       _mapViewsList.forEach((v, i) => {
         if (v.lastGridViews) {
           const lastGridDataDetail = _gridDataDetailList[i];
+          const _gridState = _gridStateList[i];
+          if (useCustomColor != undefined)
+            _gridState.showGridCustomColor = useCustomColor;
           if (useCustomColor) {
             gridMapUtil.drawGridColorCustom(
               v.lastGridViews,
               lastGridDataDetail,
-              { opacity, zIndex }
+              factorName ? factorName : this.selectedFactorType.name
             );
           } else {
+            if (opacity != undefined) _gridState.gridOpacityValue = opacity;
+            if (zIndex != undefined) _gridState.gridZIndex = zIndex;
+            if (isMixGridHighlight != undefined)
+              _gridState.highlightFusionGrid = isMixGridHighlight;
             gridMapUtil.drawGridColor(
               v.lastGridViews,
               lastGridDataDetail,
-              'PM25',
+              factorName ? factorName : this.selectedFactorType.name,
               { opacity, zIndex, isMixGridHighlight }
             );
           }
@@ -399,20 +528,67 @@
     }
   }
 
-  setGridEvent(name, event) {
+  setGridEvent(tags, name, event) {
+    const { _mapViewsList, _gridDataDetailList } = this._getMapViews(...tags);
+
     if (!this.events.has(name)) {
       this.events.set(name, []);
     }
     const list = this.events.get(name);
     if (list.length > 0) {
       const lastEvent = list[list.length - 1];
-      this.mapViews.gridViews.forEach((polygon) => {
-        polygon.off(name, lastEvent);
+      _mapViewsList.forEach((v) => {
+        v.gridViews.forEach((polygon) => {
+          polygon.off(name, lastEvent);
+        });
       });
     }
+
     this.events.get(name).push(event);
-    this.mapViews.gridViews.forEach((polygon) => {
-      polygon.on(name, event);
+    _mapViewsList.forEach((v, i) => {
+      const gridDataDetailList = _gridDataDetailList[i];
+      v.gridViews.forEach((polygon) => {
+        const { gridCell } = polygon.getExtData();
+        const cellIndex = gridCell.cellIndex;
+        const gridDataDetail = gridDataDetailList.find(
+          (v) => v.cellId == cellIndex
+        );
+        polygon.on(name, (e) => {
+          event({ gridCell, gridDataDetail, polygon, extData: v.extData });
+        });
+      });
+    });
+  }
+
+  setDefaultGridClickEvent(tags) {
+    this.setGridEvent(
+      tags,
+      'click',
+      ({ gridCell, gridDataDetail, extData }) => {
+        gridStore.selectedGridCellAndDataDetail = {
+          gridCell,
+          gridDataDetail,
+          extData
+        };
+      }
+    );
+
+    //榧犳爣绉诲叆浜嬩欢
+    this.setGridEvent(tags, 'mouseover', ({ polygon }) => {
+      const ext = polygon.getExtData();
+      const originOption = polygon.getOptions();
+      ext.originOption = originOption;
+      polygon.setOptions({
+        strokeWeight: 2,
+        strokeColor: 'red'
+      });
+      polygon.setExtData(ext);
+    });
+
+    //榧犳爣绉诲嚭浜嬩欢
+    this.setGridEvent(tags, 'mouseout', ({ polygon }) => {
+      const ext = polygon.getExtData();
+      polygon.setOptions(ext.originOption);
     });
   }
 
@@ -435,77 +611,40 @@
   /**
    * 灏嗗缁勭綉鏍艰繘琛岃瀺鍚�
    * 閲嶅彔鐨勭綉鏍艰繘琛岀洃娴嬫暟鎹潎鍊艰绠楀苟閲嶆柊璁$畻瀵瑰簲棰滆壊锛屽舰鎴愭柊鐨勪竴缁勮瀺鍚堢綉鏍�
-   * @param {...String} tags 闇�瑕佽瀺鍚堢殑缃戞牸鏍囩锛屽綋涓虹┖鏃讹紝榛樿铻嶅悎鎵�鏈夌綉鏍�
+   * @param {Array} tags 闇�瑕佽瀺鍚堢殑缃戞牸鏍囩锛屽綋涓虹┖鏃讹紝榛樿铻嶅悎鎵�鏈夌綉鏍�
    */
-  mixGrid(tags) {
+  mixGrid2({ tags, isMixGridHighlight = true, gridDataDetailList }) {
     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({ tags: [mixTag], isMixGridHighlight });
     } else {
-      // const mixMapViews = this._createNewMapViews();
-      // 鏍规嵁鏍囩tag锛岃幏鍙栧搴斿缁勭綉鏍兼暟鎹�
-      let { _gridDataDetailList } = this._getMapViews(...tags);
-      const _dataMap = new Map();
-      // 灏嗘瘡缁勬瘡涓綉鏍兼暟鎹寜鐓х綉鏍肩紪鍙疯繘琛屽垎绫伙紝鐩稿悓缃戞牸鐨勬暟缁勫綊闆嗚嚦涓�璧�
-      _gridDataDetailList.forEach((list) => {
-        list.forEach((gdd) => {
-          if (!_dataMap.has(gdd.cellId)) {
-            _dataMap.set(gdd.cellId, {
-              source: [],
-              res: {}
-            });
-          }
-          _dataMap.get(gdd.cellId).source.push(gdd);
-        });
-      });
-      // 璁$畻姣忎釜缃戞牸涓嬬殑鏁版嵁鍧囧��
-      const resGridDataDetail = [];
-      _dataMap.forEach((v, k) => {
-        let total = 0,
-          count = v.source.length;
-        v.source.forEach((s) => {
-          total += s.pm25;
-        });
-        v.res = {
-          isMixData: true,
-          groupId: v.source[0].groupId,
-          cellId: v.source[0].cellId,
-          pm25: count == 0 ? null : Math.round((total / count) * 10) / 10,
-          originData: v.source
-        };
-        // 鏁版嵁閲忚秴杩�1涓椂锛岃〃鏄庤缃戞牸鏁版嵁鏄瀺鍚堢殑锛屽睍绀洪珮浜殑鏍峰紡
-        if (count > 1) {
-          v.res.gridStyle = {
+      gridDataDetailList.forEach((gdd) => {
+        // 缃戞牸鏁版嵁鏄瀺鍚堢殑锛屽睍绀洪珮浜殑鏍峰紡
+        if (gdd.mixData) {
+          gdd.gridStyle = {
             strokeWeight: 2,
-            strokeColor: 'blue'
+            strokeColor: '#23dad1'
           };
         }
-        resGridDataDetail.push(v.res);
       });
-      // 閲嶆柊鎸夌収鐩戞祴鏁版嵁鎺掑簭骞舵爣璁版帓鍚�
-      resGridDataDetail.sort((a, b) => {
-        return b.pm25 - a.pm25;
-      });
-      resGridDataDetail.forEach((gdd, i) => {
-        gdd.rank = i + 1;
-      });
-
       this.drawTagGrid({
         tag: mixTag,
-        data: resGridDataDetail,
+        data: gridDataDetailList,
         grid: {
           style: {
-            isMixGridHighlight: true
+            isMixGridHighlight
           }
         },
         extData: {
-          name: `璧拌埅铻嶅悎 - ${mixTag}`
+          name: `璧拌埅铻嶅悎 - ${mixTag}`,
+          type: 1
         }
       });
     }
@@ -513,14 +652,157 @@
     return mixTag;
   }
 
+  drawHeatGrid2(tag, headGridDataDetailList) {
+    const heatTag = `heat-${tag}`;
+    if (this.gridStateMap.has(tag)) {
+      this.gridStateMap.get(tag).showHeatMap = true;
+    }
+    if (this.mapViewsMap.has(heatTag)) {
+      this.changeVisibility({
+        tags: [heatTag],
+        showGridViews: true
+      });
+    } else {
+      this.drawTagGrid({
+        tag: heatTag,
+        data: headGridDataDetailList,
+        extData: {
+          name: `璧拌埅鐑姏鍥� - ${heatTag}`,
+          type: 2
+        }
+      });
+    }
+    return heatTag;
+  }
+
+  search(gdd, width, height, eachwidth, eachheight, searchLength) {
+    function getCellWidthRange(cellId, width, height) {
+      const total = width * height;
+      const x = Math.ceil(cellId / total) - 1;
+      let first = 1 + x * total,
+        last = width + x * total;
+
+      let scale = 0;
+      while (scale < height) {
+        const min = first + scale * width;
+        const max = last + scale * width;
+        if (cellId >= min && cellId <= max) {
+          return [min, max];
+        }
+        scale++;
+      }
+    }
+
+    const cellId = gdd.cellId;
+    // const minData = gdd.pm25 / 2
+    const dataOffset = (gdd.pm25 - gdd.pm25 / 2) / 3;
+
+    const hOffset = eachwidth;
+    const wOffset = 1;
+
+    const cellIdMin = 1;
+    const cellIdMax = width * height;
+
+    let searchWidth = 0 - searchLength,
+      searchHeight = 0 - searchLength;
+
+    const result = [];
+
+    const eachRange = getCellWidthRange(cellId, eachwidth, eachheight);
+    const groupRange = getCellWidthRange(
+      Math.ceil(cellId / (eachwidth * eachheight)),
+      width / eachwidth,
+      height / eachheight
+    );
+
+    for (let w = searchWidth; w <= searchLength; w++) {
+      // 鍏堣繘琛屾í鍚戠殑鍧愭爣鍙樻崲
+      let _cellId = cellId + w * wOffset;
+      if (_cellId < eachRange[0] || _cellId > eachRange[1]) {
+        const cellOffset =
+          _cellId < eachRange[0]
+            ? _cellId - eachRange[0]
+            : _cellId - eachRange[1];
+
+        const groupOffset = Math[cellOffset / eachwidth > 0 ? 'ceil' : 'floor'](
+          cellOffset / eachwidth
+        );
+
+        const newEachRange = eachRange.map(
+          (r) => r + groupOffset * eachwidth * eachheight
+        );
+
+        _cellId =
+          groupOffset > 0
+            ? newEachRange[0] + cellOffset - wOffset
+            : newEachRange[1] + cellOffset + wOffset;
+
+        const _groupId = Math.ceil(_cellId / (eachwidth * eachheight));
+
+        if (_groupId < groupRange[0] || _groupId > groupRange[1]) {
+          continue;
+        }
+      }
+
+      for (let h = searchHeight; h <= searchLength; h++) {
+        if (w == 0 && h == 0) continue;
+
+        const _eachRange = getCellWidthRange(_cellId, eachwidth, eachheight);
+        // if (_eachRange == undefined) {
+        //   console.log();
+
+        // }
+        const wOffset = _cellId - _eachRange[0];
+        let _resCellId = _cellId + h * hOffset;
+        if (_resCellId < cellIdMin || _resCellId > cellIdMax) continue;
+
+        const total = eachwidth * eachheight;
+        const x = Math.ceil(_cellId / total) - 1;
+        const eachCellIdMin = 1 + x * total;
+        const eachCellIdMax = total + x * total;
+        const topCell = eachCellIdMin + wOffset;
+        const bottomCell = eachCellIdMax - eachwidth + 1 + wOffset;
+        if (_resCellId < eachCellIdMin || _resCellId > eachCellIdMax) {
+          const cellOffset =
+            _resCellId < eachCellIdMin
+              ? _resCellId - topCell
+              : _resCellId - bottomCell;
+
+          const newTopCell =
+            cellOffset > 0
+              ? topCell + width * eachheight
+              : topCell - width * eachheight;
+          const newBottomCell =
+            cellOffset > 0
+              ? bottomCell + width * eachheight
+              : bottomCell - width * eachheight;
+
+          _resCellId =
+            cellOffset > 0
+              ? newTopCell + cellOffset - hOffset
+              : newBottomCell + cellOffset + hOffset;
+        }
+        result.push({
+          groupId: gdd.groupId,
+          cellId: _resCellId,
+          pm25: gdd.pm25 - Math.max(Math.abs(w), Math.abs(h)) * dataOffset
+        });
+      }
+    }
+
+    return result;
+  }
+
   _getMapViews(...tags) {
     let _mapViewsList = [],
-      _gridDataDetailList = [];
+      _gridDataDetailList = [],
+      _gridStateList = [];
     if (tags.length > 0) {
       tags.forEach((tag) => {
         if (this.mapViewsMap.has(tag) && this.gridDataDetailMap.has(tag)) {
           _mapViewsList.push(this.mapViewsMap.get(tag));
           _gridDataDetailList.push(this.gridDataDetailMap.get(tag));
+          _gridStateList.push(this.gridStateMap.get(tag));
         }
       });
     } else {
@@ -530,16 +812,20 @@
       this.gridDataDetailMap.forEach((v) => {
         _gridDataDetailList.push(v);
       });
-      if (this.mapViews && this.gridDataDetail) {
+      this.gridStateMap.forEach((v) => {
+        _gridStateList.push(v);
+      });
+      if (this.mapViews && this.gridDataDetail && this.gridState) {
         _mapViewsList.push(this.mapViews);
         _gridDataDetailList.push(this.gridDataDetail);
+        _gridStateList.push(this.gridState);
       }
     }
 
-    return { _mapViewsList, _gridDataDetailList };
+    return { _mapViewsList, _gridDataDetailList, _gridStateList };
   }
 
-  _createNewMapViews({ extData }) {
+  _createNewMapViews({ tag, extData }) {
     return {
       gridViews: gridMapUtil.drawPolylines({
         points: this.mapViews.gridPoints,
@@ -547,6 +833,50 @@
       }),
       gridPoints: JSON.parse(JSON.stringify(this.mapViews.gridPoints)),
       points: JSON.parse(JSON.stringify(this.mapViews.points)),
+      extData,
+      show: true,
+      mapZoomEvent: () => {
+        const zoomLevel = map.getZoom();
+        if (zoomLevel >= 16.5) {
+          this.changeGridOpacity({ tag, opacityValue: 0.1 });
+        } else {
+          this.changeGridOpacity({ tag, opacityValue: 1 });
+        }
+        // console.log('mapZoomEvent', map.getZoom());
+      }
+    };
+  }
+
+  _createNewGridState({ extData }) {
+    return {
+      // 缃戞牸鍚嶇О
+      name: extData.name,
+      // 缃戞牸绫诲瀷锛�0锛氳蛋鑸綉鏍硷紱1锛氳蛋鑸瀺鍚堢綉鏍硷紱2锛氳蛋鑸儹鍔涘浘
+      type: extData.type,
+      // 缃戞牸鐩稿叧鍙傛暟
+      showGrid: true, // 鏄惁鏄剧ず缃戞牸
+      showGridCustomColor: false, // 鏄惁鏄剧ず瀵规瘮鑹�
+      gridOpacityValue: 1, // 缃戞牸閫忔槑搴�
+      gridZIndex: 11, // 缃戞牸z杞撮珮搴�
+
+      // 鎺掑悕鏂囨湰鐩稿叧鍙傛暟
+      showRank: false, // 鎺掑悕鏂囨湰鏄惁鏄剧ず
+
+      // 鏁版嵁鏂囨湰鐩稿叧鍙傛暟
+      showData: false, // 鏁版嵁鏂囨湰鏄惁鏄剧ず
+      showDataColor: false, // 鏁版嵁鏂囨湰鏄惁浣跨敤瀵瑰簲鐩戞祴鍥犲瓙鐨勬爣鍑嗛鑹�
+      showDataCustomColor: false, // 鏁版嵁鏂囨湰鏄惁浣跨敤瀵瑰簲鐩戞祴鍥犲瓙鐨勫姣旈鑹�
+
+      // 鏄惁鏄剧ず瀵瑰簲鐑姏鍥�
+      showHeatMap: false,
+
+      // 濡傛灉鏄瀺鍚堢綉鏍硷紝鏄惁楂樹寒鏄剧ず閲嶅彔缃戞牸
+      highlightFusionGrid: false,
+
+      // 濡傛灉鏄櫘閫氱殑璧拌埅缃戞牸锛屾槸鍚︽樉绀哄搴旂殑璧拌埅杞ㄨ抗
+      showUnderway: false,
+
+      // 鍙兘鐨勮嚜瀹氫箟棰濆鏁版嵁
       extData
     };
   }

--
Gitblit v1.9.3