<![CDATA[
<p> </p><p><span style="color: #009d91;"><b>[VWORLD3D] </b></span><span style="color: #009d91;"><b>브이월드 WebGL 3.0버전 Plug-in만들기 </b></span></p><p><span style="color: #009d91;"><b>: 둘러보기, 스카이라인, 일조량/일조권분석</b></span></p><p><span style="color: #000000;"><b>지난 글에서는 브이월드 WebGL 3.0버전 미리사용해보기( </b></span><span style="color: #000000;"><b><a href="https://cafe.naver.com/gisapplication/1213" target="_top" class="ke-link">https://cafe.naver.com/gisapplication/1213</a></b></span><span style="color: #000000;"><b> )에서 3,0API발표전에 "사업 대상지의 지형 평탄화(토공분석 응용)과 기존 건물 제거(건물삭제 응용)과 사용자 가상건물 생성 응용"기능을 미리 사용해 보았습니다.</b></span></p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1"><tbody><tr><td colspan="3" rowspan="1"><span data-ke-size="size18"><b>* Plug-in 데모 : </b></span><span data-ke-size="size18"><a href="http://www.gisapplication.kr/GA_VW_Plugin/" target="_top" class="ke-link">http://www.gisapplication.kr/GA_VW_Plugin/</a></span><br><span data-ke-size="size18">​</span><br><span data-ke-size="size18"><b>* 응용시스템</b></span><br><span data-ke-size="size16"><b>(1) AI건축자동설계 : 가상 건축 갤러리 뷰어 시스템</b></span><br><span data-ke-size="size16"><a href="https://www.vworld.kr/dtac/dtac_shopdetail_s002.do?viwTyp=L&shpIde=&prdIde=DTAC_PROD_0000000064&empIde=" target="_top" class="ke-link">https://www.vworld.kr/dtac/dtac_shopdetail_s002.do?viwTyp=L&shpIde=&prdIde=DTAC_PROD_0000000064&empIde=</a></span><br><span data-ke-size="size16"><b>(2) 비행안전구역 및 장애물제한표면구역 검색시스템</b></span><br><span data-ke-size="size16"><a href="https://www.vworld.kr/dtac/dtac_shopdetail_s002.do?viwTyp=L&shpIde=&prdIde=DTAC_PROD_0000000063&empIde=" target="_top" class="ke-link">https://www.vworld.kr/dtac/dtac_shopdetail_s002.do?viwTyp=L&shpIde=&prdIde=DTAC_PROD_0000000063&empIde=</a></span></td></tr></tbody></table></div><p> </p><p><span style="color: #000000;">이번에는 API3.0발표이후 기본지도에 "</span><span style="color: #000000;"><b>스카이라인, 일조량/일조권분석</b></span><span style="color: #000000;">"​기능을 추가해 보았습니다.</span></p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PFR9/69abb24570d3443c5e35f5a4cb49adbf2304eaf1" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PFR9/69abb24570d3443c5e35f5a4cb49adbf2304eaf1" data-origin-width="900" data-origin-height="509"></div><div class="figure-video" data-ke-type="video" data-video-url="https://kakaotv.daum.net/embed/player/cliplink/rvhww9oithl78ycrw4rv3lvt8@my?service=daum_cafe" data-video-host="kakaotv" data-video-play-service="daum_cafe" data-video-width="712" data-video-height="400" data-ke-style="alignCenter" data-video-thumbnail="https://thumb.kakaocdn.net/dna/kamp/source/rvhww9oithl78ycrw4rv3lvt8/thumbs/2.jpg?credential=TuMuFGKUIcirOSjFzOpncbomGFEIdZWK&expires=33286425781&signature=jljRfMWW96N%2BO4OJE0TtJ71bXJ8%3D" data-ke-mobile-mobileStyle="widthFull" data-video-origin-width="712" data-video-origin-height="400"><iframe src="https://kakaotv.daum.net/embed/player/cliplink/rvhww9oithl78ycrw4rv3lvt8@my?service=daum_cafe&ptoken=v2_30a324777760697d63f8fb97ac4947adaaf83a66290886cde8014a5281fe9c58c338b584ff52426a2bb09a9b4c6906c7d8c34e0d3bc6c183fc7bc63f4a" width="712" height="400" frameborder="0" scrolling="no" allowfullscreen="" allow="encrypted-media"></iframe><div class="figcaption"></div></div><p><span style="color: #000000;"><b>1. 일조권 분석</b></span></p><p><span style="color: #000000;"><b>일조량 및 일조권 분석</b></span></p><p><span style="color: #000000;">사용자 분석일자 또는 동지일을 기준으로 희망하는 시간을 선택 후, 지도상에 지점을 선택하여 </span></p><p><span style="color: #000000;">일조량 및 총 일조량과 일조권(총 일조량과 연속일조량)을 한번에 분석 확인할 수 있습니다.</span></p><p><span style="color: #000000;">지도상에 분석지점의 일조, 비일조 영향권과 일조권 분석결과 창이 표출됩니다.</span></p><p><span style="color: #000000;">일조권 분석결과 창에서 일출시간, 일몰시간, 총 일조량, 연속 일조량(최대)를 확인할 수 있습니다.</span></p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1"><tbody><tr><td colspan="3" rowspan="1"><span style="color: #000000;"><b>일조량(일조시간)이란? </b></span><br><span style="color: #000000;">일정한 물체의 표면적이나 지표면에 비치는 태양 관선의 양입니다.</span><br><span style="color: #000000;">분석 지점의 시간별 일조량 및 총 일조량을 확인할 수 있습니다.</span></td></tr><tr><td colspan="3" rowspan="1"><span style="color: #000000;"><b>일조권이란?</b></span><br><span style="color: #000000;">동지일 기준으로 09시 ~ 15시 사이 연속 2시간 이상</span><br><span style="color: #000000;">동지일 기준으로 08시 ~ 16시 사이 최소 4시간 이상</span></td></tr></tbody></table></div><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PFR9/a918cb2b65f15b5d1827765fdad2a5c0179a243b" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PFR9/a918cb2b65f15b5d1827765fdad2a5c0179a243b" data-origin-width="1920" data-origin-height="944"></div><p><span style="color: #000000;"><b>2. 경관분석</b></span></p><p><span style="color: #000000;"><b>스카이라인</b></span></p><p><span style="color: #000000;">대상지 건축물과 주변 자연경관과의 조화로운 스카이라인을 목적으로서, 종·횡 단면 시뮬레이션을 통하여 대상지 사업으로 인한 기존환경과의 경관침해를 분석합니다.</span></p><p><span style="color: #000000;">결과분석창엔 건축물이 없는 지형과 포함된 스카이라인을 주요지점에서 분석한 결과를 도출할 수 있습니다.</span></p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PFR9/d80636e1f19d60bb763291871afe91e2781ace72" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PFR9/d80636e1f19d60bb763291871afe91e2781ace72" data-origin-width="1920" data-origin-height="951"></div><p><span style="color: #000000;"><b>3. </b></span><span style="color: #000000;"><b>둘러보기</b></span></p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PFR9/4915fd86d22bcb2fec68d4ce1f6d31f9b2ad59d5" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PFR9/4915fd86d22bcb2fec68d4ce1f6d31f9b2ad59d5" data-origin-width="1920" data-origin-height="947"></div><p style="text-align: start;"><span data-ke-size="size16"><b>4. 그림자분석</b></span></p><p style="text-align: start;"><span data-ke-size="size18">날짜와 시간대별 그림자 분석.</span></p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PFR9/dc153016902ea2a383b268702a7883df1cc017aa" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PFR9/dc153016902ea2a383b268702a7883df1cc017aa" data-origin-width="1432" data-origin-height="852"></div><p><b>5. 가시권분석</b></p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PFR9/836d662fa385d2d9b9da0b9ab5898cabb65f260b" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PFR9/836d662fa385d2d9b9da0b9ab5898cabb65f260b" data-origin-width="1000" data-origin-height="558"></div><p><b>6. 시곡면분석</b></p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PFR9/d45ba5d51b11c052a2de70721110217ea06198cc" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PFR9/d45ba5d51b11c052a2de70721110217ea06198cc" data-origin-width="1279" data-origin-height="715"></div><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PFR9/aff304de9463a0d2b58ad354af6c6a8002825fe0" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PFR9/aff304de9463a0d2b58ad354af6c6a8002825fe0" data-origin-width="1000" data-origin-height="562"></div><p> </p><p><span style="color: #000000;"><b>7. 평균경사 분석</b></span></p><p><span style="color: #000000;">평균경사 ( 참조 </span><span style="color: #000000;"><a href="https://cafe.naver.com/gisapplication/47" target="_top" class="ke-link">https://cafe.naver.com/gisapplication/47</a></span><span style="color: #000000;"> )</span></p><p><span style="color: #000000;">2D는 10m셀의 DEM이고, 3D에서는 5m급이라 가중치로 평균치를 구하였습니다.</span></p><p> </p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PFR9/ebf2b2be2064646c8d1f40dd5fc5ea74e204258c" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PFR9/ebf2b2be2064646c8d1f40dd5fc5ea74e204258c" data-origin-width="1916" data-origin-height="940"></div><p><b>8. 토공량 분석</b></p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PFR9/50833b157f37d2017df279254868f8546af7ea80" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PFR9/50833b157f37d2017df279254868f8546af7ea80" data-origin-width="1915" data-origin-height="918"></div><p><span style="color: #000000;"><b>* </b></span><span style="color: #000000;"><b>브이월드 WebGL 3.0버전 Plug-in : 둘러보기, 스카이라인, 일조량/일조권분석 추가하기</b></span></p><p><span style="color: #000000;">기본 소스는 브이월드 "</span><span style="color: #000000;"><b>웹지엘 3D지도 API 3.0</b></span><span style="color: #000000;">" 홈페이지 ( </span><span style="color: #000000;">브이월드 API레퍼런스 (vworld.kr)</span><span style="color: #000000;"> )에서 제공하는 기본지도 생성하는 소스를 사용하여, </span></p><p><span style="color: #000000;">플러그인한 js를 등록하고, 도구버튼 및 기능을 추가하는 함수 하나만 넣으시면 됩니다.(아래 소스 노란바탕 코드 참조)</span></p><p><span style="color: #000000;">예제실행소스) </span><span style="color: #000000;"><a href="http://www.gisapplication.kr/GA_VW_Plugin/" target="_top" class="ke-link">http://www.gisapplication.kr/GA_VW_Plugin/</a></span></p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1"><tbody><tr><td colspan="3" rowspan="1"><span style="color: #808080;"><b><!</b></span><span style="color: #569cd6;"><b>DOCTYPE</b></span><b> </b><span style="color: #9cdcfe;"><b>html</b></span><span style="color: #808080;"><b>></b></span><br><span style="color: #808080;"><b><</b></span><span style="color: #569cd6;"><b>html</b></span><span style="color: #808080;"><b>></b></span><br><span style="color: #808080;"><b><</b></span><span style="color: #569cd6;"><b>head</b></span><span style="color: #808080;"><b>></b></span><br><b> </b><span style="color: #808080;"><b><</b></span><span style="color: #569cd6;"><b>meta</b></span><b> </b><span style="color: #9cdcfe;"><b>http-equiv</b></span><span style="color: #cccccc;"><b>=</b></span><span style="color: #ce9178;"><b>"Content-Type"</b></span><b> </b><span style="color: #9cdcfe;"><b>content</b></span><span style="color: #cccccc;"><b>=</b></span><span style="color: #ce9178;"><b>"text/html; charset=UTF-8"</b></span><b> </b><span style="color: #808080;"><b>/></b></span><br><b> </b><span style="color: #808080;"><b><</b></span><span style="color: #569cd6;"><b>script</b></span><b> </b><span style="color: #9cdcfe;"><b>type</b></span><span style="color: #d4d4d4;"><b>=</b></span><span style="color: #ce9178;"><b>"text/javascript"</b></span><b> </b><span style="color: #9cdcfe;"><b>src</b></span><span style="color: #d4d4d4;"><b>=</b></span><span style="color: #ce9178;"><b>"<a href="http://map.vworld.kr/js/webglMapInit.js.do?version=3.0&apiKey=@" target="_top" class="ke-link">http://map.vworld.kr/js/webglMapInit.js.do?version=3.0&apiKey=@</a>{apikey}"</b></span><span style="color: #808080;"><b>></</b></span><span style="color: #569cd6;"><b>script</b></span><span style="color: #808080;"><b>></b></span><br><b> </b><span style="color: #808080; background-color: #ffd300;"><b><</b></span><span style="color: #569cd6; background-color: #ffd300;"><b>script</b></span><b> </b><span style="color: #9cdcfe; background-color: #ffd300;"><b>type</b></span><span style="color: #d4d4d4; background-color: #ffd300;"><b>=</b></span><span style="color: #ce9178; background-color: #ffd300;"><b>"text/javascript"</b></span><b> </b><span style="color: #9cdcfe; background-color: #ffd300;"><b>src</b></span><span style="color: #d4d4d4; background-color: #ffd300;"><b>=</b></span><span style="color: #ce9178; background-color: #ffd300;"><b>"<a href="http://www.gisapplication.kr/GA_VW_Plugin/VWORLD3D_Plugin.js" target="_top" class="ke-link">http://www.gisapplication.kr/GA_VW_Plugin/VWORLD3D_Plugin.js</a>"</b></span><span style="color: #808080; background-color: #ffd300;"><b>></</b></span><span style="color: #569cd6; background-color: #ffd300;"><b>script</b></span><span style="color: #808080; background-color: #ffd300;"><b>></b></span><br><span style="color: #808080;"><b><!-- 토공량분석추가 --> <br>  <script type="text/javascript" src="<a href="http://www.gisapplication.kr/GA_VW_Plugin/VWORLD3D_Plugin_EX_1.js?v=5" target="_blank" class="ke-link">http://www.gisapplication.kr/GA_VW_Plugin/VWORLD3D_Plugin_EX_1.js?v=5</a>"></script><br></</b></span><span style="color: #569cd6;"><b>head</b></span><span style="color: #808080;"><b>></b></span><br><br><br><span style="color: #808080;"><b><</b></span><span style="color: #569cd6;"><b>body</b></span><span style="color: #808080;"><b>></b></span><br><b> </b><span style="color: #808080;"><b><</b></span><span style="color: #569cd6;"><b>div</b></span><b> </b><span style="color: #9cdcfe;"><b>id</b></span><span style="color: #cccccc;"><b>=</b></span><span style="color: #ce9178;"><b>"vmap"</b></span><b> </b><span style="color: #9cdcfe;"><b>style</b></span><span style="color: #cccccc;"><b>=</b></span><span style="color: #ce9178;"><b>"width:100%;height:100%;left:0px;top:0px"</b></span><span style="color: #808080;"><b>></</b></span><span style="color: #569cd6;"><b>div</b></span><span style="color: #808080;"><b>></b></span><br><b> </b><span style="color: #808080;"><b><</b></span><span style="color: #569cd6;"><b>script</b></span><b> </b><span style="color: #9cdcfe;"><b>type</b></span><span style="color: #d4d4d4;"><b>=</b></span><span style="color: #ce9178;"><b>"text/javascript"</b></span><span style="color: #808080;"><b>></b></span><br><b> </b><span style="color: #569cd6;"><b>function</b></span><b> </b><span style="color: #dcdcaa;"><b>vwmap</b></span><span style="color: #d4d4d4;"><b>(){</b></span><br><b> </b><span style="color: #569cd6;"><b>var</b></span><b> </b><span style="color: #9cdcfe;"><b>options</b></span><span style="color: #d4d4d4;"><b> = {</b></span><br><b> </b><span style="color: #9cdcfe;"><b>mapId :</b></span><b> </b><span style="color: #ce9178;"><b>"vmap"</b></span><span style="color: #d4d4d4;"><b>,</b></span><br><b> </b><span style="color: #9cdcfe;"><b>initPosition:</b></span><b> </b><span style="color: #569cd6;"><b>new</b></span><b> </b><span style="color: #9cdcfe;"><b>vw</b></span><span style="color: #d4d4d4;"><b>.</b></span><span style="color: #dcdcaa;"><b>CameraPosition</b></span><span style="color: #d4d4d4;"><b>(</b></span><br><b> </b><span style="color: #569cd6;"><b>new</b></span><b> </b><span style="color: #9cdcfe;"><b>vw</b></span><span style="color: #d4d4d4;"><b>.</b></span><span style="color: #dcdcaa;"><b>CoordZ</b></span><span style="color: #d4d4d4;"><b>(</b></span><span style="color: #b5cea8;"><b>127.425</b></span><span style="color: #d4d4d4;"><b>, </b></span><span style="color: #b5cea8;"><b>38.196</b></span><span style="color: #d4d4d4;"><b>, </b></span><span style="color: #b5cea8;"><b>1548700</b></span><span style="color: #d4d4d4;"><b>), </b></span><br><b> </b><span style="color: #569cd6;"><b>new</b></span><b> </b><span style="color: #9cdcfe;"><b>vw</b></span><span style="color: #d4d4d4;"><b>.</b></span><span style="color: #dcdcaa;"><b>Direction</b></span><span style="color: #d4d4d4;"><b>(</b></span><span style="color: #b5cea8;"><b>0</b></span><span style="color: #d4d4d4;"><b>, -</b></span><span style="color: #b5cea8;"><b>90</b></span><span style="color: #d4d4d4;"><b>, </b></span><span style="color: #b5cea8;"><b>0</b></span><span style="color: #d4d4d4;"><b>)</b></span><br><span style="color: #d4d4d4;"><b> ), </b></span><br><b> </b><span style="color: #9cdcfe;"><b>logo:</b></span><b> </b><span style="color: #569cd6;"><b>true</b></span><span style="color: #d4d4d4;"><b>,</b></span><br><b> </b><span style="color: #9cdcfe;"><b>navigation:</b></span><b> </b><span style="color: #569cd6;"><b>true</b></span><br><span style="color: #d4d4d4;"><b> };</b></span><br><b> </b><span style="color: #569cd6;"><b>var</b></span><b> </b><span style="color: #9cdcfe;"><b>map</b></span><span style="color: #d4d4d4;"><b> = </b></span><span style="color: #569cd6;"><b>new</b></span><b> </b><span style="color: #9cdcfe;"><b>vw</b></span><span style="color: #d4d4d4;"><b>.</b></span><span style="color: #dcdcaa;"><b>Map</b></span><span style="color: #d4d4d4;"><b>();</b></span><br><b> </b><span style="color: #9cdcfe;"><b>map</b></span><span style="color: #d4d4d4;"><b>.</b></span><span style="color: #dcdcaa;"><b>setOption</b></span><span style="color: #d4d4d4;"><b>( </b></span><span style="color: #9cdcfe;"><b>options</b></span><span style="color: #d4d4d4;"><b> ); </b></span><br><b> </b><span style="color: #9cdcfe;"><b>map</b></span><span style="color: #d4d4d4;"><b>.</b></span><span style="color: #dcdcaa;"><b>start</b></span><span style="color: #d4d4d4;"><b>();</b></span><br><b> </b><span style="color: #000000; background-color: #ffd300;"><b>Init_VWORLD3D_Plugin("vmap", map);</b></span><br><span style="color: #d4d4d4;"><b> }</b></span><br><b> </b><span style="color: #dcdcaa;"><b>vwmap</b></span><span style="color: #d4d4d4;"><b>();</b></span><br><b> </b><span style="color: #808080;"><b></</b></span><span style="color: #569cd6;"><b>script</b></span><span style="color: #808080;"><b>></b></span><br><span style="color: #808080;"><b></</b></span><span style="color: #569cd6;"><b>body</b></span><span style="color: #808080;"><b>></b></span><br><span style="color: #808080;"><b></</b></span><span style="color: #569cd6;"><b>html</b></span><span style="color: #808080;"><b>></b></span></td></tr></tbody></table></div><p> </p><p> </p><p> </p>
<!-- -->
]]>
카페 게시글
GeoServer활용
[VWORLD3D] 브이월드 WebGL 3.0버전 Plug-in만들기 : 둘러보기, 스카이라인, 일조량/일조권,그림자,가시권,시곡면분석
공공칠빵
추천 0
조회 53
24.10.21 22:24
댓글 0
다음검색
