From 8372d022614a1897120802cf1bac90d61651177f Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 14 三月 2025 18:20:56 +0800
Subject: [PATCH] 2025.3.14
---
src/views/satellitetelemetry/SatelliteProxy.js | 496 +++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 410 insertions(+), 86 deletions(-)
diff --git a/src/views/satellitetelemetry/SatelliteProxy.js b/src/views/satellitetelemetry/SatelliteProxy.js
index 7b7f8cf..e0e5010 100644
--- a/src/views/satellitetelemetry/SatelliteProxy.js
+++ b/src/views/satellitetelemetry/SatelliteProxy.js
@@ -1,93 +1,417 @@
import calculate from '@/utils/map/calculate';
import gridMapUtil from '@/utils/map/grid';
-import { map } from '@/utils/map/index_old';
+import { map, onMapMounted } from '@/utils/map/index_old';
+import { useCloned } from '@vueuse/core';
-function clearAll(mapViews) {
- if (mapViews) {
- if (typeof mapViews.textViews === 'object') {
- map.remove(mapViews.textViews);
+export class SatelliteProxy {
+ // 鍦板浘缃戞牸鐩稿叧瀵硅薄
+ mapViews;
+
+ mapViewsMap = new Map();
+
+ districtPolygon;
+
+ events = new Map();
+
+ // 缁樺埗鍖哄幙杈圭晫
+ drawDistrict(districtName, isNew) {
+ onMapMounted(() => {
+ if (this.districtPolygon && !isNew) {
+ map.remove(this.districtPolygon);
+ map.add(this.districtPolygon);
+ } else {
+ // eslint-disable-next-line no-undef
+ var district = new AMap.DistrictSearch({
+ extensions: 'all', //杩斿洖琛屾斂鍖鸿竟鐣屽潗鏍囩瓑鍏蜂綋淇℃伅
+ level: 'district' //璁剧疆鏌ヨ琛屾斂鍖虹骇鍒负鍖�
+ });
+ district.search(districtName, (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
+ this.districtPolygon = new AMap.Polygon({
+ map: map, //鏄剧ず璇ヨ鐩栫墿鐨勫湴鍥惧璞�
+ strokeWeight: 2, //杞粨绾垮搴�
+ path: bounds[i], //澶氳竟褰㈣疆寤撶嚎鐨勮妭鐐瑰潗鏍囨暟缁�
+ fillOpacity: 0, //澶氳竟褰㈠～鍏呴�忔槑搴�
+ fillColor: '#CCF3FF', //澶氳竟褰㈠～鍏呴鑹�
+ // strokeColor: '#ffffff' //绾挎潯棰滆壊
+ strokeColor: '#0552f7', //绾挎潯棰滆壊
+ zIndex: 9
+ });
+ }
+ map.setFitView(); //灏嗚鐩栫墿璋冩暣鍒板悎閫傝閲�
+ }
+ });
+ }
+ });
+ }
+
+ clearAll(mapViews) {
+ if (mapViews) {
+ if (typeof mapViews.gridViews === 'object') {
+ map.remove(mapViews.gridViews);
+ }
}
- if (typeof mapViews.gridViews === 'object') {
- map.remove(mapViews.gridViews);
+ this.clearText(mapViews);
+ }
+
+ clearText(mapViews) {
+ if (mapViews) {
+ if (typeof mapViews.dataTxt === 'object') {
+ map.remove(mapViews.dataTxt);
+ }
+ if (typeof mapViews.dataLayer === 'object') {
+ map.remove(mapViews.dataLayer);
+ }
+ if (typeof mapViews.rankTxt === 'object') {
+ map.remove(mapViews.rankTxt);
+ }
+ if (typeof mapViews.rankLayer === 'object') {
+ map.remove(mapViews.rankLayer);
+ }
+ }
+ }
+
+ firstEvent;
+
+ // 缁樺埗缃戞牸绾�
+ drawPolyline(gridInfo, event) {
+ this.firstEvent = event;
+ // 缁樺埗缃戞牸
+ const points = gridInfo.map((v) => {
+ return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);
+ // return [v.longitude, v.latitude];
+ });
+ // const gridPoints = gridMapUtil.parseGridPoint(points);
+ // console.log('gridPoints:', gridPoints);
+
+ const gridPoints = gridInfo.map((v, i) => {
+ return {
+ path: [
+ calculate.wgs84_To_Gcj02(v.point1Lon, v.point1Lat),
+ calculate.wgs84_To_Gcj02(v.point2Lon, v.point2Lat),
+ calculate.wgs84_To_Gcj02(v.point3Lon, v.point3Lat),
+ calculate.wgs84_To_Gcj02(v.point4Lon, v.point4Lat)
+ // [v.point1Lon, v.point1Lat],
+ // [v.point2Lon, v.point2Lat],
+ // [v.point3Lon, v.point3Lat],
+ // [v.point4Lon, v.point4Lat]
+ ]
+ // eslint-disable-next-line no-undef
+ .map((d) => new AMap.LngLat(d[0], d[1])),
+ extData: {
+ centerPoint: points[i],
+ // gridPoints,
+ gridCell: v
+ }
+ };
+ });
+ const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event });
+ return { gridViews, gridPoints, points };
+ }
+
+ // 缁樺埗鐩戞祴鏁版嵁鍊�
+ drawDataText(points, gridDataDetail, textViews, isCustomColor, useColor) {
+ const data = gridDataDetail.map((v, i) => {
+ return {
+ lnglat_GD: points[i],
+ // data: v.pm25 ? (v.pm25 + '渭g/m鲁') : ''
+ data: v.pm25 ? v.pm25 : ''
+ };
+ });
+ // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
+ return gridMapUtil.drawGridText({
+ points: data,
+ textViews,
+ anchor: 'top-center',
+ type: 'data',
+ isCustomColor,
+ useColor
+ });
+ }
+
+ // 缁樺埗鐩戞祴鏁版嵁鎺掑悕鏂囨湰
+ drawRankText(points, gridDataDetail, textViews, labelsLayer) {
+ const data = gridDataDetail.map((v, i) => {
+ return {
+ lnglat_GD: points[i],
+ // data: v.pm25 ? ('鎺掑悕: ' + v.rank) : ''
+ data: v.pm25 ? v.rank : ''
+ };
+ });
+ // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
+ return gridMapUtil.drawGridText({
+ points: data,
+ textViews,
+ anchor: 'bottom-center',
+ type: 'rank'
+ });
+ }
+
+ // 缁樺埗鐩戞祴鏁版嵁鍊煎搴旂綉鏍奸鑹�
+ drawColor({
+ gridViews,
+ points,
+ gridDataDetail,
+ lastGridViews,
+ opacity,
+ zIndex,
+ customColor
+ }) {
+ // 鏍规嵁鏁版嵁绛涢�夋湁鏁版嵁鐨勭綉鏍�
+ const res = [];
+ // 浠ュ強瀵瑰簲鐨勪腑蹇冪偣鍧愭爣
+ const pointsRes = [];
+ gridDataDetail.forEach((d) => {
+ // 鏍规嵁鏁版嵁鍏宠仈鐨勭綉鏍肩紪鍙凤紝鎵惧埌瀵瑰簲缃戞牸
+ const cellId = d.cellId;
+ if (cellId > gridViews.length) {
+ throw Error(
+ '閬ユ祴鏁版嵁鐨勭綉鏍肩储寮曠紪鍙疯秴鍑虹綉鏍肩粍鑼冨洿锛屾暟鎹拰缃戞牸缁勫彲鑳戒笉瀵瑰簲'
+ );
+ }
+ res.push(gridViews[cellId - 1]);
+ pointsRes.push(points[cellId - 1]);
+ });
+
+ // 鏍规嵁缁樺埗棰滆壊鏂瑰紡缁樺埗缃戞牸
+ let resGridViews;
+ if (customColor) {
+ resGridViews = gridMapUtil.drawGridColorCustom(
+ res,
+ gridDataDetail,
+ opacity,
+ zIndex
+ );
+ } else {
+ resGridViews = gridMapUtil.drawGridColor(
+ res,
+ gridDataDetail,
+ 'PM25',
+ opacity,
+ zIndex
+ );
+ }
+
+ if (lastGridViews) {
+ map.remove(lastGridViews);
+ }
+ map.add(resGridViews);
+ // map.setFitView(resGridViews);
+
+ return { resGridViews, pointsRes };
+ }
+
+ // 鍗槦缃戞牸閰嶇疆鍑嗗
+ gridPrepare(gridInfo, event) {
+ // clearText(mapViews);
+ this.clearAll(this.mapViews);
+ this.mapViews = this.drawPolyline(gridInfo, event);
+ }
+
+ // 缁樺埗缃戞牸閬ユ劅鏁版嵁鍊煎拰缃戞牸棰滆壊
+ drawGrid({
+ gridDataDetail,
+ useCustomColor,
+ opacity,
+ zIndex,
+ showDataTxt,
+ showRankTxt,
+ useDataTxtColor,
+ mapViews
+ }) {
+ const _mapViews = mapViews ? mapViews : this.mapViews;
+ // SatelliteProxy.clearText(mapViews);
+ const { resGridViews, pointsRes } = this.drawColor({
+ gridViews: _mapViews.gridViews,
+ points: _mapViews.points,
+ gridDataDetail: gridDataDetail,
+ lastGridViews: _mapViews.lastGridViews,
+ customColor: useCustomColor,
+ opacity: opacity,
+ zIndex: zIndex
+ });
+ _mapViews.lastGridViews = resGridViews;
+ _mapViews.lastPoints = pointsRes;
+
+ // 鏁版嵁鏍囪
+ const { textViews: dataTxt, labelsLayer: dataLayer } = this.drawDataText(
+ _mapViews.lastPoints,
+ gridDataDetail,
+ _mapViews.dataTxt,
+ useCustomColor,
+ useDataTxtColor
+ );
+ _mapViews.dataTxt = dataTxt;
+ _mapViews.dataLayer = dataLayer;
+
+ const { textViews: rankTxt, labelsLayer: rankLayer } = this.drawRankText(
+ _mapViews.lastPoints,
+ gridDataDetail,
+ _mapViews.rankTxt,
+ _mapViews.rankLayer
+ );
+ _mapViews.rankTxt = rankTxt;
+ _mapViews.rankLayer = rankLayer;
+
+ if (showDataTxt) {
+ map.add(_mapViews.dataTxt);
+ }
+
+ if (showRankTxt) {
+ map.add(_mapViews.rankTxt);
+ }
+ }
+
+ drawTagGrid({
+ tag,
+ gridDataDetail,
+ useCustomColor,
+ opacity,
+ zIndex,
+ showDataTxt,
+ showRankTxt,
+ extData
+ }) {
+ if (!this.mapViewsMap.has(tag)) {
+ const newMapViews = {
+ gridViews: gridMapUtil.drawPolylines({
+ points: this.mapViews.gridPoints,
+ event: this.firstEvent
+ }),
+ gridPoints: JSON.parse(JSON.stringify(this.mapViews.gridPoints)),
+ points: JSON.parse(JSON.stringify(this.mapViews.points)),
+ extData: extData
+ };
+ this.mapViewsMap.set(tag, newMapViews);
+ }
+ const _mapViews = this.mapViewsMap.get(tag);
+ this.drawGrid({
+ gridDataDetail,
+ useCustomColor,
+ opacity,
+ zIndex,
+ showDataTxt,
+ showRankTxt,
+ mapViews: _mapViews
+ });
+ }
+
+ // 璋冩暣鍚勭被鍦板浘瑕嗙洊鐗╃殑鍙鎬�
+ changeVisibility({ tag, showGridViews, showDataTxt, showRankTxt }) {
+ let _mapViewsList = [];
+ if (this.mapViews) {
+ _mapViewsList.push(this.mapViews);
+ }
+ if (tag && this.mapViewsMap.has(tag)) {
+ _mapViewsList.push(this.mapViewsMap.get(tag));
+ } else {
+ this.mapViewsMap.forEach((v) => {
+ _mapViewsList.push(v);
+ });
+ }
+ if (showGridViews != undefined) {
+ if (showGridViews) {
+ // map.add(this.mapViews.lastGridViews);
+ _mapViewsList.forEach((v) => {
+ if (v.lastGridViews) map.add(v.lastGridViews);
+ });
+ } else {
+ // map.remove(this.mapViews.lastGridViews);
+ _mapViewsList.forEach((v) => {
+ if (v.lastGridViews) map.remove(v.lastGridViews);
+ });
+ }
+ }
+ if (showDataTxt != undefined) {
+ if (showDataTxt) {
+ // map.add(this.mapViews.dataTxt);
+ _mapViewsList.forEach((v) => {
+ if (v.dataTxt) map.add(v.dataTxt);
+ });
+ } else {
+ // map.remove(this.mapViews.dataTxt);
+ _mapViewsList.forEach((v) => {
+ if (v.dataTxt) map.remove(v.dataTxt);
+ });
+ }
+ }
+ if (showRankTxt != undefined) {
+ if (showRankTxt) {
+ // map.add(this.mapViews.rankTxt);
+ _mapViewsList.forEach((v) => {
+ if (v.rankTxt) map.add(v.rankTxt);
+ });
+ } else {
+ // map.remove(this.mapViews.rankTxt);
+ _mapViewsList.forEach((v) => {
+ if (v.rankTxt) map.remove(v.rankTxt);
+ });
+ }
+ }
+ }
+
+ changeGridOpacity({ tag, isOpacity, opacityValue }) {
+ let _mapViewsList = [];
+ if (this.mapViews) {
+ _mapViewsList.push(this.mapViews);
+ }
+ if (tag && this.mapViewsMap.has(tag)) {
+ _mapViewsList.push(this.mapViewsMap.get(tag));
+ } else {
+ this.mapViewsMap.forEach((v) => {
+ _mapViewsList.push(v);
+ });
+ }
+ _mapViewsList.forEach((v) => {
+ if (v.lastGridViews) {
+ v.lastGridViews.forEach((e) => {
+ e.setOptions({
+ fillOpacity:
+ typeof opacityValue === 'number'
+ ? opacityValue
+ : isOpacity
+ ? 0.1
+ : 0.7
+ });
+ });
+ }
+ });
+ }
+
+ setGridEvent(name, event) {
+ 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);
+ });
+ }
+ this.events.get(name).push(event);
+ this.mapViews.gridViews.forEach((polygon) => {
+ polygon.on(name, event);
+ });
+ }
+
+ goBackGridEvent(name) {
+ if (this.events.has(name)) {
+ const eventList = this.events.get(name);
+ //鍏堢Щ闄ゅ師鏈夌殑浜嬩欢
+ const lastEvent = eventList.pop();
+ this.mapViews.gridViews.forEach((polygon) => {
+ polygon.off(name, lastEvent);
+ });
+ //鑾峰彇涓婁竴涓簨浠�
+ const event = eventList.pop();
+ this.mapViews.gridViews.forEach((polygon) => {
+ polygon.on(name, event);
+ });
}
}
}
-
-function clearText(mapViews) {
- if (mapViews && typeof mapViews.textViews === 'object') {
- map.remove(mapViews.textViews);
- }
-}
-
-// 缁樺埗缃戞牸绾�
-function drawPolyline(gridInfo) {
- // 缁樺埗缃戞牸
- const points = gridInfo.map((v) => {
- // return calculate.wgs84_To_Gcj02(v.longitude, v.latitude);
- return [v.longitude, v.latitude];
- });
- // const gridPoints = gridMapUtil.parseGridPoint(points);
- // console.log('gridPoints:', gridPoints);
-
- const gridPoints = gridInfo.map((v) => {
- return [
- calculate.wgs84_To_Gcj02(v.point1Lon, v.point1Lat),
- calculate.wgs84_To_Gcj02(v.point2Lon, v.point2Lat),
- calculate.wgs84_To_Gcj02(v.point3Lon, v.point3Lat),
- calculate.wgs84_To_Gcj02(v.point4Lon, v.point4Lat)
- // [v.point1Lon, v.point1Lat],
- // [v.point2Lon, v.point2Lat],
- // [v.point3Lon, v.point3Lat],
- // [v.point4Lon, v.point4Lat]
- ];
- });
- const gridViews = gridMapUtil.drawPolylines(gridPoints);
- return { gridViews, gridPoints, points };
-}
-
-// 缁樺埗鐩戞祴鏁版嵁鍊�
-function drawDataText(points, gridData, textViews, labelsLayer) {
- const data = gridData.map((v, i) => {
- return {
- lnglat_GD: points[i],
- // data: v.pm25 ? (v.pm25 + '渭g/m鲁') : ''
- data: v.pm25 ? v.pm25 : ''
- };
- });
- // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom');
- return gridMapUtil.drawGridText(data, textViews, 'top-center', 'data');
-}
-
-// 缁樺埗鐩戞祴鏁版嵁鎺掑悕鏂囨湰
-function drawRankText(points, gridData, textViews, labelsLayer) {
- const data = gridData.map((v, i) => {
- return {
- lnglat_GD: points[i],
- // data: v.pm25 ? ('鎺掑悕: ' + v.rank) : ''
- data: v.pm25 ? v.rank : ''
- };
- });
- // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top');
- return gridMapUtil.drawGridText(data, textViews, 'bottom-center', 'rank');
-}
-
-// 缁樺埗鐩戞祴鏁版嵁鍊煎搴旂綉鏍奸鑹�
-function drawColor(gridViews, gridData, customColor) {
- const pm25Data = gridData.map((v) => {
- return v.pm25;
- });
- if (customColor) {
- gridMapUtil.drawGridColorCustom(gridViews, pm25Data);
- } else {
- gridMapUtil.drawGridColor(gridViews, pm25Data, 'PM25');
- }
-}
-
-export default {
- drawPolyline,
- drawDataText,
- drawRankText,
- drawColor,
- clearText,
- clearAll
-};
--
Gitblit v1.9.3