75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import { FeatureLike } from 'ol/Feature';
|
|
import { Coordinate } from 'ol/coordinate';
|
|
import { Circle, Point } from 'ol/geom';
|
|
import { Fill, Stroke, Style, Text } from 'ol/style';
|
|
import { ZoneData } from '../type';
|
|
|
|
const getCircleStyleFromData = ({ zoneData }: { zoneData: ZoneData }) => {
|
|
// Base style configuration for each zone type
|
|
console.log('Type: ', zoneData.type);
|
|
|
|
const circleStyles = {
|
|
warning: {
|
|
fill: new Fill({ color: 'rgba(250, 206, 104, 0.5)' }), // Yellow with transparency
|
|
stroke: new Stroke({ color: '#FFC107', width: 2 }),
|
|
textColor: '#856404',
|
|
},
|
|
alarm: {
|
|
fill: new Fill({ color: 'rgba(220, 53, 69, 0.8)' }), // 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 = circleStyles[zoneData.type] || circleStyles.default;
|
|
|
|
// Create styles array - we might need multiple styles for proper rendering
|
|
const styles: Style[] = [];
|
|
|
|
// Main style for Circle geometry (uses fill/stroke directly, not image)
|
|
const mainStyle = new Style({
|
|
fill: styleConfig.fill,
|
|
stroke: styleConfig.stroke,
|
|
});
|
|
styles.push(mainStyle);
|
|
|
|
// Add text style if message exists
|
|
if (zoneData.message && zoneData.message.trim()) {
|
|
const textStyle = new Style({
|
|
geometry: (feature: FeatureLike) => {
|
|
// Get the center of the circle for text placement
|
|
const geometry = feature.getGeometry();
|
|
if (geometry && geometry.getType() === 'Circle') {
|
|
// For Circle geometry, get the center and return it as a Point geometry
|
|
const circle = geometry as Circle;
|
|
const center: Coordinate = circle.getCenter();
|
|
return new Point(center);
|
|
}
|
|
return geometry;
|
|
},
|
|
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,
|
|
}),
|
|
textAlign: 'center',
|
|
textBaseline: 'middle',
|
|
}),
|
|
});
|
|
styles.push(textStyle);
|
|
}
|
|
|
|
// Return single style if no text, or array if text exists
|
|
return styles.length === 1 ? styles[0] : styles;
|
|
};
|
|
|
|
export default getCircleStyleFromData;
|