[openlayers] CreateRingMap for OpenLayers(based on 2.13.1)

CreateRingMap.zip

< CreateRingMap for OpenLayers >

RingMap은 시계열 데이터를 시각화하는 하나의 방법으로 OpenLayers2 기반(이하 OL2)에서 RingMap을 생성할 수 있는 라이브러리를 만들었다. 이민파 소장님(Minpa Lee)의 Create Ring Maps using PyQGIS Script 포스팅 내용을 참고하였다.

OL2의 {OpenLayers.Layer.Vector}를 상속받아 Layer 타입의 형식을 가지고 있는 하나의 완성체 클래스이다. 기존의 레이어와 동일한 방법으로 레이어를 Map Object에 추가할 수 있다. CLASS_NAME을 "OpenLayers.Layer.CreateRingMap" 라는 이름으로 부여했다.

심볼 스타일 설정을 위해 geostats라는 classification 라이브러리를 사용하였는데, geostats에서 지원하는 classify 함수로 Equal Interval, Quantile, Natural Breaks 등 여러가지가 있지만 Equal Interval만 고정으로 사용하도록 했다. 같은 데이터로 QGIS와 값을 비교를 해보니 Equal Interval만 정확히 맞아 떨어졌다.

DEMO 페이지를 통해서 간단하게 실행해 볼 수 있다.

첨부된 파일의 openlayers_ringmap.html 열어 샘플예제를 확인한다. Vector 레이어 하나가 올라오지 않는다면 크로스 도메인 문제이고, 라이브러리 참조를 인터넷 링크로 걸어놨기 때문에 인터넷 연결이 되지 않는 곳에서는 예제를 제대로 실행할 수 없다.

예제에 있는 샘플 데이터는 이민파 소장님 포스팅에 있는 데이터셋과 동일한 것을 사용하고 있는데, 좌표변환된(EPSG:5176에서 EPSG:3857) GML, GeoJSON 타입으로 첨부하였다.

- CreateRingMap Script : https://www.dropbox.com/s/g8y3hg0vqbgsvmj/CreateRingMap.js

CreateRingMap class는 단독으로 사용될 수 없고, 시계열 속성을 가진 벡터 레이어가 먼저 Map에 포함되어 있어야 한다. 대상이 되는 벡터 클래스의 필드, 그리고 디스플레이 옵션들로 이루어져있다. 샘플예제에 포함되어 있는 범례는 CreateRingMap에 포함된 기능은 아니다.

• 필수 프로퍼티
• sourceLayer : 시계열 데이터를 가진 원본 레이어 - {OpenLayers.Layer.Vector}
• fieldNames : 원본 레이어의 시계열 필드명 - {Array}
• 선택 프로퍼티
• labelDisplay : 공통 라벨설정 (default false) - {Boolean}
• labelField : 라벨을 설정할 필드명 - {String}
• valueDisplay : 셀에 값 표시 유무 (default false) - {Boolean}
• anchorDisplay : 원본 데이터와 첫번째 셀간의 연결선 생성   (default false) - {Boolean}
• colors : 색상설정 {Array}

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript" src="./CreateRingMap.js"></script> <script type="text/javascript" src="http://www.empreinte-urbaine.eu/mapping/geostats/lib/geostats.js"></script>  

var map = new OpenLayers.Map('map', { ... }); var sourceLayer = new OpenLayers.Layer.Vector( 'Source Layer', { ... } ); map.addLayer(sourceLayer); var ringLayer = new OpenLayers.Layer.CreateRingMap( 'RingMap Layer', //레이어명 sourceLayer, //참조(소스) 벡터 데이터 fieldNames, //데이터 필드 { //라벨 보기설정 (default false) labelDisplay: false, //라벨 필드설정 labelField: 'sgg_nm', //링 피처에 값 표시 (default false) valueDisplay: false, //원본데이터 연결선 생성 (default false) anchorDisplay: true, //색상표시 colors: ['#8ec1dd', '#5aa2cf', '#3181bd'] } ); map.addLayer(ringLayer);

< Example : anchorDisplay가 설정되어 원본 데이터의 중심점과 연결됨 >

< Example : valueDisplay가 설정되어 각 Cell의 Value값이 표시 >

< Example : colos의 기본값 >