|
|
|
@ -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], |
|
|
|
|
ghlfkd[index][1], |
|
|
|
|
ghlfkd[index][2] |
|
|
|
|
yeouidoRoute[index][0], |
|
|
|
|
yeouidoRoute[index][1], |
|
|
|
|
yeouidoRoute[index][2] |
|
|
|
|
]); |
|
|
|
|
index++; |
|
|
|
|
if (index === ghlfkd.length) { |
|
|
|
|
if (index === yeouidoRoute.length) { |
|
|
|
|
// 배열의 끝에 도달하면 인덱스를 0으로 재설정하고 계속 반복합니다.
|
|
|
|
|
index = 0; |
|
|
|
|
} |
|
|
|
|