From e895212fa4215c50ce79ce4b448e064caf394776 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 03 七月 2025 17:35:46 +0800
Subject: [PATCH] 2025.7.3 动态溯源（待完成）
---
src/model/SatelliteGrid.js | 347 +++++++++++++++++++++------------------------------------
1 files changed, 128 insertions(+), 219 deletions(-)
diff --git a/src/model/SatelliteGrid.js b/src/model/SatelliteGrid.js
index 2ca4d43..af3f0f7 100644
--- a/src/model/SatelliteGrid.js
+++ b/src/model/SatelliteGrid.js
@@ -1,3 +1,4 @@
+import { reactive } from 'vue';
import calculate from '@/utils/map/calculate';
import gridMapUtil from '@/utils/map/grid';
import { map, onMapMounted } from '@/utils/map/index_old';
@@ -15,17 +16,16 @@
}
gridGroupId;
-
+
// 榛樿鍦板浘缃戞牸鐩稿叧瀵硅薄
mapViews;
-
+ gridState;
gridDataDetail;
-
- infoMap = new Map();
// 鍦板浘缃戞牸瀵硅薄Map缁撴瀯锛屽瓨鍌ㄥ搴攌ey涓嬬殑缃戞牸瀵硅薄銆佺綉鏍煎潗鏍囦俊鎭�
mapViewsMap = new Map();
-
+ // 鍦板浘缃戞牸瀵硅薄鐨勫弬鏁扮姸鎬�
+ gridStateMap = new Map();
// 缃戞牸鏁版嵁Map缁撴瀯锛屽瓨鍌ㄥ搴攌ey涓嬬殑缃戞牸鐩戞祴鏁版嵁淇℃伅
gridDataDetailMap = new Map();
@@ -273,7 +273,7 @@
map.remove(lastGridViews);
}
map.add(resGridViews);
- // map.setFitView(resGridViews);
+ map.setFitView(resGridViews);
return { resGridViews, pointsRes };
}
@@ -288,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,
@@ -303,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,
@@ -315,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,
@@ -323,6 +342,8 @@
_mapViews.rankLayer
);
_mapViews.rankTxt = rtv;
+ // 鏇存柊鎺掑悕鏂囨湰鐘舵�佸弬鏁�
+ _gridState.showRank = rankTxt.isShow;
if (dataTxt.isShow) {
map.add(_mapViews.dataTxt);
@@ -349,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,
@@ -363,6 +388,10 @@
});
}
+ /**
+ * 鏍规嵁鏍囩鍒犻櫎瀵瑰簲鐨勭綉鏍硷紝鍚屾椂绉婚櫎鍦板浘缂╂斁浜嬩欢绛�
+ * @param {*} tags 缃戞牸鏍囩鏁扮粍
+ */
deleteTagGrid(tags) {
this.changeVisibility({
tags,
@@ -371,68 +400,66 @@
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) => {
+ _mapViewsList.forEach((v, i) => {
if (v.lastGridViews) {
map.add(v.lastGridViews);
- v.show = true;
+ _gridStateList[i].showGrid = true;
}
});
} else {
- // map.remove(this.mapViews.lastGridViews);
- _mapViewsList.forEach((v) => {
+ _mapViewsList.forEach((v, i) => {
if (v.lastGridViews) {
map.remove(v.lastGridViews);
- v.show = false;
+ _gridStateList[i].showGrid = false;
+ _gridStateList[i].showHeatMap = false;
}
});
}
}
if (showDataTxt != undefined) {
if (showDataTxt) {
- // map.add(this.mapViews.dataTxt);
- _mapViewsList.forEach((v) => {
+ _mapViewsList.forEach((v, i) => {
if (v.dataTxt) {
map.add(v.dataTxt);
- v.show = true;
+ _gridStateList[i].showData = true;
}
});
} else {
- // map.remove(this.mapViews.dataTxt);
- _mapViewsList.forEach((v) => {
+ _mapViewsList.forEach((v, i) => {
if (v.dataTxt) {
map.remove(v.dataTxt);
- v.show = false;
+ _gridStateList[i].showData = false;
}
});
}
}
if (showRankTxt != undefined) {
if (showRankTxt) {
- // map.add(this.mapViews.rankTxt);
- _mapViewsList.forEach((v) => {
+ _mapViewsList.forEach((v, i) => {
if (v.rankTxt) {
map.add(v.rankTxt);
- v.show = true;
+ _gridStateList[i].showRank = true;
}
});
} else {
- // map.remove(this.mapViews.rankTxt);
- _mapViewsList.forEach((v) => {
+ _mapViewsList.forEach((v, i) => {
if (v.rankTxt) {
map.remove(v.rankTxt);
- v.show = false;
+ _gridStateList[i].showRank = false;
}
});
}
@@ -440,9 +467,11 @@
}
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({
@@ -454,6 +483,7 @@
: 0.7
});
});
+ _gridStateList[i].gridOpacityValue = opacityValue;
}
});
}
@@ -466,19 +496,26 @@
zIndex,
isMixGridHighlight
}) {
- let { _mapViewsList, _gridDataDetailList } = this._getMapViews(...tags);
+ let { _mapViewsList, _gridDataDetailList, _gridStateList } =
+ this._getMapViews(...tags);
if (_mapViewsList.length == _gridDataDetailList.length) {
_mapViewsList.forEach((v, i) => {
if (v.lastGridViews) {
- if (useCustomColor != undefined) v.useCustomColor = useCustomColor;
const lastGridDataDetail = _gridDataDetailList[i];
- if (v.useCustomColor) {
+ const _gridState = _gridStateList[i];
+ if (useCustomColor != undefined)
+ _gridState.showGridCustomColor = useCustomColor;
+ if (useCustomColor) {
gridMapUtil.drawGridColorCustom(
v.lastGridViews,
lastGridDataDetail,
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,
@@ -576,84 +613,6 @@
* 閲嶅彔鐨勭綉鏍艰繘琛岀洃娴嬫暟鎹潎鍊艰绠楀苟閲嶆柊璁＄畻瀵瑰簲棰滆壊锛屽舰鎴愭柊鐨勪竴缁勮瀺鍚堢綉鏍�
* @param {Array} tags 闇�瑕佽瀺鍚堢殑缃戞牸鏍囩锛屽綋涓虹┖鏃讹紝榛樿铻嶅悎鎵�鏈夌綉鏍�
*/
- mixGrid({ tags, isMixGridHighlight = true }) {
- tags.sort((a, b) => {
- return a < b ? -1 : 1;
- });
- const mixTag = tags.join('-');
- if (this.mapViewsMap.has(mixTag)) {
- this.changeVisibility({
- 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 = {
- strokeWeight: 2,
- 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,
- grid: {
- style: {
- isMixGridHighlight
- }
- },
- extData: {
- name: `璧拌埅铻嶅悎 - ${mixTag}`,
- type: 1
- }
- });
- }
-
- return mixTag;
- }
-
mixGrid2({ tags, isMixGridHighlight = true, gridDataDetailList }) {
tags.sort((a, b) => {
return a < b ? -1 : 1;
@@ -693,110 +652,11 @@
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)) {
- this.changeVisibility({
- tags: [heatTag],
- showGridViews: true
- });
- } 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();
- }
- 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
- // }
- // },
- extData: {
- name: `璧拌埅鐑姏鍥� - ${heatTag}`,
- type: 2
- }
- });
- }
-
- return heatTag;
- }
-
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],
@@ -935,12 +795,14 @@
_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 {
@@ -950,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,
@@ -968,7 +834,50 @@
gridPoints: JSON.parse(JSON.stringify(this.mapViews.gridPoints)),
points: JSON.parse(JSON.stringify(this.mapViews.points)),
extData,
- show: true
+ 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