diff --git a/package-lock.json b/package-lock.json index de7af2d5..44670806 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24974,6 +24974,11 @@ "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=" }, + "three": { + "version": "0.124.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.124.0.tgz", + "integrity": "sha512-ROXp1Ly7YyF+jC910DQyAWj++Qlw2lQv0qwYLNQwdDbjk4bsOXAfGO92wYTMPNei1GMJUmCxSxc3MjGBTS09Rg==" + }, "threebox-plugin": { "version": "2.2.7", "resolved": "https://registry.npmjs.org/threebox-plugin/-/threebox-plugin-2.2.7.tgz", diff --git a/package.json b/package.json index bc99e88d..90a64ac0 100644 --- a/package.json +++ b/package.json @@ -112,6 +112,7 @@ "sweetalert2": "10.14.0", "sweetalert2-react-content": "3.0.1", "swiper": "6.0.4", + "three": "0.124.0", "threebox-plugin": "2.2.7", "typesafe-actions": "^5.1.0", "uppy": "1.21.2", diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index 488cba77..418c14fa 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/src/components/map/mapbox/MapBoxMap.js @@ -1,9 +1,10 @@ import 'mapbox-gl/dist/mapbox-gl.css'; import mapboxgl from 'mapbox-gl'; import threebox from 'threebox-plugin'; +// import * as THREE from 'three'; import MapboxLanguage from '@mapbox/mapbox-gl-language'; import { MAPBOX_TOKEN } from '../../../configs/constants'; -import { useEffect, useState, useRef } from 'react'; +import { useEffect, useState, useRef, useLayoutEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { DronMarker } from './dron/DronMarker'; // import { DronHistory } from './dron/DronHistory'; @@ -219,35 +220,36 @@ export default function MapBoxMap() { const dispatch = useDispatch(); const mapControl = useSelector(state => state.controlMapReducer); - useEffect(() => { + useLayoutEffect(() => { mapBoxMapInit(); }, []); - useEffect(() => { - if (mapObject) { - uamPosition.features.map(uam => { - const el = document.createElement('div'); - const elChild = document.createElement('span'); - elChild.innerText = uam.properties.name; - elChild.style.color = uam.properties.spanColor; - el.className = 'marker'; - el.style.background = uam.properties.background; - el.style.borderRadius = '50%'; - el.style.border = `4px solid ${uam.properties.border}`; - el.style.padding = '5px'; - el.style.width = '40px'; - el.style.height = '40px'; - el.style.textAlign = 'center'; - el.appendChild(elChild); - - new mapboxgl.Marker(el) - .setLngLat(uam.geometry.coordinates) - .addTo(mapObject); - }); - } - }, [mapObject]); + // useEffect(() => { + // if (mapObject) { + // uamPosition.features.map(uam => { + // const el = document.createElement('div'); + // const elChild = document.createElement('span'); + // elChild.innerText = uam.properties.name; + // elChild.style.color = uam.properties.spanColor; + // el.className = 'marker'; + // el.style.background = uam.properties.background; + // el.style.borderRadius = '50%'; + // el.style.border = `4px solid ${uam.properties.border}`; + // el.style.padding = '5px'; + // el.style.width = '40px'; + // el.style.height = '40px'; + // el.style.textAlign = 'center'; + // el.appendChild(elChild); + + // new mapboxgl.Marker(el) + // .setLngLat(uam.geometry.coordinates) + // .addTo(mapObject); + // }); + // } + // }, [mapObject]); useEffect(() => { + console.log(mapObject); if (mapObject) { handlerCreateAirSpace(mapObject); } @@ -271,7 +273,6 @@ export default function MapBoxMap() { map.removeLayer('maine'); map.removeSource('maine'); } - let arrGeoJson = []; useGeoJson.features.map(item => { if (item.properties.type === '0001' && mapControl.area0001) { @@ -353,47 +354,6 @@ export default function MapBoxMap() { } )); - map.on('load', () => { - map.addLayer({ - id: 'route', - type: 'custom', - renderingMode: '3d', - onAdd: function () { - let a = []; - for (let i = 0; i < gimPo.features.length; i++) { - let line; - var options = { - path: gimPo.features[i].geometry.coordinates - }; - - for (let j = 0; j < options.path.length; j++) { - const lngLat = { - lng: options.path[j][0], - lat: options.path[j][1] - }; - const elevation = Math.floor(map.queryTerrainElevation(lngLat)); - // 지형 고도를 라인의 z 좌표로 설정합니다. - options.path[j][2] += elevation; - } - a.push(options.path); - let lineGeometry = options.path; - line = tb.line({ - geometry: lineGeometry, - width: gimPo.features[i].properties['stroke-width'], - color: gimPo.features[i].properties.stroke - }); - - tb.add(line); - } - console.dir(a); - console.log(gimPo.features.length); - }, - render: function () { - tb.update(); - } - }); - }); - map.on('style.load', () => { const layers = map.getStyle().layers; const labelLayerId = layers.find( @@ -500,7 +460,68 @@ export default function MapBoxMap() { }, labelLayerId ); - // 3d building + + // 김포 3d 공역 + map.addLayer({ + id: 'route', + type: 'custom', + renderingMode: '3d', + onAdd: function () { + for (let i = 0; i < gimPo.features.length; i++) { + let line; + const options = { + path: gimPo.features[i].geometry.coordinates + }; + let lineGeometry = options.path; + line = tb.line({ + geometry: lineGeometry, + width: gimPo.features[i].properties['stroke-width'], + color: gimPo.features[i].properties.stroke + }); + 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 () { + tb.update(); + } + }); // 공역 색상 및 공역 표출 정보에 따른 노출 handlerCreateAirSpace(map); diff --git a/src/views/control/main/ControlMain.js b/src/views/control/main/ControlMain.js index 2ab73746..eea6ba4d 100644 --- a/src/views/control/main/ControlMain.js +++ b/src/views/control/main/ControlMain.js @@ -327,7 +327,7 @@ const ControlMain = () => { -
+ {/*
화재경보 @@ -343,6 +343,21 @@ const ControlMain = () => {
+
*/} +
+ +
+ LAANC 시스템 +
+
+
+ {}}>승인요청 바로가기 +
+ {/*
+ handlerDrawType('RESET')}>초기화 +
*/} +
+
{oepnReportList ? (