diff --git a/src/components/map/geojson/ulsanAirArea.json b/src/components/map/geojson/ulsanAirArea.json index 3ff448d5..544e41b0 100644 --- a/src/components/map/geojson/ulsanAirArea.json +++ b/src/components/map/geojson/ulsanAirArea.json @@ -38,7 +38,6 @@ [129.356936157721, 35.6486134737212, 192.76999999999998], [129.366590347363, 35.6470734231389, 284.73], [129.375768180582, 35.6441937623454, 440.59], - [129.384190417764, 35.6400621270585, 301.88], [129.391600917291, 35.6348042374859, 442.48], [129.397774446754, 35.6285800563042, 462.88], [129.402523534652, 35.6215789035779, 336.65], diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index 8f1a0c69..237f0c70 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/src/components/map/mapbox/MapBoxMap.js @@ -32,13 +32,16 @@ import { airArea } from '../geojson/_AirArea'; import geoJson from '../../map/geojson/airArea.json'; import gimPo from '../../map/geojson/gimpoAirportAirArea.json'; +import ulsan from '../../map/geojson/ulsanAirArea.json'; // 김포 격자 공역 import gimPoGrid from '../../../components/map/geojson/airportAirArea.json'; // 김포 선형 공역 import flatGimpo from '../../map/geojson/flatGimpoAirportAirArea.json'; +import flatUlsan from '../../map/geojson/flatUlsanAirArea.json'; import { clientMapInit } from '@src/redux/features/control/map/mapSlice'; import { getDraw } from '@src/utility/MapUtils'; +import axios from '@src/utility/customAxiosUtil'; // import { AreaBufferList } from '@src/redux/features/laanc/laancThunk'; @@ -118,6 +121,64 @@ export default function MapBoxMap({ handlerDrawObjInit }) { } }, [mapState?.areaType]); + const re = [ + [129.396663, 35.586386, 58], + [129.396511, 35.580117, 58], + [129.395024, 35.573965, 58], + [129.392246, 35.568115, 58], + [129.388261, 35.562747, 58], + [129.383192, 35.558024, 58], + [129.377193, 35.554087, 58], + [129.370444, 35.551058, 58], + [129.363153, 35.549028, 58], + [129.355538, 35.548058, 58], + [129.347833, 35.548178, 58], + [129.34027, 35.549385, 58], + [129.333079, 35.551642, 58], + [129.326479, 35.554879, 58], + [129.320669, 35.559, 58], + [129.315827, 35.563879, 58], + [129.312099, 35.569367, 58], + [129.309598, 35.575298, 58], + [129.308402, 35.581493, 58], + [129.306799, 35.600553, 58], + [129.306944, 35.606823, 58], + [129.308425, 35.612976, 58], + [129.311199, 35.618827, 58], + [129.315181, 35.624198, 58], + [129.32025, 35.628924, 58], + [129.326253, 35.632863, 58], + [129.333006, 35.635895, 58], + [129.340305, 35.637927, 58], + [129.347928, 35.638897, 58], + [129.355642, 35.638777, 58], + [129.363213, 35.637569, 58], + [129.370411, 35.635311, 58], + [129.377016, 35.632071, 58], + [129.382828, 35.627947, 58], + [129.38767, 35.623066, 58], + [129.391395, 35.617575, 58], + [129.393891, 35.611642, 58], + [129.395081, 35.605447, 58], + [129.396663, 35.586386, 58] + ]; + + const newData = []; + + const fetchElevations = re.map(([lon, lat, elev], index) => + axios + .post('api/comn/elev/ground', [{ lat, lon }]) + .then(res => [lon, lat, res.data[0].elev + re[index][2]]) + ); + + Promise.all(fetchElevations) + .then(results => { + console.log('>>', results); + }) + .catch(error => { + console.error('Error fetching elevations:', error); + }); + // 공역 생성 const handlerCreateAirSpace = ( map, @@ -125,10 +186,12 @@ export default function MapBoxMap({ handlerDrawObjInit }) { // ...geoJson, ...airArea, ...flatGimpo, + ...flatUlsan, features: [ // ...geoJson.features, ...airArea.features, - ...flatGimpo.features + ...flatGimpo.features, + ...flatUlsan.features ] } ) => { @@ -139,16 +202,19 @@ export default function MapBoxMap({ handlerDrawObjInit }) { // ...geoJson, ...airArea, ...flatGimpo, + ...flatUlsan, features: [ // ...geoJson.features, ...airArea.features, - ...flatGimpo.features + ...flatGimpo.features, + ...flatUlsan.features ] } : { // ...geoJson, ...airArea, ...gimPoGrid, + // ...ulsan features: [ // ...geoJson.features, ...airArea.features, @@ -476,6 +542,31 @@ export default function MapBoxMap({ handlerDrawObjInit }) { tb.update(); } }); + + // 울산 + map.addLayer({ + id: 'routes', + type: 'custom', + renderingMode: '3d', + onAdd: function () { + for (let i = 0; i < ulsan.features.length; i++) { + let line; + const options = { + path: ulsan.features[i].geometry.coordinates + }; + let lineGeometry = options.path; + line = tb.line({ + geometry: lineGeometry, + width: ulsan.features[i].properties['stroke-width'], + color: ulsan.features[i].properties.stroke + }); + tb.add(line); + } + }, + render: function () { + tb.update(); + } + }); } else { map.setTerrain(); map.setMaxPitch(0); @@ -502,6 +593,27 @@ export default function MapBoxMap({ handlerDrawObjInit }) { } }); }); + ulsan.features.map((i, idx) => { + map.addSource(`lineRoute${idx}`, { + type: 'geojson', + data: { + ...i + } + }); + map.addLayer({ + id: `lineRoute${idx}`, + type: 'line', + source: `lineRoute${idx}`, + layout: { + 'line-join': 'round', + 'line-cap': 'round' + }, + paint: { + 'line-color': i.properties.stroke, + 'line-width': i.properties['stroke-width'] + } + }); + }); } // 지형 높이 표시 diff --git a/src/utility/MapUtils.js b/src/utility/MapUtils.js index b891c0f8..15c6fcb5 100644 --- a/src/utility/MapUtils.js +++ b/src/utility/MapUtils.js @@ -15,6 +15,7 @@ import { airArea } from '../components/map/geojson/_AirArea'; import geoJson from '../components/map/geojson/airArea.json'; import flatGimpo from '../components/map/geojson/flatGimpoAirportAirArea.json'; +import flatUlsan from '../components/map/geojson/flatUlsanAirArea.json'; /** * geojson Feature 형식으로 반환 @@ -333,10 +334,12 @@ export const handlerCreateAirSpace = ( // ...geoJson, ...airArea, ...flatGimpo, + ...flatUlsan, features: [ // ...geoJson.features, ...airArea.features, - ...flatGimpo.features + ...flatGimpo.features, + ...flatUlsan.features ] } ) => { diff --git a/src/views/control/setting/ControlSetting.js b/src/views/control/setting/ControlSetting.js index e231acea..730983a2 100644 --- a/src/views/control/setting/ControlSetting.js +++ b/src/views/control/setting/ControlSetting.js @@ -20,6 +20,7 @@ import gimPoGrid from '../../../components/map/geojson/airportAirArea.json'; // 김포 선형 공역 import flatGimpo from '../../../components/map/geojson/flatGimpoAirportAirArea.json'; import { clientDispatchTopMenu } from '@src/redux/features/layout/layoutSlice'; +import flatUlsan from '../../../components/map/geojson/flatUlsanAirArea.json'; const ControlSetting = props => { const [setMapType] = useMapType(); @@ -40,10 +41,12 @@ const ControlSetting = props => { // ...geoJson, ...airArea, ...flatGimpo, + ...flatUlsan, features: [ // ...geoJson.features, ...airArea.features, - ...flatGimpo.features + ...flatGimpo.features, + ...flatUlsan.features ] }; let arrGeoJson = [];