[OL_WaterLogics] 상수도관망최적유지관리시스템 개발_2.계측기 표시

[공공칠빵]

[OL_WaterLogics] 상수도관망최적유지관리시스템 개발

2.계측기: 수압/유량(적산유량)/수질 등 센서 모니터링

* 아래 기능별 사용방법은 유튜브 동영상을 참조하세요. (구독자등록해주시면 더좋아요^^)

   https://www.youtube.com/srhong007/

* 데모:   OL-WaterLogics Version 2020" (IE에서는 느립니다. Chrome 사용권장)

OpenLayers 6.X /JavaScript/html/css으로 그동안 Education을 만들어오면서 별도 프로젝트를 수행하였습니다.

기능중 공통 및 특이한 기능은  "[OpenLayers] OL-FGIS/Pro 2020 상용버전 프로토타입버전"으로 1차 완료하였습니다. 이젠 응용개발로 본연의 효자종목인 "[OL_WaterLogics] 상수도관망최적유지관리시스템" 구축을 진행중에 있습니다. 기존 Flash기반의 "[상수도관망최적관리시스템 2020] 통합모니터링시스템"을 OpenLayers/JavaScript/html5 기반으로 만들어가는 내용을 정리해보려 합니다.

목표기능은 기존  "WaterLogics"의 기능은 참조하세요.

그중 두번째로 GeoServer + MS SQL의 상수도 수압/유량 등 자동계측기 레이어를 지도에 중첩하는 입니다.

여러 시스템에서 지도상에 마커에 문자정보로 표시하다보면 겹침에 대한 다양한 시각적 표현으로 가독성을 높이려

여러 방법을 사용하고 있습니다. 이번 시스템에서는 아래와 같은 방안을 제시합니다(더 효과작인 아이디어가 잇으면 알려주세요)

 ✪ [OL_WaterLogics] 상수도관망최적유지관리시스템 개발 관련글

 1.상수시설물관리 : 상수시설물 지도 중첩 ( https://cafe.naver.com/gisapplication/1069 )

   - 줌인후 이동시 타일맵 깨짐화면(잔상) 제거하기

   - 속성정보중 코드값을 한글 코드명으로 보여주기 위한 코딩중 주의사항

   - 주로 사용하는 레이어 형식 정리 (용도/장단점)      

상수도 계측기 레이어 구성은 간단합니다.

1. 계측기 Point객체에 DBMS에 계측값을 표시하는 작은 심볼에 최적으로 표시하여 가독성을 높이려 합니다.

   - 실시간 센서의 계측값(수압/유량(적산유량)/수질 등) 표시. 계측값의 수신상태표시(적/황/청 신호등)

   - 각 계측기 클릭으로 시간/주간/원간/년간 시계열 분석, 이상징후 분석 등으로 분기한다. 

2. 객체간 심볼에서 문자겹침 zIndex로 해결(OpenLayers에서의 버그(?)는 아닐거구 규칙이라하자. 레이어>객체 순서

   보다는 동일 레이어에서는 텍스트를 맨 나중에 그리나보다)

   - 또한, 여러 레이어가 있더라도 마우스 오버시나 선택시 최상위로 심볼 표시.

3. 스케일에 따라 계측기심볼이 크다보니 겹침을 Cluster로 해결 (시각적 효과로 AnimatedCluster 추가)

   - 기존 Cluster의 거리제한을 하나의 숫자로 하므로, 심볼의 가로와 세로별로 거리제한을 사용한 ClusterEx로 

     확장 개발하여 과도한 클러스터링을 낮출 수 있다.

   - 클러스트링된 계측기들의 각 센서값을 자동으로 슬라이딩하여 순차적으로 겹친 계측기들의 정보를 시각화함

* Tip 1 : 센서 계측기 심볼 등록시 글자 겹침 주의사항 

- 계측기에는 유량/적산유량/수압/수질 등 여러 값을 보여줍니다.

- Openlayers에서는 레이어별 객체 그리기 순서보다는 텍스트를 맨 나중에 그리는것 같습니다.

  아래는 기본 객체스트일에 여러 스타일을 합병하였으나 다른 객체의 텍스트가 상위에 그려져 중첩이 되고 있습니다.

  그리고 객체에 마우스 오버시나 선택시에도 뒤에 숨어 있습니다.

* 위의 문제점을 해결 방안 입니다.

- 다른 객체의 텍스트가 상위에 그려져 중첩이 되는것은 각 객체의 심볼스타일에 zIndex값을 넣어줍니다.

  계측기 레이어의 change에벤트시 초기화로 0을 주고 객체 스타일 렌더링함수에서 일련순서값을 zIndex 사용

- 객체에 마우스 오버시나 선택시 맨압으로 나오도록하는 여러 방법중 별도의 레이어에 객체를 clon하여 임시로 맵압에

  하이라이트식으로 보여주게 하였습니다. 소스(https://cafe.naver.com/gisapplication/1069)를 참조하세요.

* Tip 2 : 센서 계측기 가로세로차이가 심한 심볼 Cluster시 효과적인 방안  

- OL의 기본적인 Cluster는 클러스터 간 최소거리(픽셀)값을 하나만 있어서, 가로/세로의 격차가 심할경우 비효율

  그리고, 클러스터링된 객체간에도 심볼크기에 따라 겹치는 문제(구글링에서도 최적방안이 없다고 한다) 

  이미 클러스터링된 하나의 객체에 여러 계측기값 표현 아이디어 필요. 

- 새로만든 ol.source.ClusterEx에는 이러한 문제를 해결해보았습니다.  => 클러스터 간 최소거리(픽셀)값
  을 X/Y(가로/세로)로 기능 확장 응용함.
   => 클러스터링된 객체의 위치는 각 객체의 위치를 계산한 중앙 좌표를 구하는 수식을 수정하여
       클러스터링한 MBR의 중심점으로 표시하도록함
   => 클러스터링된 여러 객체의 값을 자동 슬라이드 처럼 타이머로 리프레쉬(dispatchEvent('change'))함.
       시시각적으로는 AnimatedCluster 레이어를 사용하되 깜박임과 표현정보를 위해 기능 수정응용함.  

* 주요소스 (소스수정관리를 위해 원문에서 참조하세요 https://cafe.naver.com/gisapplication/1070) 
- animatedclusterlayer.js 응용 => animatedclusterlayerEx.js 
- Cluster을 응용 => ClusterEx.js

*************************************************************************************************

이전 계측기 심볼에 대한 시각화방안들이였습니다

(1) 기존 상수도시스템 GIS에서 많이들 보신 계측기 심볼들의 중첩

(2) 기존 상수도시스템 GIS에서 심볼을 최소화하고 마우스 오버/클릭시 상세정보창으로 3단계 펼쳐지게한 심볼

원문에서 참조하세요 https://cafe.naver.com/gisapplication/1070) 

(3) 기존 상수도시스템 GIS에서 절대 겹치지 않는 심볼만들기(객체수에 따라 최소한의 겹침)

    지도 중앙을 최대한 피하고, 연장선을 이용한 위치 보기기능 구현

원문에서 참조하세요 https://cafe.naver.com/gisapplication/1070)