97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
/** 통수위험 결과의 도형별 스타일. 기존 값과 처리 순서를 유지한다. */
|
|
import Fill from "ol/style/Fill.js";
|
|
import CircleStyle from "ol/style/Circle.js";
|
|
import Stroke from "ol/style/Stroke.js";
|
|
import Style from "ol/style/Style.js";
|
|
import Text from "ol/style/Text.js";
|
|
import {
|
|
buildWaterRiskStatusLabel,
|
|
isWaterRiskDanger,
|
|
type WaterRiskStatus,
|
|
} from "@/app/(map-layout)/map/components/water-risk/water-risk-types";
|
|
|
|
/** 위험·위험(매핑관로없음)은 빨강, 정상은 파랑 반투명으로 중점관리지역 면을 채운다(화면설계서 21쪽). */
|
|
export const buildWaterRiskStatusFillColor = (riskStatus: WaterRiskStatus) =>
|
|
isWaterRiskDanger(riskStatus)
|
|
? "rgba(198, 40, 40, 0.24)"
|
|
: "rgba(21, 101, 192, 0.2)";
|
|
|
|
/** 중점관리지역 경계선·라벨 배경색. 위험 계열 판정은 면 색과 같다. */
|
|
export const buildWaterRiskStatusStrokeColor = (riskStatus: WaterRiskStatus) =>
|
|
isWaterRiskDanger(riskStatus)
|
|
? "rgba(198, 40, 40, 0.92)"
|
|
: "rgba(21, 101, 192, 0.92)";
|
|
|
|
/** capacity를 첨부 범례의 다섯 고정 구간색으로 변환한다. */
|
|
export const buildWaterRiskCapacityColor = (capacityRatio: number) => {
|
|
if (capacityRatio <= 0.25) return "#0000ff";
|
|
if (capacityRatio <= 0.5) return "#00d9ff";
|
|
if (capacityRatio <= 0.75) return "#00d95f";
|
|
if (capacityRatio < 1) return "#ffe100";
|
|
return "#ff1c15";
|
|
};
|
|
|
|
export const createWaterRiskAreaStyle = (feature: any) => {
|
|
const areaName = String(feature.get("areaName") ?? "");
|
|
const riskStatus = String(
|
|
feature.get("riskStatus") ?? "NORMAL",
|
|
) as WaterRiskStatus;
|
|
return new Style({
|
|
fill: new Fill({ color: buildWaterRiskStatusFillColor(riskStatus) }),
|
|
stroke: new Stroke({
|
|
color: buildWaterRiskStatusStrokeColor(riskStatus),
|
|
width: 3,
|
|
}),
|
|
text: new Text({
|
|
text: `${areaName}\n${buildWaterRiskStatusLabel(riskStatus)}`,
|
|
font: "700 13px sans-serif",
|
|
fill: new Fill({ color: "#ffffff" }),
|
|
backgroundFill: new Fill({
|
|
color: buildWaterRiskStatusStrokeColor(riskStatus),
|
|
}),
|
|
padding: [5, 8, 5, 8],
|
|
overflow: true,
|
|
}),
|
|
zIndex: 9996,
|
|
});
|
|
};
|
|
|
|
export const createWaterRiskPipeStyle = (feature: any) => {
|
|
const capacityRatio = Number(feature.get("capacityRatio") ?? 0);
|
|
const capacityColor = buildWaterRiskCapacityColor(capacityRatio);
|
|
return [
|
|
new Style({
|
|
stroke: new Stroke({
|
|
color: "rgba(255,255,255,0.98)",
|
|
width: 9,
|
|
lineCap: "round",
|
|
lineJoin: "round",
|
|
}),
|
|
zIndex: 9997,
|
|
}),
|
|
new Style({
|
|
stroke: new Stroke({
|
|
color: capacityColor,
|
|
width: 4,
|
|
lineCap: "round",
|
|
lineJoin: "round",
|
|
}),
|
|
zIndex: 9998,
|
|
}),
|
|
];
|
|
};
|
|
|
|
/** 맨홀 Flooding이 0이면 파랑, 양수이면 빨강으로 표시한다. */
|
|
export const createWaterRiskManholeStyle = (feature: any) => {
|
|
const floodingFlow = Number(feature.get("floodingFlow") ?? 0);
|
|
const isFlooding = floodingFlow > 0;
|
|
return new Style({
|
|
image: new CircleStyle({
|
|
radius: isFlooding ? 7 : 4,
|
|
fill: new Fill({ color: isFlooding ? "#ff1c15" : "#1677ff" }),
|
|
stroke: new Stroke({ color: "#ffffff", width: 1.5 }),
|
|
}),
|
|
zIndex: 9999,
|
|
});
|
|
};
|