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