|
|
@ -22,10 +22,6 @@ import gimPoGrid from '../../../components/map/geojson/airportAirArea.json'; |
|
|
|
import flatGimpo from '../../map/geojson/flatGimpoAirportAirArea.json'; |
|
|
|
import flatGimpo from '../../map/geojson/flatGimpoAirportAirArea.json'; |
|
|
|
|
|
|
|
|
|
|
|
import { mapInitAction } from '../../../modules/control/map/actions/controlMapActions'; |
|
|
|
import { mapInitAction } from '../../../modules/control/map/actions/controlMapActions'; |
|
|
|
import * as THREE from 'three'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// example 3d gltf 파일
|
|
|
|
|
|
|
|
import UamGltf from './models/out.glb'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let gridCoords = []; |
|
|
|
let gridCoords = []; |
|
|
|
let altitudeMarker = []; |
|
|
|
let altitudeMarker = []; |
|
|
@ -424,65 +420,6 @@ export default function MapBoxMap() { |
|
|
|
labelLayerId |
|
|
|
labelLayerId |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
/*************************************************************** 3D UAM Model Layer 추기 코드 start */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// map.addLayer({
|
|
|
|
|
|
|
|
// id: 'custom-threebox-model',
|
|
|
|
|
|
|
|
// type: 'custom',
|
|
|
|
|
|
|
|
// renderingMode: '3d',
|
|
|
|
|
|
|
|
// onAdd: function () {
|
|
|
|
|
|
|
|
// // 3d model option
|
|
|
|
|
|
|
|
// const options = {
|
|
|
|
|
|
|
|
// obj: UamGltf, // 3D Model 파일
|
|
|
|
|
|
|
|
// type: 'gltf', // 3D Model 확장자 타입
|
|
|
|
|
|
|
|
// scale: { x: 50, y: 50, z: 50 }, // 3D Model 크기 값
|
|
|
|
|
|
|
|
// units: 'meters', // 높이 단위
|
|
|
|
|
|
|
|
// rotation: { x: 90, y: -90, z: 0 } // // 3D Model 방향 각도 초기 값
|
|
|
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// tb.loadObj(options, model => {
|
|
|
|
|
|
|
|
// let longitude = 127.81101412107547; // 3D Model 경도 값
|
|
|
|
|
|
|
|
// const latitude = 37.510357; // 3D Model 위도 값
|
|
|
|
|
|
|
|
// let hei = 0; // 3D Model 높이 값
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// model.setCoords([longitude, latitude, hei]); // 3D Model 위치 지정
|
|
|
|
|
|
|
|
// model.setRotation({ x: 0, y: 0, z: 241 }); // 3D Model 방향 각도 지정
|
|
|
|
|
|
|
|
// tb.add(model);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // 0.5초마다 모델의 위치를 변경
|
|
|
|
|
|
|
|
// setInterval(() => {
|
|
|
|
|
|
|
|
// longitude += 0.001; // 경도를 약간 증가시킵니다.
|
|
|
|
|
|
|
|
// hei += 50; // 높이값 증가
|
|
|
|
|
|
|
|
// model.setCoords([longitude, latitude, hei]);
|
|
|
|
|
|
|
|
// }, 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();
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
/*************************************************************** 3D UAM Model Layer 추기 코드 end */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 김포 3d 공역
|
|
|
|
// 김포 3d 공역
|
|
|
|
map.addLayer({ |
|
|
|
map.addLayer({ |
|
|
|
id: 'route', |
|
|
|
id: 'route', |
|
|
@ -502,43 +439,6 @@ export default function MapBoxMap() { |
|
|
|
}); |
|
|
|
}); |
|
|
|
tb.add(line); |
|
|
|
tb.add(line); |
|
|
|
} |
|
|
|
} |
|
|
|
// const scene = new THREE.Scene();
|
|
|
|
|
|
|
|
// const geojsonGeometry = new THREE.Geometry();
|
|
|
|
|
|
|
|
// gimPo.features.forEach(feature => {
|
|
|
|
|
|
|
|
// const coordinates = feature.geometry.coordinates;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// for (let i = 0; i < coordinates.length; i++) {
|
|
|
|
|
|
|
|
// const coordinate = coordinates[i];
|
|
|
|
|
|
|
|
// const height = coordinate[2]; // Get the height from the GeoJSON
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // Create a vertex for each coordinate with height
|
|
|
|
|
|
|
|
// const vertex = new THREE.Vector3(
|
|
|
|
|
|
|
|
// coordinate[0],
|
|
|
|
|
|
|
|
// coordinate[1],
|
|
|
|
|
|
|
|
// height
|
|
|
|
|
|
|
|
// );
|
|
|
|
|
|
|
|
// geojsonGeometry.vertices.push(vertex);
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// console.log(tb);
|
|
|
|
|
|
|
|
// // Create Line Material
|
|
|
|
|
|
|
|
// const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 }); // Color for lines
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // Create Line Mesh
|
|
|
|
|
|
|
|
// const geojsonLines = new THREE.Line(geojsonGeometry, lineMaterial);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // Add the lines to Threebox
|
|
|
|
|
|
|
|
// tb.add(geojsonLines);
|
|
|
|
|
|
|
|
// // Adjust position if needed
|
|
|
|
|
|
|
|
// // geojsonLines.position.set(0, 0, 0);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // Create a filled mesh (optional)
|
|
|
|
|
|
|
|
// const filledGeometry = new THREE.Geometry();
|
|
|
|
|
|
|
|
// // Add vertices and faces to filledGeometry to fill between the lines
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const fillMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // Color for fill
|
|
|
|
|
|
|
|
// const geojsonFill = new THREE.Mesh(filledGeometry, fillMaterial);
|
|
|
|
|
|
|
|
// tb.add(geojsonFill);
|
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
render: function () { |
|
|
|
render: function () { |
|
|
|
tb.update(); |
|
|
|
tb.update(); |
|
|
@ -599,38 +499,6 @@ export default function MapBoxMap() { |
|
|
|
}); |
|
|
|
}); |
|
|
|
setMapObject(map); |
|
|
|
setMapObject(map); |
|
|
|
dispatch(mapInitAction(map)); |
|
|
|
dispatch(mapInitAction(map)); |
|
|
|
|
|
|
|
|
|
|
|
// map.on('style.load', () => {
|
|
|
|
|
|
|
|
// map.addLayer({
|
|
|
|
|
|
|
|
// id: 'custom-threebox-model',
|
|
|
|
|
|
|
|
// type: 'custom',
|
|
|
|
|
|
|
|
// renderingMode: '3d',
|
|
|
|
|
|
|
|
// onAdd: function () {
|
|
|
|
|
|
|
|
// // Creative Commons License attribution: Metlife Building model by https://sketchfab.com/NanoRay
|
|
|
|
|
|
|
|
// // https://sketchfab.com/3d-models/metlife-building-32d3a4a1810a4d64abb9547bb661f7f3
|
|
|
|
|
|
|
|
// const scale = -20;
|
|
|
|
|
|
|
|
// const options = {
|
|
|
|
|
|
|
|
// obj: './src/components/map/mapbox/diorama/scene.gltf',
|
|
|
|
|
|
|
|
// // obj: 'https://docs.mapbox.com/mapbox-gl-js/assets/metlife-building.gltf',
|
|
|
|
|
|
|
|
// type: 'gltf',
|
|
|
|
|
|
|
|
// units: 'meters',
|
|
|
|
|
|
|
|
// scale: 1,
|
|
|
|
|
|
|
|
// anchor: 'center',
|
|
|
|
|
|
|
|
// rotation: { x: 90, y: 0, z: 0 }
|
|
|
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// tb.loadObj(options, model => {
|
|
|
|
|
|
|
|
// model.setCoords([127.85101412107547, 37.520357, 1000]);
|
|
|
|
|
|
|
|
// model.setRotation({ x: 0, y: 0, z: 241 });
|
|
|
|
|
|
|
|
// tb.add(model);
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// render: function () {
|
|
|
|
|
|
|
|
// tb.update();
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|