From 1ff5f5991242bd8d1932e983bc086e8ee7859f6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?sanguu516=28=EB=B0=95=EC=83=81=ED=98=84=29?=
 <sanguu516@naver.com>
Date: Tue, 12 Sep 2023 17:06:52 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EC=8B=9C=EB=AC=BC?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98=20=EA=B9=80=ED=8F=AC=EA=B3=B5?=
 =?UTF-8?q?=ED=95=AD=20=EC=9E=A5=EC=95=A0=EB=AC=BC=20=ED=91=9C=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/nhn/NMap.js | 51 ++++++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/components/map/nhn/NMap.js b/src/components/map/nhn/NMap.js
index 65825c78..154ae48c 100644
--- a/src/components/map/nhn/NMap.js
+++ b/src/components/map/nhn/NMap.js
@@ -3,6 +3,8 @@ import { MAPBOX_TOKEN } from '../../../configs/constants';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import mapboxgl from 'mapbox-gl';
+import gimPo from '../../map/geojson/gimpoAirportAirArea.json';
+import { Threebox } from 'threebox-plugin';
 
 export const NMap = props => {
   const naver = window.naver;
@@ -44,7 +46,7 @@ export const NMap = props => {
     const language = new MapboxLanguage();
     map.addControl(language);
 
-    map.on('load', () => {
+    map.on('style.load', () => {
       const layers = map.getStyle().layers;
 
       const labelLayerId = layers.find(
@@ -58,7 +60,7 @@ export const NMap = props => {
         tileSize: 512,
         maxZoom: 16
       });
-      map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
+      map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 });
       map.addLayer({
         id: 'contour-labels',
         type: 'symbol',
@@ -147,10 +149,55 @@ export const NMap = props => {
         },
         labelLayerId
       );
+
       // 3d building
       props.setMapObject(map);
       setMapLoaded(true);
     });
+
+    map.on('load', () => {
+      window.tb = new Threebox(map, map.getCanvas().getContext('webgl'), {
+        // realSunlight: true,
+        // enableSelectingObjects: true,
+        // enableTooltips: true
+      });
+      map.addLayer({
+        id: '3d-line',
+        type: 'custom',
+        renderingMode: '3d',
+        onAdd: function () {
+          for (let i = 0; i < gimPo.features.length; i++) {
+            let line;
+            var options = {
+              path: gimPo.features[i].geometry.coordinates
+            };
+
+            for (let j = 0; j < options.path.length; j++) {
+              const lngLat = {
+                lng: options.path[j][0],
+                lat: options.path[j][1]
+              };
+              const elevation = Math.floor(map.queryTerrainElevation(lngLat));
+              // 지형 고도를 라인의 z 좌표로 설정합니다.
+              options.path[j][2] += elevation;
+              // console.log(options.path[j][2]);
+            }
+
+            let lineGeometry = options.path;
+            line = tb.line({
+              geometry: lineGeometry,
+              width: gimPo.features[i].properties['stroke-width'],
+              color: gimPo.features[i].properties.stroke
+            });
+
+            tb.add(line);
+          }
+        },
+        render: function () {
+          tb.update();
+        }
+      });
+    });
     // const mapInit = () => {
     //   const mapOptions = {
     //     center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),