uam 데이터 블록 작업

src/components/map/mapbox/MapBoxMap.js

@@ -610,7 +610,32 @@ export default function MapBoxMap() {
           tb.loadObj(options, model => {
             const longitude = 126.6240164; // 3D Model 경도 값
             const latitude = 37.5643352; // 3D Model 위도 값
-            let hei = 150; // 3D Model 높이 값
+
+            const info = new mapboxgl.Popup({
+              closeButton: false,
+              closeOnClick: false,
+              offset: mapboxgl.Point(5, -60)
+            })
+              .setLngLat([126.6240164, 37.5643352])
+              .setHTML(
+                `
+              <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.5643352 126.6240164 
+                      </span>
+                  </div>
+                </div>
+              </div>
+                `
+              )
+              .addTo(map);
 
             model.setCoords([longitude, latitude, 0]); // 3D Model 위치 지정
             model.setRotation({ x: 0, y: 0, z: 250 }); // 3D Model 방향 각도 지정
@@ -619,7 +644,26 @@ export default function MapBoxMap() {
             // 0.5초마다 모델의 위치를 변경
             setInterval(() => {
               // longitude += 0.001; // 경도를 약간 증가시킵니다.
-
+              info.setLngLat([ghlfkd[index][0], ghlfkd[index][1]]).setHTML(
+                `
+                <div class="dblock-box">
+                  <div class="dblock-ti">
+                    <span>UAM</span>
+                  </div>
+                  <div class="dblock-txt">
+                    <div class="dblock-txt-list">
+                        <span>${ghlfkd[index][2]} M</span>
+                        <span>40.5 m/s</span>
+                        <span>
+                          ${ghlfkd[index][0].toFixed(6)} ${ghlfkd[
+                  index
+                ][1].toFixed(6)}
+                        </span>
+                    </div>
+                  </div>
+                </div>
+                  `
+              );
               model.setCoords([
                 ghlfkd[index][0],
                 ghlfkd[index][1],