70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import { getShipIcon } from '@/services/slave/sgw/MapService';
|
|
import { Fill, Icon, Stroke, Style, Text } from 'ol/style';
|
|
import CircleStyle from 'ol/style/Circle';
|
|
import { GPSParseResult, PointData } from '../type';
|
|
|
|
export const getShipStyleFromData = ({
|
|
state_level,
|
|
gpsData,
|
|
scale,
|
|
pointData,
|
|
}: {
|
|
state_level: number;
|
|
gpsData: GPSParseResult;
|
|
scale: number;
|
|
pointData: PointData;
|
|
}) => {
|
|
if (pointData.type === 'main-point') {
|
|
return new Style({
|
|
text: pointData.description
|
|
? new Text({
|
|
text: pointData.description,
|
|
font: '14px Arial',
|
|
fill: new Fill({ color: 'black' }),
|
|
stroke: new Stroke({
|
|
color: 'white',
|
|
width: 2,
|
|
}),
|
|
offsetY: -40,
|
|
textAlign: 'center',
|
|
textBaseline: 'bottom',
|
|
})
|
|
: undefined,
|
|
image: new Icon({
|
|
anchor: [0.5, 30], // Điểm neo: giữa theo X, 30px theo Y
|
|
anchorOrigin: 'top-left',
|
|
anchorXUnits: 'fraction',
|
|
anchorYUnits: 'pixels',
|
|
scale: scale,
|
|
src: getShipIcon(state_level, gpsData.fishing || false),
|
|
rotateWithView: false,
|
|
rotation: ((gpsData.h || 0) * Math.PI) / 180,
|
|
crossOrigin: 'anonymous',
|
|
}),
|
|
});
|
|
} else if (pointData.type === 'sos-point') {
|
|
// Style cơ bản cho SOS point - hình tròn đỏ ở giữa
|
|
return new Style({
|
|
image: new Icon({
|
|
anchor: [0.5, 30], // Điểm neo: giữa theo X, 30px theo Y
|
|
anchorOrigin: 'top-left',
|
|
anchorXUnits: 'fraction',
|
|
anchorYUnits: 'pixels',
|
|
scale: scale,
|
|
src: getShipIcon(state_level, gpsData.fishing || false),
|
|
rotateWithView: false,
|
|
rotation: ((gpsData.h || 0) * Math.PI) / 180,
|
|
crossOrigin: 'anonymous',
|
|
}),
|
|
});
|
|
} else {
|
|
return new Style({
|
|
image: new CircleStyle({
|
|
radius: 5,
|
|
fill: new Fill({ color: 'red' }),
|
|
stroke: new Stroke({ color: 'white', width: 2 }),
|
|
}),
|
|
});
|
|
}
|
|
};
|