|
|
|
@ -510,262 +510,317 @@ export default function MapBoxMap() {
|
|
|
|
|
|
|
|
|
|
/*************************************************************** 3D UAM Model Layer 추기 코드 start */ |
|
|
|
|
// 아라벳길 기체
|
|
|
|
|
map.addLayer({ |
|
|
|
|
id: 'arabetgil-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' |
|
|
|
|
}; |
|
|
|
|
// map.addLayer({
|
|
|
|
|
// id: 'arabetgil-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.6240164; // 3D Model 경도 값
|
|
|
|
|
const latitude = 37.5643352; // 3D Model 위도 값
|
|
|
|
|
// tb.loadObj(options, model => {
|
|
|
|
|
// const longitude = 126.6240164; // 3D Model 경도 값
|
|
|
|
|
// const latitude = 37.5643352; // 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.5643352 126.6240164 |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
`,
|
|
|
|
|
false |
|
|
|
|
); |
|
|
|
|
model.tooltip.visible = true; |
|
|
|
|
|
|
|
|
|
model.setCoords([longitude, latitude, 0]); // 3D Model 위치 지정
|
|
|
|
|
model.setRotation({ x: 0, y: 0, z: 250 }); // 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>${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.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.5643352 126.6240164
|
|
|
|
|
// </span>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// `,
|
|
|
|
|
// false
|
|
|
|
|
// );
|
|
|
|
|
// model.tooltip.visible = true;
|
|
|
|
|
|
|
|
|
|
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); |
|
|
|
|
// model.setCoords([longitude, latitude, 0]); // 3D Model 위치 지정
|
|
|
|
|
// model.setRotation({ x: 0, y: 0, z: 250 }); // 3D Model 방향 각도 지정
|
|
|
|
|
// tb.add(model);
|
|
|
|
|
|
|
|
|
|
const mixer = new THREE.AnimationMixer(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>${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
|
|
|
|
|
// );
|
|
|
|
|
|
|
|
|
|
// 애니메이션 클립 찾기
|
|
|
|
|
const clips = model.animations; |
|
|
|
|
// 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);
|
|
|
|
|
|
|
|
|
|
if (clips && clips.length) { |
|
|
|
|
// 모든 애니메이션 클립 재생
|
|
|
|
|
clips.forEach(clip => { |
|
|
|
|
mixer.clipAction(clip).play(); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
// 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();
|
|
|
|
|
// });
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
function update() { |
|
|
|
|
mixer.update(0.005); // 프레임 간격을 제공하여 애니메이션을 업데이트합니다.
|
|
|
|
|
// render: function () {
|
|
|
|
|
// 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'
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// 여의도 기체
|
|
|
|
|
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 위도 값
|
|
|
|
|
|
|
|
|
|
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.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> |
|
|
|
|
${yeouidoRoute[index][0].toFixed(6)} ${yeouidoRoute[ |
|
|
|
|
index |
|
|
|
|
][1].toFixed(6)} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
`,
|
|
|
|
|
false |
|
|
|
|
); |
|
|
|
|
// model.setCoords([longitude, latitude, 0]); // 3D Model 위치 지정
|
|
|
|
|
// model.setRotation({ x: 0, y: 0, z: 220 }); // 3D Model 방향 각도 지정
|
|
|
|
|
// tb.add(model);
|
|
|
|
|
|
|
|
|
|
model.tooltip.visible = true; |
|
|
|
|
model.setCoords([ |
|
|
|
|
yeouidoRoute[index][0], |
|
|
|
|
yeouidoRoute[index][1], |
|
|
|
|
yeouidoRoute[index][2] |
|
|
|
|
]); |
|
|
|
|
index++; |
|
|
|
|
if (index === yeouidoRoute.length) { |
|
|
|
|
// 배열의 끝에 도달하면 인덱스를 0으로 재설정하고 계속 반복합니다.
|
|
|
|
|
index = 0; |
|
|
|
|
} |
|
|
|
|
// hei += 50; // 높이값 증가
|
|
|
|
|
}, 1000); |
|
|
|
|
// 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>
|
|
|
|
|
// ${yeouidoRoute[index][0].toFixed(6)} ${yeouidoRoute[
|
|
|
|
|
// index
|
|
|
|
|
// ][1].toFixed(6)}
|
|
|
|
|
// </span>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// `,
|
|
|
|
|
// false
|
|
|
|
|
// );
|
|
|
|
|
|
|
|
|
|
const mixer = new THREE.AnimationMixer(model); |
|
|
|
|
// model.tooltip.visible = true;
|
|
|
|
|
// model.setCoords([
|
|
|
|
|
// yeouidoRoute[index][0],
|
|
|
|
|
// yeouidoRoute[index][1],
|
|
|
|
|
// yeouidoRoute[index][2]
|
|
|
|
|
// ]);
|
|
|
|
|
// index++;
|
|
|
|
|
// if (index === yeouidoRoute.length) {
|
|
|
|
|
// // 배열의 끝에 도달하면 인덱스를 0으로 재설정하고 계속 반복합니다.
|
|
|
|
|
// index = 0;
|
|
|
|
|
// }
|
|
|
|
|
// // hei += 50; // 높이값 증가
|
|
|
|
|
// }, 1000);
|
|
|
|
|
|
|
|
|
|
// 애니메이션 클립 찾기
|
|
|
|
|
const clips = model.animations; |
|
|
|
|
// const mixer = new THREE.AnimationMixer(model);
|
|
|
|
|
|
|
|
|
|
if (clips && clips.length) { |
|
|
|
|
// 모든 애니메이션 클립 재생
|
|
|
|
|
clips.forEach(clip => { |
|
|
|
|
mixer.clipAction(clip).play(); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
// // 애니메이션 클립 찾기
|
|
|
|
|
// const clips = model.animations;
|
|
|
|
|
|
|
|
|
|
// if (clips && clips.length) {
|
|
|
|
|
// // 모든 애니메이션 클립 재생
|
|
|
|
|
// clips.forEach(clip => {
|
|
|
|
|
// mixer.clipAction(clip).play();
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
function update() { |
|
|
|
|
mixer.update(0.005); // 프레임 간격을 제공하여 애니메이션을 업데이트합니다.
|
|
|
|
|
// function update() {
|
|
|
|
|
// mixer.update(0.005); // 프레임 간격을 제공하여 애니메이션을 업데이트합니다.
|
|
|
|
|
// // tb.update();
|
|
|
|
|
// requestAnimationFrame(update);
|
|
|
|
|
// }
|
|
|
|
|
// // 애니메이션 시작
|
|
|
|
|
// update();
|
|
|
|
|
// });
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
// render: function () {
|
|
|
|
|
// tb.update();
|
|
|
|
|
requestAnimationFrame(update); |
|
|
|
|
} |
|
|
|
|
// 애니메이션 시작
|
|
|
|
|
update(); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// const uamRouteArr = [
|
|
|
|
|
// [126.6243464, 37.5642352],
|
|
|
|
|
// [126.8045935, 37.56016]
|
|
|
|
|
// ];
|
|
|
|
|
|
|
|
|
|
render: function () { |
|
|
|
|
tb.update(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
const uamRouteArr = [ |
|
|
|
|
[126.6243464, 37.5642352], |
|
|
|
|
[126.8045935, 37.56016] |
|
|
|
|
]; |
|
|
|
|
// for (let i = 0; i < uamRouteArr.length; i++) {
|
|
|
|
|
// map.addLayer({
|
|
|
|
|
// id: `custom-threebox-model_${i}`,
|
|
|
|
|
// type: 'custom',
|
|
|
|
|
// renderingMode: '3d',
|
|
|
|
|
// onAdd: function () {
|
|
|
|
|
// // 3d model option
|
|
|
|
|
// const options = {
|
|
|
|
|
// obj: uamVertipad, // 3D Model 파일
|
|
|
|
|
// type: 'gltf', // 3D Model 확장자 타입
|
|
|
|
|
// scale: { x: 10, y: 10, z: 10 }, // 3D Model 크기 값
|
|
|
|
|
// units: 'meters', // 높이 단위
|
|
|
|
|
// rotation: { x: 90, y: -90, z: 0 }, // // 3D Model 방향 각도 초기 값
|
|
|
|
|
// anchor: 'center'
|
|
|
|
|
// };
|
|
|
|
|
// tb.loadObj(options, model => {
|
|
|
|
|
// let longitude = uamRouteArr[i][0]; // 3D Model 경도 값
|
|
|
|
|
// const latitude = uamRouteArr[i][1]; // 3D Model 위도 값
|
|
|
|
|
// let hei = 0; // 3D Model 높이 값
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < uamRouteArr.length; i++) { |
|
|
|
|
map.addLayer({ |
|
|
|
|
id: `custom-threebox-model_${i}`, |
|
|
|
|
type: 'custom', |
|
|
|
|
renderingMode: '3d', |
|
|
|
|
onAdd: function () { |
|
|
|
|
// 3d model option
|
|
|
|
|
const options = { |
|
|
|
|
obj: uamVertipad, // 3D Model 파일
|
|
|
|
|
type: 'gltf', // 3D Model 확장자 타입
|
|
|
|
|
scale: { x: 10, y: 10, z: 10 }, // 3D Model 크기 값
|
|
|
|
|
units: 'meters', // 높이 단위
|
|
|
|
|
rotation: { x: 90, y: -90, z: 0 }, // // 3D Model 방향 각도 초기 값
|
|
|
|
|
anchor: 'center' |
|
|
|
|
}; |
|
|
|
|
tb.loadObj(options, model => { |
|
|
|
|
let longitude = uamRouteArr[i][0]; // 3D Model 경도 값
|
|
|
|
|
const latitude = uamRouteArr[i][1]; // 3D Model 위도 값
|
|
|
|
|
let hei = 0; // 3D Model 높이 값
|
|
|
|
|
|
|
|
|
|
model.setCoords([longitude, latitude, hei]); // 3D Model 위치 지정
|
|
|
|
|
model.setRotation({ x: 0, y: 0, z: 250 }); // 3D Model 방향 각도 지정
|
|
|
|
|
tb.add(model); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
// model.setCoords([longitude, latitude, hei]); // 3D Model 위치 지정
|
|
|
|
|
// model.setRotation({ x: 0, y: 0, z: 250 }); // 3D Model 방향 각도 지정
|
|
|
|
|
// tb.add(model);
|
|
|
|
|
// });
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
render: function () { |
|
|
|
|
tb.update(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
// render: function () {
|
|
|
|
|
// tb.update();
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// uam 회랑
|
|
|
|
|
// map.addLayer({
|
|
|
|
|
// id: 'uamRoute',
|
|
|
|
|
// type: 'custom',
|
|
|
|
|
// renderingMode: '3d',
|
|
|
|
|
// onAdd: function () {
|
|
|
|
|
// const uamRouteLoad = uamRoute.features.filter(
|
|
|
|
|
// i => i.geometry.type === 'LineString'
|
|
|
|
|
// );
|
|
|
|
|
// for (let i = 0; i < uamRouteLoad.length; i++) {
|
|
|
|
|
// let line;
|
|
|
|
|
|
|
|
|
|
// for (
|
|
|
|
|
// let j = 0;
|
|
|
|
|
// j < uamRouteLoad[i].geometry.coordinates.length;
|
|
|
|
|
// j++
|
|
|
|
|
// ) {
|
|
|
|
|
// uamRouteLoad[i].geometry.coordinates[j].push(600);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// const options = {
|
|
|
|
|
// path: uamRouteLoad[i].geometry.coordinates
|
|
|
|
|
// };
|
|
|
|
|
// let lineGeometry = options.path;
|
|
|
|
|
// line = tb.line({
|
|
|
|
|
// geometry: lineGeometry,
|
|
|
|
|
// width: 2,
|
|
|
|
|
// color: 'red'
|
|
|
|
|
// });
|
|
|
|
|
// tb.add(line);
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// render: function () {
|
|
|
|
|
// tb.update();
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// buffer
|
|
|
|
|
// map.addLayer({
|
|
|
|
|
// id: '3dExtrusion',
|
|
|
|
|
// type: 'fill-extrusion',
|
|
|
|
|
// source: {
|
|
|
|
|
// type: 'geojson',
|
|
|
|
|
// data: {
|
|
|
|
|
// type: 'FeatureCollection',
|
|
|
|
|
// features: [...uamRouteBuffer.features]
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// paint: {
|
|
|
|
|
// 'fill-extrusion-color': '#8a1c05',
|
|
|
|
|
// 'fill-extrusion-height': 600,
|
|
|
|
|
// 'fill-extrusion-base': 300,
|
|
|
|
|
// 'fill-extrusion-opacity': 0.5
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
/*************************************************************** 3D UAM Model Layer 추기 코드 end */ |
|
|
|
|
|
|
|
|
@ -794,60 +849,6 @@ export default function MapBoxMap() {
|
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// uam 회랑
|
|
|
|
|
map.addLayer({ |
|
|
|
|
id: 'uamRoute', |
|
|
|
|
type: 'custom', |
|
|
|
|
renderingMode: '3d', |
|
|
|
|
onAdd: function () { |
|
|
|
|
const uamRouteLoad = uamRoute.features.filter( |
|
|
|
|
i => i.geometry.type === 'LineString' |
|
|
|
|
); |
|
|
|
|
for (let i = 0; i < uamRouteLoad.length; i++) { |
|
|
|
|
let line; |
|
|
|
|
|
|
|
|
|
for ( |
|
|
|
|
let j = 0; |
|
|
|
|
j < uamRouteLoad[i].geometry.coordinates.length; |
|
|
|
|
j++ |
|
|
|
|
) { |
|
|
|
|
uamRouteLoad[i].geometry.coordinates[j].push(600); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const options = { |
|
|
|
|
path: uamRouteLoad[i].geometry.coordinates |
|
|
|
|
}; |
|
|
|
|
let lineGeometry = options.path; |
|
|
|
|
line = tb.line({ |
|
|
|
|
geometry: lineGeometry, |
|
|
|
|
width: 2, |
|
|
|
|
color: 'red' |
|
|
|
|
}); |
|
|
|
|
tb.add(line); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
render: function () { |
|
|
|
|
tb.update(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
// buffer
|
|
|
|
|
map.addLayer({ |
|
|
|
|
id: '3dExtrusion', |
|
|
|
|
type: 'fill-extrusion', |
|
|
|
|
source: { |
|
|
|
|
type: 'geojson', |
|
|
|
|
data: { |
|
|
|
|
type: 'FeatureCollection', |
|
|
|
|
features: [...uamRouteBuffer.features] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
paint: { |
|
|
|
|
'fill-extrusion-color': '#8a1c05', |
|
|
|
|
'fill-extrusion-height': 600, |
|
|
|
|
'fill-extrusion-base': 300, |
|
|
|
|
'fill-extrusion-opacity': 0.5 |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
// map.addLayer({
|
|
|
|
|
// id: 'uamBuffers',
|
|
|
|
|
// type: 'custom',
|
|
|
|
|