맨홀 선택 시 기존 심볼이 유지되도록 보완

2026-08-06 09:42:41 +09:00
parent 9d2c0afb98
commit 3d320d0e19
3 changed files with 32 additions and 10 deletions
@@ -590,3 +590,13 @@
 | 지도 이동 조건 | 정적 통과 | `trtdstId`, `trtdstNm` 필수 전달 및 함수 내부 방어 조건 적용 |
 | 합계 행 | 정적 통과 | 클릭 선택 이벤트가 없어 지도 대상이 되지 않음 |
 | 브라우저 수동 검증 | 대기 | 관로·맨홀 탭 각각에서 미선택·행 선택 상태 확인 필요 |
+
+## 37. 2026-08-06 맨홀조사 선택 심볼 유지 점검
+
+| 검증 항목 | 결과 | 비고 |
+|---|---|---|
+| 실제 레이어 스타일 조회 | 정적 통과 | 선택기의 `getLayer(feature)`와 레이어 `getStyleFunction()` 연결 |
+| 점 시설 렌더링 순서 | 정적 통과 | 선택 원형 강조 후 원래 아이콘을 위에 렌더링 |
+| 선형 시설 회귀 | 정적 통과 | 기존 스타일 뒤에 선형 선택 강조를 추가하는 순서 유지 |
+| 변경 공백·구문 검사 | 통과 | `git diff --check`, `node --check` 수행 |
+| 브라우저 수동 검증 | 대기 | 맨홀 클릭 후 보라색 맨홀 심볼과 선택 원이 함께 유지되는지 확인 필요 |
@@ -847,3 +847,10 @@
 - 관로·맨홀 종합집계표에서 실제 처리분구 행을 선택한 뒤에만 버튼을 활성화한다.
 - 지도 이동 시 선택 처리분구의 `trtdstId`, `trtdstNm`을 필수로 전달하며 합계 행은 선택 대상에서 제외한다.
 - 프론트 진입 조건만 보완했으며 백엔드와 공통 지도 조회 계약은 변경하지 않았다.
+
+## 40. 2026-08-06 맨홀조사 선택 심볼 유지
+
+- 맨홀조사 피처를 클릭하면 공통 보라색 선택 원만 남고 기존 맨홀 아이콘이 사라지던 문제를 보완했다.
+- 공통 지도 선택기가 선택된 피처의 실제 OpenLayers 레이어 스타일 함수를 우선 사용하도록 변경했다.
+- 점 시설은 선택 원형 강조를 먼저 그리고 원래 아이콘을 위에 다시 그려, 선택 중에도 대상 맨홀을 식별할 수 있게 했다.
+- 선형 시설의 기존 선택 강조 순서는 유지했으며 API·DB·백엔드 동작은 변경하지 않았다.
@@ -96,26 +96,31 @@ GisOlSelect.prototype = {

 		this.selectInteraction = new Select({
 			style: function (feature, resolution) {
-				let styles = [];
-				let layer = feature.getLayer();
-				let styleFn = GisApp.Module.style.getLayerStyleFunction(layer, null);
+				let originalStyles = [];
+				const layer = me.selectInteraction?.getLayer(feature) || feature.getLayer?.();
+				// 프론트에서 직접 생성한 벡터 레이어도 선택 시 실제 레이어 스타일을 유지한다.
+				const layerStyleFn = layer?.getStyleFunction?.();
+				const styleFn = typeof layerStyleFn === 'function'
+					? layerStyleFn
+					: layer
+						? GisApp.Module.style.getLayerStyleFunction(layer, null)
+						: null;

 				if (styleFn) {
 					const style = styleFn(feature, resolution);
 					if (Array.isArray(style)) {
-						styles.push(...style);
-					} else {
-						styles.push(style);
+						originalStyles.push(...style.filter(Boolean));
+					} else if (style) {
+						originalStyles.push(style);
 					}
 				}
 				const geometryType = feature?.getGeometry?.()?.getType?.();
 				const focusedBoundary = me.focusedBoundaryFeatures.has(feature);
 				if (focusedBoundary || geometryType === 'LineString' || geometryType === 'MultiLineString') {
-					styles.push(...focusedLineStyle);
-				} else {
-					styles.push(baseStyle);
+					return [...originalStyles, ...focusedLineStyle];
 				}
-				return styles;
+				// 점 시설은 원형 선택 강조를 먼저 그린 뒤 원래 아이콘을 위에 다시 그린다.
+				return [baseStyle, ...originalStyles];
 			},
 			layers: function (layer) {
 				let clickPsblYn = layer?.get('clickPsblYn');