From 1227d3ce6f56b1a4022c74e9a173546b1132ca98 Mon Sep 17 00:00:00 2001 From: JANGHYUNn Date: Tue, 5 Mar 2024 13:51:41 +0900 Subject: [PATCH] =?UTF-8?q?uam=20=EC=A3=BC=EC=84=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map/mapbox/MapBoxMap.js | 609 +++++++++++++------------ 1 file changed, 305 insertions(+), 304 deletions(-) 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',