${markerData.name}
+
+ 状态: ${getStatusLabel(status)}
+
+
+ 坐标: ${markerData.coordinates[0].toFixed(6)}, ${markerData.coordinates[1].toFixed(6)}
+
+ `
+ }
+
+ /**
+ * 处理默认弹窗
+ */
+ handleDefaultPopup(): string {
+ return `
+ 标记
+ 未知标记
+ `
+ }
+
+ /**
+ * 根据特征类型处理弹窗内容
+ */
+ handlePopupContent(feature: any): string {
+ const markerData = feature.get('markerData')
+ const features = feature.get('features')
+
+ // 处理聚合标记
+ if (features && features.length > 1) {
+ return this.handleClusterPopup(features)
+ } else if (features && features.length === 1) {
+ // 处理聚合中的单个标记
+ const singleMarkerData = features[0].get('markerData') as MarkerData
+ if (singleMarkerData) {
+ return this.handleSingleMarkerPopup(singleMarkerData)
+ }
+ } else if (markerData) {
+ // 处理非聚合的单个标记
+ return this.handleSingleMarkerPopup(markerData as MarkerData)
+ }
+
+ return this.handleDefaultPopup()
+ }
+}
diff --git a/web/src/views/HandDevice/Home/components/services/trajectory.service.ts b/web/src/views/HandDevice/Home/components/services/trajectory.service.ts
new file mode 100644
index 0000000..9f2bd2f
--- /dev/null
+++ b/web/src/views/HandDevice/Home/components/services/trajectory.service.ts
@@ -0,0 +1,502 @@
+/**
+ * 轨迹服务类
+ */
+import { Vector as VectorLayer } from 'ol/layer'
+import { Vector as VectorSource } from 'ol/source'
+import { Feature } from 'ol'
+import { LineString, Point } from 'ol/geom'
+import { Style, Stroke, Circle, Fill, Text, Icon } from 'ol/style'
+import { fromLonLat } from 'ol/proj'
+import type {
+ TrajectoryData,
+ TrajectoryPoint,
+ TrajectoryPlayState,
+ MarkerData
+} from '../types/map.types'
+import { createLocationIconSVG, getHighestPriorityStatus, getStatusColor } from '../utils/map.utils'
+import dayjs from 'dayjs'
+
+export class TrajectoryService {
+ private trajectoryLayer: VectorLayer
+
+
+`
+
+/**
+ * 生成聚合标记弹窗HTML
+ */
+export const createClusterPopupHTML = (detectorList: DetectorInfo[]) => {
+ const detectorListHTML = detectorList.map(createDetectorListItem).join('')
+
+ return `
+
+
+ ${detector.name}
+ ${detector.statusLabel}
+
+ ${detectorListHTML}
+
+ `
+}
+
+/**
+ * 获取聚合标记数据
+ */
+export const getClusterMarkerData = (features: Feature[]): keyof typeof STATUS_PRIORITY => {
+ // 收集所有标记的状态
+ const allStatuses: Array
-
-
-
-
-
-
-
-
-
+
-
- 
-
-
-
-
-
-
- {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
-
-
+
+
+ {{ getDictLabel(DICT_TYPE.HAND_DETECTOR_ALARM_LEVEL, scope.row.level as number) }}
+
+