|
|
|
@ -14,7 +14,13 @@ import type { |
|
|
|
TrajectoryPlayState, |
|
|
|
MarkerData |
|
|
|
} from '../types/map.types' |
|
|
|
import { createLocationIconSVG, getHighestPriorityStatus, getStatusColor } from '../utils/map.utils' |
|
|
|
import { |
|
|
|
createLocationIconSVG, |
|
|
|
createStartIconSVG, |
|
|
|
createEndIconSVG, |
|
|
|
getHighestPriorityStatus, |
|
|
|
getStatusColor |
|
|
|
} from '../utils/map.utils' |
|
|
|
import dayjs from 'dayjs' |
|
|
|
|
|
|
|
export class TrajectoryService { |
|
|
|
@ -36,7 +42,6 @@ export class TrajectoryService { |
|
|
|
* 创建轨迹图层 |
|
|
|
*/ |
|
|
|
createTrajectoryLayer(): VectorLayer<VectorSource> { |
|
|
|
|
|
|
|
const source = new VectorSource() |
|
|
|
|
|
|
|
this.trajectoryLayer = new VectorLayer({ |
|
|
|
@ -106,6 +111,20 @@ export class TrajectoryService { |
|
|
|
}) |
|
|
|
: undefined |
|
|
|
}) |
|
|
|
} else if (featureType === 'trajectory-start' || featureType === 'trajectory-end') { |
|
|
|
console.log('trajectory-start', featureType) |
|
|
|
|
|
|
|
// 开始/结束标记样式
|
|
|
|
return new Style({ |
|
|
|
image: new Icon({ |
|
|
|
src: |
|
|
|
featureType === 'trajectory-start' ? createStartIconSVG(30) : createEndIconSVG(30), // 使用位置图标，大小为32px
|
|
|
|
scale: 1, |
|
|
|
anchor: [0.5, 1], // 锚点设置在底部中心
|
|
|
|
anchorXUnits: 'fraction', |
|
|
|
anchorYUnits: 'fraction' |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
return new Style() |
|
|
|
@ -120,7 +139,7 @@ export class TrajectoryService { |
|
|
|
const color = feature.get('color') || '#ff4757' |
|
|
|
return new Style({ |
|
|
|
image: new Icon({ |
|
|
|
src: createLocationIconSVG(color, 32), // 使用位置图标，大小为32px
|
|
|
|
src: createLocationIconSVG(32, color), // 使用位置图标，大小为32px
|
|
|
|
scale: 1, |
|
|
|
anchor: [0.5, 1], // 锚点设置在底部中心
|
|
|
|
anchorXUnits: 'fraction', |
|
|
|
@ -134,7 +153,7 @@ export class TrajectoryService { |
|
|
|
}), |
|
|
|
offsetY: -40, // 调整文字位置，避免与图标重叠
|
|
|
|
backgroundFill: new Fill({ |
|
|
|
color: 'rgba(0, 0, 0, 0.7)' |
|
|
|
color: 'rgba(0, 0, 0, 0.5)' |
|
|
|
}), |
|
|
|
padding: [2, 6, 2, 6] |
|
|
|
}) |
|
|
|
@ -152,8 +171,8 @@ export class TrajectoryService { |
|
|
|
*/ |
|
|
|
setTrajectoryData(markers: MarkerData[]): void { |
|
|
|
// 从 markers 中提取轨迹数据
|
|
|
|
console.log('setTrajectoryData', markers); |
|
|
|
|
|
|
|
console.log('setTrajectoryData', markers) |
|
|
|
|
|
|
|
this.trajectoryData = markers |
|
|
|
.filter((marker) => marker.data && marker.data.length > 0) |
|
|
|
.map((marker) => ({ |
|
|
|
@ -348,8 +367,7 @@ export class TrajectoryService { |
|
|
|
private renderTrajectories(): void { |
|
|
|
if (!this.trajectoryLayer) return |
|
|
|
|
|
|
|
console.log('renderTrajectories',this); |
|
|
|
|
|
|
|
console.log('renderTrajectories', this) |
|
|
|
|
|
|
|
const source = this.trajectoryLayer.getSource() |
|
|
|
source?.clear() |
|
|
|
@ -386,6 +404,27 @@ export class TrajectoryService { |
|
|
|
}) |
|
|
|
source?.addFeature(pointFeature) |
|
|
|
}) |
|
|
|
// 创建开始、结束标记
|
|
|
|
// 开始标记
|
|
|
|
const startFeature = new Feature({ |
|
|
|
geometry: new Point(fromLonLat(trajectory.points[0].coordinates)), |
|
|
|
type: 'trajectory-start' |
|
|
|
// color: trajectory.color || '#1890ff',
|
|
|
|
// pointRadius: 6, // 传递轨迹点半径
|
|
|
|
// activePointRadius: 6 // 传递激活状态轨迹点半径
|
|
|
|
}) |
|
|
|
source?.addFeature(startFeature) |
|
|
|
// 结束标记
|
|
|
|
const endFeature = new Feature({ |
|
|
|
geometry: new Point( |
|
|
|
fromLonLat(trajectory.points[trajectory.points.length - 1].coordinates) |
|
|
|
), |
|
|
|
type: 'trajectory-end' |
|
|
|
// color: trajectory.color || '#1890ff',
|
|
|
|
// pointRadius: 6, // 传递轨迹点半径
|
|
|
|
// activePointRadius: 6 // 传递激活状态轨迹点半径
|
|
|
|
}) |
|
|
|
source?.addFeature(endFeature) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
@ -460,7 +499,6 @@ export class TrajectoryService { |
|
|
|
* 隐藏轨迹 |
|
|
|
*/ |
|
|
|
hide(): void { |
|
|
|
|
|
|
|
if (this.trajectoryLayer) { |
|
|
|
this.trajectoryLayer.setVisible(false) |
|
|
|
} |
|
|
|
|
