[OpenLayers] 태양위치에 따른 건물 그림자 2D 시뮬레이션 V2.0

[공공칠빵]

[OpenLayers] 태양위치에 따른 건물 그림자 2D 시뮬레이션 V2.0

이전글에서 OpenLayers기반으로 브이월드의 WFS를 사용하여 입체적 강조로 건물을 3D(2.5D)로 중첩

( https://cafe.naver.com/gisapplication/1047

그리고 DEM 타일맵 데이터를 OpenLayers image raster rendering으로 일자별 태양위치(방위각/고도각)

과 음영기복도분석(셀별 고도/경사/향 계산)을 해보았는데요. (https://cafe.naver.com/gisapplication/1059)

위 2가지를 각각 확대해서

1) OpenLayers기반으로 브이월드의 건물 WFS를 사용하여, 2D로 그림자 시뮬레이션 

   ( https://cafe.naver.com/gisapplication/1061

   * 데모: http://www.gisapplication.kr/FGISPRO_SunbuildingShadow/fgis/

2) 지형의 그림자 시뮬레이션 ( https://cafe.naver.com/gisapplication/1062 )

   * 음영기복도만 데모: http://www.gisapplication.kr/FGISPRO_SunCalc/FGIS/

    * 지형그림자만 데모: http://www.gisapplication.kr/FGISPRO_SunCalcShadow/FGIS/

   * 음영 + 지형그림자 데모: http://www.gisapplication.kr/FGISPRO_SunCalcALL/FGIS/

=======================================================================================

이번 내용은 건물의 그림자를 표현시 건물의 외곽을 제외한 그림자만 표현합니다.

 * 데모: http://www.gisapplication.kr/FGISPRO_SunbuildingShadowOnly/fgis/

 용도는 건물의 외곽을 제외한 그림자만 표현시, 3D(2.5D) 건물 또는 지붕의 햇빛지도 중첩, 지붕의 그늘/주제도 등

 중첩시 가시성이 좋을것 같습니다.

단점은 조금 느립니다. 그리고 IE에서는 안됩니다(globalCompositeOperation 등 HTML5 canvas 지원 않음)

원리는

- 일시에 따른 태양의 위치 계산과 건물 그림자 계산은 지난번 글을 참조하시면됩니다.

- 건물의 외곽의 기둥들의 그림자와 지붕은 그립니다. 그리고 건물의 외곽위치를 투명하게 자르면 그림자만 그립니다.

  이때, ctx.globalCompositeOperation = 'xor';로 두 도형이 겹치는 곳이 투명하게 변하며, 나머지는 평범하게 그려집니다.

- 문제는 건물 그리는 순서로 인해 겹칠때 그림자가 다른 건물의 외곽에 숨거나 나타납니다.

  이문제는 다소 시간이 걸리더라도 임시 canvas 에 그린 후 원본 canvas에 그립니다,

  이때는 ctx.globalCompositeOperation = lighter';으로 두 도형이 겹치는 곳의 색상값을 합한 값으로 결정됩니다.

 

* 주요소스는 수정보완 등을 위해 원문에 올렸습니다.

(원문 : https://cafe.naver.com/gisapplication/1085)

* 적용 예 : 서울시 햇빛지도 + 건물그림자