From 5e059c9c17a6d63b6c017d2d2beb25ae227071d1 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 11 四月 2025 17:33:59 +0800
Subject: [PATCH] 走航融合优化中
---
src/model/SatelliteGrid.js | 321 +++++++++++++++++++++++++++++++++--------------------
1 files changed, 201 insertions(+), 120 deletions(-)
diff --git a/src/model/SatelliteGrid.js b/src/model/SatelliteGrid.js
index ad01ca9..e2ef06d 100644
--- a/src/model/SatelliteGrid.js
+++ b/src/model/SatelliteGrid.js
@@ -1,7 +1,10 @@
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,15 +13,18 @@
constructor(name) {
this.name = name;
}
+
+ gridGroupId;
+
// 榛樿鍦板浘缃戞牸鐩稿叧瀵硅薄
mapViews;
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
});
}
@@ -196,12 +255,16 @@
// 鏍规嵁缁樺埗棰滆壊鏂瑰紡缁樺埗缃戞牸
let resGridViews;
if (customColor) {
- resGridViews = gridMapUtil.drawGridColorCustom(res, gridDataDetail);
+ resGridViews = gridMapUtil.drawGridColorCustom(
+ res,
+ gridDataDetail,
+ this.selectedFactorType.name
+ );
} else {
resGridViews = gridMapUtil.drawGridColor(
res,
gridDataDetail,
- 'PM25',
+ this.selectedFactorType.name,
style
);
}
@@ -286,7 +349,8 @@
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.gridStateMap.set(tag, newGridState);
this.mapViewsMap.set(tag, newMapViews);
this.gridDataDetailMap.set(tag, data);
}
@@ -300,6 +364,20 @@
});
}
+ deleteTagGrid(tags) {
+ this.changeVisibility({
+ tags,
+ showGridViews: false,
+ showDataTxt: false,
+ showRankTxt: false
+ });
+ tags.forEach((t) => {
+ this.mapViewsMap.delete(t);
+ this.gridDataDetailMap.delete(t);
+ this.gridStateMap.delete(t);
+ });
+ }
+
// 璋冩暣鍚勭被鍦板浘瑕嗙洊鐗╃殑鍙鎬�
changeVisibility({ tags = [], showGridViews, showDataTxt, showRankTxt }) {
let { _mapViewsList } = this._getMapViews(...tags);
@@ -308,12 +386,18 @@
if (showGridViews) {
// map.add(this.mapViews.lastGridViews);
_mapViewsList.forEach((v) => {
- if (v.lastGridViews) map.add(v.lastGridViews);
+ if (v.lastGridViews) {
+ map.add(v.lastGridViews);
+ v.show = true;
+ }
});
} else {
// map.remove(this.mapViews.lastGridViews);
_mapViewsList.forEach((v) => {
- if (v.lastGridViews) map.remove(v.lastGridViews);
+ if (v.lastGridViews) {
+ map.remove(v.lastGridViews);
+ v.show = false;
+ }
});
}
}
@@ -321,12 +405,18 @@
if (showDataTxt) {
// map.add(this.mapViews.dataTxt);
_mapViewsList.forEach((v) => {
- if (v.dataTxt) map.add(v.dataTxt);
+ if (v.dataTxt) {
+ map.add(v.dataTxt);
+ v.showData = true;
+ }
});
} else {
// map.remove(this.mapViews.dataTxt);
_mapViewsList.forEach((v) => {
- if (v.dataTxt) map.remove(v.dataTxt);
+ if (v.dataTxt) {
+ map.remove(v.dataTxt);
+ v.showData = false;
+ }
});
}
}
@@ -334,12 +424,18 @@
if (showRankTxt) {
// map.add(this.mapViews.rankTxt);
_mapViewsList.forEach((v) => {
- if (v.rankTxt) map.add(v.rankTxt);
+ if (v.rankTxt) {
+ map.add(v.rankTxt);
+ v.showRank = true;
+ }
});
} else {
// map.remove(this.mapViews.rankTxt);
_mapViewsList.forEach((v) => {
- if (v.rankTxt) map.remove(v.rankTxt);
+ if (v.rankTxt) {
+ map.remove(v.rankTxt);
+ v.showRank = false;
+ }
});
}
}
@@ -365,27 +461,30 @@
}
changeGridColor({
- tag,
+ tags = [],
+ factorName,
useCustomColor,
opacity,
zIndex,
isMixGridHighlight
}) {
- let { _mapViewsList, _gridDataDetailList } = this._getMapViews(tag);
+ let { _mapViewsList, _gridDataDetailList } = this._getMapViews(...tags);
if (_mapViewsList.length == _gridDataDetailList.length) {
_mapViewsList.forEach((v, i) => {
if (v.lastGridViews) {
+ if (useCustomColor != undefined) v.showCustomColor = useCustomColor;
const lastGridDataDetail = _gridDataDetailList[i];
- if (useCustomColor) {
+ if (v.showCustomColor) {
gridMapUtil.drawGridColorCustom(
v.lastGridViews,
- lastGridDataDetail
+ lastGridDataDetail,
+ factorName ? factorName : this.selectedFactorType.name
);
} else {
gridMapUtil.drawGridColor(
v.lastGridViews,
lastGridDataDetail,
- 'PM25',
+ factorName ? factorName : this.selectedFactorType.name,
{ opacity, zIndex, isMixGridHighlight }
);
}
@@ -420,9 +519,41 @@
(v) => v.cellId == cellIndex
);
polygon.on(name, (e) => {
- event(gridCell, gridDataDetail);
+ 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);
});
}
@@ -447,7 +578,7 @@
* 閲嶅彔鐨勭綉鏍艰繘琛岀洃娴嬫暟鎹潎鍊艰绠楀苟閲嶆柊璁＄畻瀵瑰簲棰滆壊锛屽舰鎴愭柊鐨勪竴缁勮瀺鍚堢綉鏍�
* @param {Array} tags 闇�瑕佽瀺鍚堢殑缃戞牸鏍囩锛屽綋涓虹┖鏃讹紝榛樿铻嶅悎鎵�鏈夌綉鏍�
*/
- mixGrid(tags, isMixGridHighlight) {
+ mixGrid({ tags, isMixGridHighlight = true }) {
tags.sort((a, b) => {
return a < b ? -1 : 1;
});
@@ -457,9 +588,8 @@
tags: [mixTag],
showGridViews: true
});
- this.changeGridColor({ tag: mixTag, isMixGridHighlight });
+ this.changeGridColor({ tags: [mixTag], isMixGridHighlight });
} else {
- // const mixMapViews = this._createNewMapViews();
// 鏍规嵁鏍囩tag锛岃幏鍙栧搴斿缁勭綉鏍兼暟鎹�
let { _gridDataDetailList } = this._getMapViews(...tags);
const _dataMap = new Map();
@@ -494,7 +624,7 @@
if (count > 1) {
v.res.gridStyle = {
strokeWeight: 2,
- strokeColor: 'blue'
+ strokeColor: '#23dad1'
};
}
resGridDataDetail.push(v.res);
@@ -512,8 +642,7 @@
data: resGridDataDetail,
grid: {
style: {
- isMixGridHighlight:
- isMixGridHighlight == undefined ? true : isMixGridHighlight
+ isMixGridHighlight
}
},
extData: {
@@ -526,107 +655,43 @@
return mixTag;
}
- /**
- * 缁樺埗鐑姏鍥剧綉鏍�
- * @param {string} tag
- */
- drawHeatGrid(tag) {
- if (!this.mapViewsMap.has(tag) || !this.gridDataDetailMap.has(tag)) {
- return;
- }
-
- const heatTag = `heat-${tag}`;
- if (this.mapViewsMap.has(heatTag)) {
+ 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({
- tags: [heatTag],
+ tags: [mixTag],
showGridViews: true
});
+ this.changeGridColor({ tags: [mixTag], isMixGridHighlight });
} else {
- const _mapViews = this.mapViewsMap.get(tag);
- const _gridDataDetail = this.gridDataDetailMap.get(tag);
- // const groupId = _gridDataDetail[0].groupId;
- // const cellId = _gridDataDetail.cellId;
-
- const originCellIdList = _gridDataDetail.map((v) => v.cellId);
- let headGridDataDetailList = [];
-
- const width = 120;
- const height = 90;
- const eachwidth = 10;
- const eachheight = 10;
-
- const searchLength = 3;
-
- const _dataMap = new Map();
-
- _gridDataDetail.forEach((gdd) => {
- const searchRes = this.search(
- gdd,
- width,
- height,
- eachwidth,
- eachheight,
- searchLength
- );
- if (searchRes.find(v=> v.cellId == 1670)) {
- console.log();
-
+ gridDataDetailList.forEach((gdd) => {
+ // 缃戞牸鏁版嵁鏄瀺鍚堢殑锛屽睍绀洪珮浜殑鏍峰紡
+ if (gdd.mixData) {
+ gdd.gridStyle = {
+ strokeWeight: 2,
+ strokeColor: '#23dad1'
+ };
}
- searchRes.forEach((e) => {
- if (originCellIdList.indexOf(e.cellId) == -1) {
- if (!_dataMap.has(e.cellId)) {
- _dataMap.set(e.cellId, {
- source: [],
- res: {}
- });
- }
- _dataMap.get(e.cellId).source.push(e);
- }
- });
});
-
- _dataMap.forEach((v, k) => {
- let total = 0,
- count = v.source.length;
- v.source.forEach((s) => {
- total += s.pm25;
- });
- v.res = {
- isHeatData: true,
- groupId: v.source[0].groupId,
- cellId: v.source[0].cellId,
- pm25: count == 0 ? null : Math.round((total / count) * 10) / 10,
- originData: v.source
- };
- headGridDataDetailList.push(v.res);
- });
- headGridDataDetailList = headGridDataDetailList.concat(_gridDataDetail);
-
- // 閲嶆柊鎸夌収鐩戞祴鏁版嵁鎺掑簭骞舵爣璁版帓鍚�
- headGridDataDetailList.sort((a, b) => {
- return b.pm25 - a.pm25;
- });
- headGridDataDetailList.forEach((gdd, i) => {
- gdd.rank = i + 1;
- });
-
this.drawTagGrid({
- tag: heatTag,
- data: headGridDataDetailList,
- // grid: {
- // style: {
- // isMixGridHighlight:
- // isMixGridHighlight == undefined ? true : isMixGridHighlight
- // }
- // },
+ tag: mixTag,
+ data: gridDataDetailList,
+ grid: {
+ style: {
+ isMixGridHighlight
+ }
+ },
extData: {
- name: `璧拌埅鐑姏鍥� - ${heatTag}`,
- type: 2
+ name: `璧拌埅铻嶅悎 - ${mixTag}`,
+ type: 1
}
});
}
- return heatTag;
+ return mixTag;
}
drawHeatGrid2(tag, headGridDataDetailList) {
@@ -801,7 +866,23 @@
}),
gridPoints: JSON.parse(JSON.stringify(this.mapViews.gridPoints)),
points: JSON.parse(JSON.stringify(this.mapViews.points)),
- extData
+ extData,
+ show: true
+ };
+ }
+
+ _createNewGridState({ extData }) {
+ return {
+ type: undefined,
+ name: '',
+ showGrid: true,
+ showRank: false,
+ showData: false,
+ showCustomColor: false,
+ showHeatMap: false,
+ highlightFusionGrid: false,
+ showUnderway: false,
+ opacityValue: 1
};
}
}
--
Gitblit v1.9.3