pav
/
pav-fe-kac-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

uam 주석

master
김장현 7 months ago
parent
e98faeb5f3
commit
1227d3ce6f
1 changed files with 305 additions and 304 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 609
      src/components/map/mapbox/MapBoxMap.js

609
src/components/map/mapbox/MapBoxMap.js
Unescape View File

@ -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 위도 값
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.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();
});
},
// tb.loadObj(options, model => {
// const longitude = 126.6240164; // 3D Model 경도 값
// const latitude = 37.5643352; // 3D Model 위도 값
render: function () {
tb.update();
}
});
// 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;
// 여의도 기체
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'
};
// model.setCoords([longitude, latitude, 0]); // 3D Model 위치 지정
// model.setRotation({ x: 0, y: 0, z: 250 }); // 3D Model 방향 각도 지정
// tb.add(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.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.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 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();
});
},
// 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
// );
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 높이 값
model.setCoords([longitude, latitude, hei]); // 3D Model 위치 지정
model.setRotation({ x: 0, y: 0, z: 250 }); // 3D Model 방향 각도 지정
tb.add(model);
});
},
// 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);
render: function () {
tb.update();
}
});
}
// 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>
// ${yeouidoRoute[index][0].toFixed(6)} ${yeouidoRoute[
// index
// ][1].toFixed(6)}
// </span>
// </div>
// </div>
// </div>
// `,
// false
// );
// 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 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();
// }
// });
// 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 높이 값
// model.setCoords([longitude, latitude, hei]); // 3D Model 위치 지정
// model.setRotation({ x: 0, y: 0, z: 250 }); // 3D Model 방향 각도 지정
// tb.add(model);
// });
// },
// 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',

Write Preview
Loading…
Cancel
Save