You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.4 KiB
87 lines
2.4 KiB
2 weeks ago
|
/**
|
||
|
|
* 弹窗服务类
|
||
|
|
*/
|
||
|
|
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 `
|
||
|
|
<div style="font-weight: bold; margin-bottom: 4px;">${markerData.name}</div>
|
||
|
|
<div style="color: ${getStatusColor(status)};">
|
||
|
|
状态: ${getStatusLabel(status)}
|
||
|
|
</div>
|
||
|
|
<div style="margin-top: 4px; font-size: 10px; color: #666;">
|
||
|
|
坐标: ${markerData.coordinates[0].toFixed(6)}, ${markerData.coordinates[1].toFixed(6)}
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 处理默认弹窗
|
||
|
|
*/
|
||
|
|
handleDefaultPopup(): string {
|
||
|
|
return `
|
||
|
|
<div style="font-weight: bold;">标记</div>
|
||
|
|
<div style="font-size: 10px; color: #666;">未知标记</div>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 根据特征类型处理弹窗内容
|
||
|
|
*/
|
||
|
|
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()
|
||
|
|
}
|
||
|
|
}
|