diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index 3b23d21..3ca21bb 100644
--- a/src/components/map/mapbox/MapBoxMap.js
+++ b/src/components/map/mapbox/MapBoxMap.js
@@ -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(
- `
-
-
- UAM
-
-
-
- 0 M
- 0 km
-
- 37.5643352 126.6240164
-
-
-
-
- `,
- 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(
- `
-
-
- UAM
-
-
-
- ${arabetgilRoute[index][2]} M
- 40.5 m/s
-
- ${arabetgilRoute[index][0].toFixed(
- 6
- )} ${arabetgilRoute[index][1].toFixed(6)}
-
-
-
-
- `,
- 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(
+ // `
+ //
+ //
+ // UAM
+ //
+ //
+ //
+ // 0 M
+ // 0 km
+ //
+ // 37.5643352 126.6240164
+ //
+ //
+ //
+ //
+ // `,
+ // 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(
- `
-
-
- UAM
-
-
-
- 0 M
- 0 km
-
- 37.52345361111111 126.9184781388889
-
-
-
-
- `,
- 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(
- `
-
-
- UAM
-
-
-
- ${yeouidoRoute[index][2]} M
- 40.5 m/s
-
- ${yeouidoRoute[index][0].toFixed(6)} ${yeouidoRoute[
- index
- ][1].toFixed(6)}
-
-
-
-
- `,
- 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(
+ // `
+ //
+ //
+ // UAM
+ //
+ //
+ //
+ // ${arabetgilRoute[index][2]} M
+ // 40.5 m/s
+ //
+ // ${arabetgilRoute[index][0].toFixed(
+ // 6
+ // )} ${arabetgilRoute[index][1].toFixed(6)}
+ //
+ //
+ //
+ //
+ // `,
+ // 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(
+ // `
+ //
+ //
+ // UAM
+ //
+ //
+ //
+ // 0 M
+ // 0 km
+ //
+ // 37.52345361111111 126.9184781388889
+ //
+ //
+ //
+ //
+ // `,
+ // 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(
+ // `
+ //
+ //
+ // UAM
+ //
+ //
+ //
+ // ${yeouidoRoute[index][2]} M
+ // 40.5 m/s
+ //
+ // ${yeouidoRoute[index][0].toFixed(6)} ${yeouidoRoute[
+ // index
+ // ][1].toFixed(6)}
+ //
+ //
+ //
+ //
+ // `,
+ // 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',