From 9a1b5d0e53a9d60b0b2676dd2b0536c4d06a2885 Mon Sep 17 00:00:00 2001 From: JANGHYUNn Date: Wed, 20 Dec 2023 19:02:30 +0900 Subject: [PATCH] =?UTF-8?q?uam=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=B8=94?= =?UTF-8?q?=EB=A1=9D=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map/mapbox/MapBoxMap.js | 48 ++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index b091701..de05387 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/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( + ` +
+
+ UAM +
+
+
+ 0 M + 0 km + + 37.5643352 126.6240164 + +
+
+
+ ` + ) + .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( + ` +
+
+ UAM +
+
+
+ ${ghlfkd[index][2]} M + 40.5 m/s + + ${ghlfkd[index][0].toFixed(6)} ${ghlfkd[ + index + ][1].toFixed(6)} + +
+
+
+ ` + ); model.setCoords([ ghlfkd[index][0], ghlfkd[index][1],