/** * 弹窗服务类 */ import type { MarkerData, DetectorInfo } from '../types/map.types' import { getHighestPriorityStatus, getStatusLabel, getStatusColor, createClusterPopupHTML, sortDetectorsByPriority } from '../utils/map.utils' export class PopupService { /** * 处理聚合标记弹窗 */ handleClusterPopup(features: any[]): string { // 收集所有探测器信息 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) } }) // 按优先级排序 const sortedDetectorList = sortDetectorsByPriority(detectorList) // 生成弹窗HTML return createClusterPopupHTML(sortedDetectorList) } /** * 处理单个标记弹窗 */ handleSingleMarkerPopup(markerData: MarkerData): string { const status = getHighestPriorityStatus(markerData) return `
${markerData.name}
状态: ${getStatusLabel(status)}
gasStatus: ${markerData.gasStatus}
onlineStatus: ${markerData.onlineStatus}
enableStatus: ${markerData.enableStatus}
fenceStatus: ${markerData.fenceStatus}
batteryStatus: ${markerData.batteryStatus}
类型:${markerData.gasChemical}
数值:${markerData.value} ${markerData.unit ? markerData.unit : ''}
时间:${markerData.time ? markerData.time : '-'}
坐标:${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() } }