고급활용 : Base Map(변수값,트리거설정),마커(경로설정,항목)
인천시 버스 노선 데이터를 활용하여 지도에서 항목 탭의 항목 변수를 사용하는 방법과 마커의 경로 설정 을 사용하여 지도에 경유하는 정류장을 화살표 라인으로 표현하는 예제입니다.
지도의 기본 레이어인 “Base Map” 에서 변수값 설정 을 통해 이벤트 변수로 받은 좌표로 자동으로 지도를 이동하는 방법을 설명합니다.
Contents
예제 보고서
데이터
공공데이터 인천광역시 버스노선별 정류장 현황 에서 csv 파일을 다운로드합니다.
다운로드
원본 데이터에는 위, 경도 좌표가 X_CRDNT, Y_CRDNT 로 epsg:5174 좌표계로 표시되어 있습니다.
IRIS 에서는 epsg:4326 좌표계를 사용하므로 좌표계를 변환하여 LAT, LON 필드를 추가한 데이터로 만든 파일을 생성합니다.
Analyzer 에서 데이터 모델 EDU_INCHEON_BUS_COOR 을 검색한 후 “내보내기” 로 다운로드 합니다.
콤보박스 : 노선번호 선택하기
인천시 버스 노선 번호를 콤보박스에서 선택할 수 있게 합니다.
데이터 모델 EDU_INCHEON_BUS_COOR 에서 disctinct 를 사용하여 중복을 제외한 노선번호를 가져옵니다.
콤보박스와 연결되는 데이터객체는 오브젝트ID( 자동으로 설정되면 변경안됩니다 )는 data-8이고, 변수 명( 사용자가 변경가능합니다 )은 data_combobox1 입니다.
데이터객체의 검색어에서 노선번호 필드만을 가져오므로, 콤보박스의 “속성” 탭 설정에서 “화면에 보여질 필드”, “값으로 사용돨 필드” 를 노선번호로 동일하게 자동 설정됩니다.
만약 데이터객체를 통해 여러 개의 필드를 가져오는 경우에는 상황에 맞게 필드를 선택하여 설정합니다.
“값으로 사용될 필드” 는 콤보박스 변수(여기서는 combo_1) 에 저장되어 다른 오브젝트에 이벤트 값으로 전달됩니다.
콤보박스의 “항목” 탭에서 “디폴트 값 선택” 에서 디폴트로 미리 노선번호를 설정하여 디폴트 노선번호의 데이터가 테이블에 출력되도록 합니다.
이렇게 디폴트 값을 정해두면 사용자가 콤보박스에서 노선번호를 선택하기 전이라도 콤보박스 변수 combo_1 에는 값이 들어 있어서 combo_1 을 이벤트로 받아서 처리하는 챠트,테이블에 데이터를 보여줄 수 있습니다.
테이블 1 : 노선번호 정보
데이터객체
테이블에 연결된 데이터객체 이름은 data_path_num_coor ( 오브젝트ID = data-38 ) 입니다.
검색어
* | where 노선번호 = '${combo_1}' | sort 순번
검색어 의미 : 데이터모델 EDU_INCHEON_BUS_COOR 로부터 콤보박스의 변수 combo_1 에 저장된 노선번호 필드로 필터링한 후 순번 필드로 sorting 하여 가져옵니다.
테이블객체
챠트(테이블) 객체는 연결된 데이터객체를 통해 결과 데이터를 테이블로 출력합니다.
그리고 “이벤트 값 전달 설정” 으로 area_2 변수에 정류소번호 필드를 전달하도록 설정합니다.
테이블의 특정 라인을 클릭(이벤트)하면, 해당 라인의 정류소번호 필드의 값이 변수명 area_2 에 저장되어 트리거설정이 적용된 다른 오브젝트에 전달됩니다.
이 테이블을 트리거로 설정한 오브젝트ID = hidden-25 는 테이블에서 선택하는 라인에 따라 달라지는 정류소번호를 검색어에서 ${area_2} 로 명기하여 활용할 수 있습니다.
테이블 2 : 정류소 정보
두번째 테이블은 처음에는 출력되는 것이 없고, 이벤트 조건에 따라 2종류의 데이터가 표시됩니다.
하나는 첫번째 테이블 에서 클릭한 정류소번호를 이벤트 변수로 전달받아서 해당 정류소번호와 그 정류소를 통과하는 버스 노선번호들에 대한 정보가 표시됩니다.
다른 하나는 노선번호 콤보박스 를 선택하면 이전 정류소번호 데이터는 사라지고, 선택한 노선번호에 대한 정보가 표시됩니다.
첫번째 테이블에서 정류소번호 35199 를 클릭했을 때
콤보박스에서 노선번호 103-1 를 선택하면 이전 정류소번호 35199 에 대한 내용 대신 103-1 노선번호 정보가 표시됩니다.
방법은 텍스트변환(hidden 객체) 객체를 활용하여 발생하는 이벤트에 따라 다른 검색어 구문이 실행되게 합니다.
다음 텍스트변환 부분에서 설명합니다.
테이블 2의 데이터 객체
챠트(테이블) 의 데이터 객체의 설정
텍스트 변환 객체를 잘 활용하면 SQL 의 CASE WHEN 이나 IF 절처럼 트리거 오브젝트 별로 다른 검색어 구문이 실행되도록 설정할 수 있습니다.
지도 : Base Map
“Base Map” 레이어는 기본 지도 레이어로 Naver Web Map, Open Street Map 과 국토정보플랫폼 Map 을 지도 API로 제공합니다.
여기서는 Naver Web Map 을 적용하였습니다.
지도에 대한 설명은 Docs 의 Manual » IRIS Studio » 데이터 시각화 (Data Visualize) 객체 를 참고하시기 바랍니다.
“Base Map” 레이어의 위치 좌표는 트리거 설정한 common_data_3 데이터객체의 변수값으로 위, 경도 좌표를 결정합니다.
데이터객체 변수 common_data_3 는 콤보박스에서 선택한 노선번호,기점 ~ 회차 정류소의 중간 정류소의 이름(정류소명), 순번, 위도, 경도 값을 가지고 있습니다.
따라서 사용자가 콤보박스에서 선택하는 노선번호에 따라 레이어에 표시되는 위치가 달라집니다.
캔버스에서 데이터객체 “common_data_3” 을 선택한 후 실행한 후에
“전체 변수명 보기” 에서 common_data_3 의 변수값을 확인할 수 있습니다.
results 가 실제로 이벤트 발생후에 저장된 값입니다.
${common_data_3.results[0][3]} 은 위도인 37.466458…
${common_data_3.results[0][4]} 은 경도인 126.68347…
지도가 보여주는 위치는 이 변수값에 저장되는 위, 경도 좌표에 따라 달라지게 됩니다.
지도 : 버스노선
“버스노선” 레이어는 콤보박스에서 선택한 노선번호의 정류소를 시각화유형 마커의 포인트로 표시합니다.
경로설정을 사용하여 순번에 따라 정류소(마커-포인트)와 정류소를 화살표 라인으로 연결하여 지도에 표시해주는 레이어입니다.
데이터 설정
콤보박스를 트리거 설정한 뒤에 콤보박스 변수 combo_1 에 저장되는 “노선번호” 필드로 필터링한 데이터를 가져옵니다.
시각화 설정
마커-포인트로 시각화유형을 설정합니다.
시각화옵션에서 노선번호의 정류소의 위,경도 좌표에 해당하는 데이터 필드를 설정하고, 경로 순서에 해당하는 필드를 지정합니다.
색상 텝에서 정류소의 포인트 색상을 지정합니다.
이 때 중간기점의 정류소의 포인트 색상은 강조를 위해 “색상” 텝에서 강조색상을 따로 지정합니다.
강조색상은 “항목”탭의 트리거 설정에 의해서 조건이 충족되면 지도에 표시가 됩니다.
시각화옵션의 “경로설정” 탭에서 사용을 체크하고, 화살표 라인의 색상을 지정합니다.
항목 설정
버스노선 레이어의 데이터중에서 항목 선택 에 선택된 “정류소명” 필드의 값과 항목설정 변수 에 입력한 common_data_3 의 값(정류소명) 이 같은 경우에는
마커의 시각화옵션의 ”강조색상” 으로 지도에 표현됩니다.
항목탭은 트리거로 설정된 객체의 변수를 항목설정 변수 에 지정하고, 지정한 레이어의 필드중에서 비교할 필드는 항목 선택 에서 지정하여 값이 같을 때 지도에 강조색상 으로 표시하려고 사용합니다.
