Created
December 11, 2020 11:07
-
-
Save simplenotezy/c19aee83bd557c66d7e3d98ebde11bd9 to your computer and use it in GitHub Desktop.
groundwater stylees
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Circle, Stroke, Style, Fill } from "ol/style"; | |
import Feature from "ol/Feature"; | |
import Point from "ol/geom/Point"; | |
const percentileOpacity = 0.3; | |
export const percentileConfigs = [ | |
{ | |
value: "p99", | |
color: "#083092", | |
rgba: `rgba(8, 47, 145, ${percentileOpacity})`, | |
stroke: "#000", | |
title: "Ekstrem høj" | |
}, | |
{ | |
value: "p95", | |
color: "#4848FF", | |
rgba: `rgba(72, 72, 255, ${percentileOpacity})`, | |
stroke: "#000", | |
title: "Meget høj" | |
}, | |
{ | |
value: "p90", | |
color: "#10B1BF", | |
rgba: `rgba(16, 177, 191, ${percentileOpacity})`, | |
rgba: "", | |
stroke: "#000", | |
title: "Langt over normalt" | |
}, | |
{ | |
value: "p75", | |
color: "#00EAFF", | |
rgba: `rgba(0, 234, 255, ${percentileOpacity})`, | |
stroke: "#000", | |
title: "Over normalt" | |
}, | |
{ | |
value: "p50", | |
color: "#DFDFDF", | |
rgba: `rgba(223, 223, 223, ${percentileOpacity})`, | |
stroke: "#000", | |
title: "Normalt" | |
}, | |
{ | |
value: "p25", | |
color: "#F8EE67", | |
rgba: `rgba(248, 238, 103, ${percentileOpacity})`, | |
stroke: "#000", | |
title: "Under normalt" | |
}, | |
{ | |
value: "p10", | |
color: "#F8AD00", | |
rgba: `rgba(248, 173, 0, ${percentileOpacity})`, | |
stroke: "#000", | |
title: "Langt under normalt" | |
}, | |
{ | |
value: "p5", | |
color: "#F80000", | |
rgba: `rgba(248, 0, 0, ${percentileOpacity})`, | |
stroke: "#000", | |
title: "Meget lav" | |
}, | |
{ | |
value: "p1", | |
color: "#A11113", | |
rgba: `rgba(161, 17, 19, ${percentileOpacity})`, | |
stroke: "#7F0507", | |
title: "Dybere end 10 m" | |
}, | |
{ | |
value: "p0", | |
color: "#878787", | |
rgba: `rgba(135, 135, 135 ${percentileOpacity})`, | |
stroke: "#878787", | |
title: "Manglende værdi" | |
} | |
]; | |
export const absoluteScaleConfigs = [ | |
{ | |
value: 0.5, | |
color: "#4848FF", | |
stroke: "#000", | |
title: "0 - 0,5 m" | |
}, | |
{ | |
value: 1, | |
color: "#00EAFF", | |
stroke: "#000", | |
title: "0,5 - 1 m" | |
}, | |
{ | |
value: 2, | |
color: "#DFDFDF", | |
stroke: "#000", | |
title: "1 - 2 m" | |
}, | |
{ | |
value: 5, | |
color: "#F8AD00", | |
stroke: "#000", | |
title: "2 - 5 m" | |
}, | |
{ | |
value: 10, | |
color: "#F80000", | |
stroke: "#000", | |
title: "5 - 10 m" | |
}, | |
{ | |
value: Number.MAX_SAFE_INTEGER, | |
color: "#A11113", | |
stroke: "#7F0507", | |
title: "> 10 m" | |
}, | |
{ | |
value: Number.MIN_SAFE_INTEGER, | |
color: "#878787", | |
stroke: "#616161", | |
title: "Manglende værdi" | |
} | |
]; | |
export const statisticalLevelConfigs = [ | |
{ | |
value: 1, | |
color: "#083092", | |
stroke: "#041E5F", | |
title: "< 1 m.o.h" | |
}, | |
{ | |
value: 3, | |
color: "#4848FF", | |
stroke: "#1E1EC9", | |
title: "1 til 3 m.o.h" | |
}, | |
{ | |
value: 5, | |
color: "#10B1BF", | |
stroke: "#14939E", | |
title: "3 til 5 m.o.h" | |
}, | |
{ | |
value: 7, | |
color: "#00EAFF", | |
stroke: "#00C9DB", | |
title: "5 til 7 m.o.h" | |
}, | |
{ | |
value: 9, | |
color: "#DFDFDF", | |
stroke: "#CACACA", | |
title: "7 til 9 m.o.h" | |
}, | |
{ | |
value: 11, | |
color: "#F8EE67", | |
stroke: "#DCD24C", | |
title: "9 til 11 m.o.h" | |
}, | |
{ | |
value: 13, | |
color: "#F8AD00", | |
stroke: "#DE9B00", | |
title: "11 til 13 m.o.h" | |
}, | |
{ | |
value: 15, | |
color: "#F80000", | |
stroke: "#D50000", | |
title: "13 til 15 m.o.h" | |
}, | |
{ | |
value: Number.MAX_SAFE_INTEGER, | |
color: "#A11113", | |
stroke: "#7F0507", | |
title: "> 15 m.o.h" | |
} | |
]; | |
export const createStyle = ({ color, stroke, radius }) => { | |
return function(feature, resolution) { | |
const scale = (1 / Math.pow(resolution, 1 / 2)) * 10; | |
const radiusScaled = scale > 1 && scale < 3 ? radius * scale : radius; | |
return new Style({ | |
image: new Circle({ | |
radius: radiusScaled, | |
fill: new Fill({ | |
color | |
}), | |
stroke: new Stroke({ | |
color: stroke, | |
width: 1 | |
}) | |
}) | |
}); | |
}; | |
}; | |
export const percentileStyles = percentileConfigs.map(config => { | |
const { color, stroke } = config; | |
return createStyle({ | |
color, | |
stroke, | |
radius: 4 | |
}); | |
}); | |
export const percentileHighlightStyles = percentileConfigs.map(config => { | |
const { color, stroke } = config; | |
return createStyle({ | |
color, | |
stroke, | |
radius: 8 | |
}); | |
}); | |
export const absoluteScaleStyles = absoluteScaleConfigs.map(config => { | |
const { color, stroke } = config; | |
return createStyle({ | |
color, | |
stroke, | |
radius: 4 | |
}); | |
}); | |
export const absoluteScaleHighlightStyles = absoluteScaleConfigs.map(config => { | |
const { color, stroke } = config; | |
return createStyle({ | |
color, | |
stroke, | |
radius: 8 | |
}); | |
}); | |
export const statisticalLevelStyles = statisticalLevelConfigs.map(config => { | |
const { color, stroke } = config; | |
return createStyle({ | |
color, | |
stroke, | |
radius: 4 | |
}); | |
}); | |
export const statisticalLevelHighlightStyles = statisticalLevelConfigs.map( | |
config => { | |
const { color, stroke } = config; | |
return createStyle({ | |
color, | |
stroke, | |
radius: 4 | |
}); | |
} | |
); | |
export const getStyle = (array, index) => { | |
const style = array[index]; | |
if (!style) { | |
return createStyle({ | |
color: "#000", | |
stroke: "#000", | |
radius: 4 | |
}); | |
} | |
return style; | |
}; | |
export const createHighlightStyle = ({ color, stroke }) => { | |
return new Style({ | |
image: new Circle({ | |
radius: 8, | |
fill: new Fill({ | |
color | |
}), | |
stroke: new Stroke({ | |
color: stroke, | |
width: 2 | |
}) | |
}) | |
}); | |
}; | |
export const createPoint = ({ x, y, id, title }) => { | |
const point = new Point([x, y]); | |
return new Feature({ | |
geometry: point, | |
id, | |
title | |
}); | |
}; | |
export const createStyledPoint = ({ x, y, id, title, color, stroke }) => { | |
const point = new Point([x, y]); | |
const defaultStyle = createStyle({ color, stroke }); | |
const highlightStyle = createHighlightStyle({ color, stroke }); | |
const feature = new Feature({ | |
geometry: point, | |
id, | |
title, | |
defaultStyle, | |
highlightStyle | |
}); | |
feature.setStyle(defaultStyle); | |
return feature; | |
}; | |
export const createStyledPointFromPercentile = ({ | |
x, | |
y, | |
id, | |
layerName, | |
title, | |
configItemIndex | |
}) => { | |
const point = new Point([x, y]); | |
const defaultStyle = getStyle(percentileStyles, configItemIndex); | |
const highlightStyle = getStyle(percentileHighlightStyles, configItemIndex); | |
const feature = new Feature({ | |
geometry: point, | |
id, | |
layerName, | |
title, | |
defaultStyle, | |
highlightStyle | |
}); | |
feature.setStyle(defaultStyle); | |
return feature; | |
}; | |
export const createStyledPointFromAbsolutScale = ({ | |
x, | |
y, | |
id, | |
layerName, | |
title, | |
configItemIndex | |
}) => { | |
const point = new Point([x, y]); | |
const defaultStyle = getStyle(absoluteScaleStyles, configItemIndex); | |
const highlightStyle = getStyle( | |
absoluteScaleHighlightStyles, | |
configItemIndex | |
); | |
const feature = new Feature({ | |
geometry: point, | |
id, | |
layerName, | |
title, | |
defaultStyle, | |
highlightStyle | |
}); | |
feature.setStyle(defaultStyle); | |
return feature; | |
}; | |
export const createStyledPointFromStatisticalLevel = ({ | |
x, | |
y, | |
id, | |
title, | |
configItemIndex | |
}) => { | |
const point = new Point([x, y]); | |
const defaultStyle = getStyle(statisticalLevelStyles, configItemIndex); | |
const highlightStyle = getStyle( | |
statisticalLevelHighlightStyles, | |
configItemIndex | |
); | |
const feature = new Feature({ | |
geometry: point, | |
id, | |
title, | |
defaultStyle, | |
highlightStyle | |
}); | |
feature.setStyle(defaultStyle); | |
return feature; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment