비행 시물레이션 김포공항 장애물 표현

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),