From b8f01b7283bc3a853f2402edb04dc004fe762370 Mon Sep 17 00:00:00 2001 From: xh <11675084@qq.com> Date: Wed, 29 Oct 2025 16:36:04 +0800 Subject: [PATCH] =?UTF-8?q?=E6=80=A7=E8=83=BD=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Home/components/services/animation.service.ts | 25 +++------------------- .../Home/components/services/marker.service.ts | 17 +++++++++------ .../Home/components/services/popup.service.ts | 14 ++++++------ .../HandDevice/Home/components/utils/map.utils.ts | 12 ++--------- 4 files changed, 21 insertions(+), 47 deletions(-) diff --git a/web/src/views/HandDevice/Home/components/services/animation.service.ts b/web/src/views/HandDevice/Home/components/services/animation.service.ts index d2fde01..613d2d0 100644 --- a/web/src/views/HandDevice/Home/components/services/animation.service.ts +++ b/web/src/views/HandDevice/Home/components/services/animation.service.ts @@ -10,7 +10,7 @@ import { Point } from 'ol/geom' import { Style, Circle, Fill, Stroke } from 'ol/style' import { fromLonLat } from 'ol/proj' import type { MarkerData } from '../types/map.types' -import { getHighestPriorityStatus, getStatusColor } from '../utils/map.utils' + import { ANIMATION_CONFIG } from '../constants/map.constants' export class AnimationService { @@ -33,13 +33,11 @@ export class AnimationService { geometry: new Point(fromLonLat(marker.coordinates)), markerData: marker }) - - const status = getHighestPriorityStatus(marker) - const color = getStatusColor(status) + // 设置动画开始时间 feature.set('animationStart', Date.now()) - feature.set('rippleColor', color) + feature.set('rippleColor', marker.statusColor ) source?.addFeature(feature) // this.rippleLayer?.setSource(source) @@ -62,23 +60,6 @@ export class AnimationService { this.enableCluster = enableCluster const source = new VectorSource() - // // 为每个标记添加波纹效果 - // markers.forEach((marker) => { - // const feature = new Feature({ - // geometry: new Point(fromLonLat(marker.coordinates)), - // markerData: marker - // }) - - // const status = getHighestPriorityStatus(marker) - // const color = getStatusColor(status) - - // // 设置动画开始时间 - // feature.set('animationStart', Date.now()) - // feature.set('rippleColor', color) - - // source.addFeature(feature) - // }) - this.rippleLayer = new VectorLayer({ source: source, zIndex: 1, diff --git a/web/src/views/HandDevice/Home/components/services/marker.service.ts b/web/src/views/HandDevice/Home/components/services/marker.service.ts index b21bea9..53daa7b 100644 --- a/web/src/views/HandDevice/Home/components/services/marker.service.ts +++ b/web/src/views/HandDevice/Home/components/services/marker.service.ts @@ -12,8 +12,8 @@ import { fromLonLat } from 'ol/proj' import type { MarkerData, MapProps } from '../types/map.types' import { createMarkerStyle, - getHighestPriorityStatus, - getClusterMarkerData + getClusterMarkerData, + getStatusColor } from '../utils/map.utils' import { ANIMATION_CONFIG } from '../constants/map.constants' export class MarkerService { @@ -56,8 +56,9 @@ export class MarkerService { geometry: new Point(fromLonLat(marker.coordinates)), markerData: marker }) - const statusStr = getHighestPriorityStatus(marker) - feature.setStyle(createMarkerStyle(statusStr)) + const statusColor = marker.statusColor || '' + + feature.setStyle(createMarkerStyle(statusColor)) this.vectorSource.addFeature(feature) }) } @@ -104,12 +105,14 @@ export class MarkerService { if (features.length === 1) { // 单个marker const markerData: MarkerData = features[0].get('markerData') - const statusStr = getHighestPriorityStatus(markerData) - return markerData ? createMarkerStyle(statusStr) : new Style() + + return markerData ? createMarkerStyle(markerData.statusColor || '') : new Style() } else { // 聚合marker const highestStatus = getClusterMarkerData(features) - return createMarkerStyle(highestStatus, true, features.length) + + const color = getStatusColor(highestStatus) + return createMarkerStyle(color, true, features.length) } } }) diff --git a/web/src/views/HandDevice/Home/components/services/popup.service.ts b/web/src/views/HandDevice/Home/components/services/popup.service.ts index 0719f22..8577311 100644 --- a/web/src/views/HandDevice/Home/components/services/popup.service.ts +++ b/web/src/views/HandDevice/Home/components/services/popup.service.ts @@ -3,9 +3,6 @@ */ import type { MarkerData, DetectorInfo } from '../types/map.types' import { - getHighestPriorityStatus, - getStatusLabel, - getStatusColor, createClusterPopupHTML, sortDetectorsByPriority, getLabelWithTypeValue @@ -19,12 +16,12 @@ export class PopupService { // 收集所有探测器信息 const detectorList: DetectorInfo[] = features.map((f) => { const markerData = f.get('markerData') as MarkerData - const status = getHighestPriorityStatus(markerData) + return { name: markerData?.name || '-', - status, - statusLabel: getStatusLabel(status), - statusColor: getStatusColor(status) + status:markerData.statusStr||"", + statusLabel: markerData.statusLabel || "", + statusColor: markerData.statusColor || "", } }) @@ -56,9 +53,10 @@ export class PopupService {
数值：${markerData.value} ${markerData.unit ? markerData.unit : ''}
时间：${markerData.timeStr ? markerData.timeStr : '-'}
- 坐标：${markerData.coordinates[0].toFixed(6)}, ${markerData.coordinates[1].toFixed(6)} + 坐标：${markerData.coordinates[0].toFixed(6)}, ${markerData.coordinates[1].toFixed(6)}/${markerData.gpsType===0?"GPS":"基站"}
` + // gpsType:0表示GPS，550表示基站（或者非0就判定为基站） } /** diff --git a/web/src/views/HandDevice/Home/components/utils/map.utils.ts b/web/src/views/HandDevice/Home/components/utils/map.utils.ts index a5dca05..f3ccabb 100644 --- a/web/src/views/HandDevice/Home/components/utils/map.utils.ts +++ b/web/src/views/HandDevice/Home/components/utils/map.utils.ts @@ -118,18 +118,10 @@ export const createLocationIconSVG = (color: string, size: number = 24) => { * 创建标记样式 */ export const createMarkerStyle = ( - statusStr: keyof typeof STATUS_PRIORITY, + color: string, isCluster: boolean = false, clusterSize?: number ) => { - // 如果是字符串，说明是状态值 - // const statusStr:string = - // typeof markerData === 'string' - // ? (markerData as keyof typeof STATUS_PRIORITY) - // : getHighestPriorityStatus(markerData) - - const color = getStatusColor(statusStr) - if (isCluster && clusterSize) { // 聚合标记样式 return new Style({ @@ -254,7 +246,7 @@ export const getClusterMarkerData = (features: Feature[]): keyof typeof STATUS_P features.forEach((feature) => { const markerData = feature.get('markerData') as MarkerData if (markerData) { - const status = getHighestPriorityStatus(markerData) + const status = markerData.statusStr || '' allStatuses.push(status) } })