|
|
@ -610,7 +610,32 @@ export default function MapBoxMap() { |
|
|
|
tb.loadObj(options, model => { |
|
|
|
tb.loadObj(options, model => { |
|
|
|
const longitude = 126.6240164; // 3D Model 경도 값
|
|
|
|
const longitude = 126.6240164; // 3D Model 경도 값
|
|
|
|
const latitude = 37.5643352; // 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.setCoords([longitude, latitude, 0]); // 3D Model 위치 지정
|
|
|
|
model.setRotation({ x: 0, y: 0, z: 250 }); // 3D Model 방향 각도 지정
|
|
|
|
model.setRotation({ x: 0, y: 0, z: 250 }); // 3D Model 방향 각도 지정
|
|
|
@ -619,7 +644,26 @@ export default function MapBoxMap() { |
|
|
|
// 0.5초마다 모델의 위치를 변경
|
|
|
|
// 0.5초마다 모델의 위치를 변경
|
|
|
|
setInterval(() => { |
|
|
|
setInterval(() => { |
|
|
|
// longitude += 0.001; // 경도를 약간 증가시킵니다.
|
|
|
|
// 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([ |
|
|
|
model.setCoords([ |
|
|
|
ghlfkd[index][0], |
|
|
|
ghlfkd[index][0], |
|
|
|
ghlfkd[index][1], |
|
|
|
ghlfkd[index][1], |
|
|
|