여의도 uam 기체 추가

src/components/map/mapbox/MapBoxMap.js

@@ -38,7 +38,7 @@ import * as THREE from 'three';
 import uamGltf from './models/out.glb';
 import uamVertipad from './models/scene.glb';
 
-const ghlfkd = [
+const arabetgilRoute = [
   [126.6243464, 37.5642352, 0],
   [126.6243464, 37.5642352, 30],
   [126.6243464, 37.5642352, 60],
@@ -72,6 +72,38 @@ const ghlfkd = [
   [126.62751314, 37.572045020000004, 600],
   [126.627865, 37.57291277777778, 600]
 ];
+const yeouidoRoute = [
+  [126.9184781388889, 37.52345361111111, 0],
+  [126.9184781388889, 37.52345361111111, 30],
+  [126.9184781388889, 37.52345361111111, 60],
+  [126.9184781388889, 37.52345361111111, 90],
+  [126.9184781388889, 37.52345361111111, 120],
+  [126.9184781388889, 37.52345361111111, 150],
+  [126.9184781388889, 37.52345361111111, 180],
+  [126.9184781388889, 37.52345361111111, 210],
+  [126.9184781388889, 37.52345361111111, 240],
+  [126.9184781388889, 37.52345361111111, 270],
+  [126.9184781388889, 37.52345361111111, 300],
+  [126.9184781388889, 37.52345361111111, 330],
+  [126.9184781388889, 37.52345361111111, 360],
+  [126.9184781388889, 37.52345361111111, 390],
+  [126.9184781388889, 37.52345361111111, 420],
+  [126.9184781388889, 37.52345361111111, 450],
+  [126.9184781388889, 37.52345361111111, 480],
+  [126.9184781388889, 37.52345361111111, 510],
+  [126.9184781388889, 37.52345361111111, 540],
+  [126.9184781388889, 37.52345361111111, 570],
+  [126.9184781388889, 37.52345361111111, 600],
+  [126.91982516666667, 37.52435527777777, 600],
+  [126.92117219444445, 37.525256944444436, 600],
+  [126.92251922222222, 37.52615861111111, 600],
+  [126.92386625, 37.52706027777778, 600],
+  [126.92521327777779, 37.52796194444444, 600],
+  [126.92656030555555, 37.528863611111106, 600],
+  [126.92790733333334, 37.52976527777778, 600],
+  [126.9292543611111, 37.53066694444445, 600],
+  [126.93060138888889, 37.53156861111111, 600]
+];
 let gridCoords = [];
 let altitudeMarker = [];
 let linerAltitude = [
@@ -477,9 +509,9 @@ export default function MapBoxMap() {
       );
 
       /*************************************************************** 3D UAM Model Layer 추기 코드 start */
-
+      // 아라벳길 기체
       map.addLayer({
-        id: 'custom-threebox-model',
+        id: 'arabetgil-model',
         type: 'custom',
         renderingMode: '3d',
         onAdd: function () {
@@ -533,10 +565,121 @@ export default function MapBoxMap() {
                   </div>
                   <div class="dblock-txt">
                     <div class="dblock-txt-list">
-                        <span>${ghlfkd[index][2]} M</span>
+                        <span>${arabetgilRoute[index][2]} M</span>
+                        <span>40.5 m/s</span>
+                        <span>
+                          ${arabetgilRoute[index][0].toFixed(
+                            6
+                          )} ${arabetgilRoute[index][1].toFixed(6)}
+                        </span>
+                    </div>
+                  </div>
+                </div>
+                  `,
+                false
+              );
+
+              model.tooltip.visible = true;
+              model.setCoords([
+                arabetgilRoute[index][0],
+                arabetgilRoute[index][1],
+                arabetgilRoute[index][2]
+              ]);
+              index++;
+              if (index === arabetgilRoute.length) {
+                // 배열의 끝에 도달하면 인덱스를 0으로 재설정하고 계속 반복합니다.
+                index = 0;
+              }
+              // hei += 50; // 높이값 증가
+            }, 1000);
+
+            const mixer = new THREE.AnimationMixer(model);
+
+            // 애니메이션 클립 찾기
+            const clips = model.animations;
+
+            if (clips && clips.length) {
+              // 모든 애니메이션 클립 재생
+              clips.forEach(clip => {
+                mixer.clipAction(clip).play();
+              });
+            }
+
+            function update() {
+              mixer.update(0.005); // 프레임 간격을 제공하여 애니메이션을 업데이트합니다.
+              // tb.update();
+              requestAnimationFrame(update);
+            }
+            // 애니메이션 시작
+            update();
+          });
+        },
+
+        render: function () {
+          tb.update();
+        }
+      });
+
+      // 여의도 기체
+      map.addLayer({
+        id: 'yeouido-model',
+        type: 'custom',
+        renderingMode: '3d',
+        onAdd: function () {
+          // 3d model option
+          const options = {
+            obj: uamGltf, // 3D Model 파일
+            type: 'gltf', // 3D Model 확장자 타입
+            scale: { x: 0, y: 0, z: 0 }, // 3D Model 크기 값
+            units: 'meters', // 높이 단위
+            rotation: { x: 90, y: -90, z: 0 }, // // 3D Model 방향 각도 초기 값
+            anchor: 'center'
+          };
+
+          tb.loadObj(options, model => {
+            const longitude = 126.92962013888891; // 3D Model 경도 값
+            const latitude = 37.53533861111111; // 3D Model 위도 값
+
+            model.addTooltip(
+              `
+            <div class="dblock-box">
+              <div class="dblock-ti">
+                <span>UAM</span>
+              </div>
+              <div class="dblock-txt">
+                <div class="dblock-txt-list">
+                    <span>0 M</span>
+                    <span>0 km</span>
+                   <span>
+                   37.52345361111111 126.9184781388889
+                    </span>
+                </div>
+              </div>
+            </div>
+              `,
+              false
+            );
+            model.tooltip.visible = true;
+
+            model.setCoords([longitude, latitude, 0]); // 3D Model 위치 지정
+            model.setRotation({ x: 0, y: 0, z: 220 }); // 3D Model 방향 각도 지정
+            tb.add(model);
+
+            let index = 0;
+            // 0.5초마다 모델의 위치를 변경
+            setInterval(() => {
+              model.addTooltip(
+                `
+                <div class="dblock-box">
+                  <div class="dblock-ti">
+                    <span>UAM</span>
+                  </div>
+                  <div class="dblock-txt">
+                    <div class="dblock-txt-list">
+                        <span>${yeouidoRoute[index][2]} M</span>
                         <span>40.5 m/s</span>
                         <span>
-                          ${ghlfkd[index][0].toFixed(6)} ${ghlfkd[
+                          ${yeouidoRoute[index][0].toFixed(6)} ${yeouidoRoute[
                   index
                 ][1].toFixed(6)}
                         </span>
@@ -549,12 +692,12 @@ export default function MapBoxMap() {
 
               model.tooltip.visible = true;
               model.setCoords([
-                ghlfkd[index][0],
+                yeouidoRoute[index][0],
-                ghlfkd[index][1],
+                yeouidoRoute[index][1],
-                ghlfkd[index][2]
+                yeouidoRoute[index][2]
               ]);
               index++;
-              if (index === ghlfkd.length) {
+              if (index === yeouidoRoute.length) {
                 // 배열의 끝에 도달하면 인덱스를 0으로 재설정하고 계속 반복합니다.
                 index = 0;
               }