57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { Fill, Stroke, Style, Text } from 'ol/style';
|
|
import { ZoneData } from '../type';
|
|
|
|
const getZoneStyleFromData = ({ zoneData }: { zoneData: ZoneData }) => {
|
|
// Base style configuration for each zone type
|
|
const zoneStyles = {
|
|
warning: {
|
|
fill: new Fill({ color: 'rgba(255, 193, 7, 0.3)' }), // Yellow with transparency
|
|
stroke: new Stroke({ color: '#FFC107', width: 2 }),
|
|
textColor: '#856404',
|
|
},
|
|
alarm: {
|
|
fill: new Fill({ color: 'rgba(220, 53, 69, 0.3)' }), // Red with transparency
|
|
stroke: new Stroke({ color: '#DC3545', width: 3 }),
|
|
textColor: '#721C24',
|
|
},
|
|
default: {
|
|
fill: new Fill({ color: 'rgba(108, 117, 125, 0.2)' }), // Gray with transparency
|
|
stroke: new Stroke({ color: '#6C757D', width: 1 }),
|
|
textColor: '#383D41',
|
|
},
|
|
};
|
|
|
|
const styleConfig = zoneStyles[zoneData.type] || zoneStyles.default;
|
|
|
|
// Create the base style
|
|
const baseStyle = {
|
|
fill: styleConfig.fill,
|
|
stroke: styleConfig.stroke,
|
|
};
|
|
|
|
// Add text style if message exists
|
|
if (zoneData.message && zoneData.message.trim()) {
|
|
return new Style({
|
|
...baseStyle,
|
|
text: new Text({
|
|
font: 'bold 14px Arial, sans-serif',
|
|
text: zoneData.message,
|
|
fill: new Fill({ color: styleConfig.textColor }),
|
|
stroke: new Stroke({
|
|
color: 'white',
|
|
width: 3,
|
|
}),
|
|
placement: 'point', // Center text in polygon
|
|
overflow: true, // Allow text to overflow if needed
|
|
textAlign: 'center',
|
|
textBaseline: 'middle',
|
|
}),
|
|
});
|
|
}
|
|
|
|
// Return style without text if no message
|
|
return new Style(baseStyle);
|
|
};
|
|
|
|
export default getZoneStyleFromData;
|