diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index 6a4f9b1c..19092479 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/src/components/map/mapbox/MapBoxMap.js @@ -30,14 +30,18 @@ import FeatureAirZone from './feature/FeatureAirZone'; // v월드 공역 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'; -// 김포 선형 공역 + +// 3d 공역 +import gimPo from '../../map/geojson/gimpoAirportAirArea.json'; +import ulsan from '../../map/geojson/ulsanAirArea.json'; +import jeju from '../../map/geojson/jejuAirArea.json'; + +// 선형(flat) 공역 import flatGimpo from '../../map/geojson/flatGimpoAirportAirArea.json'; import flatUlsan from '../../map/geojson/flatUlsanAirArea.json'; +import flatJeju from '../../map/geojson/flatJejuAirport.json'; import { clientMapInit } from '@src/redux/features/control/map/mapSlice'; import { getDraw } from '@src/utility/MapUtils'; @@ -128,11 +132,13 @@ export default function MapBoxMap({ handlerDrawObjInit }) { ...airArea, ...flatGimpo, ...flatUlsan, + ...flatJeju, features: [ // ...geoJson.features, ...airArea.features, ...flatGimpo.features, - ...flatUlsan.features + ...flatUlsan.features, + ...flatJeju.features ] } ) => { @@ -144,18 +150,19 @@ export default function MapBoxMap({ handlerDrawObjInit }) { ...airArea, ...flatGimpo, ...flatUlsan, + ...flatJeju, features: [ // ...geoJson.features, ...airArea.features, ...flatGimpo.features, - ...flatUlsan.features + ...flatUlsan.features, + ...flatJeju.features ] } : { // ...geoJson, ...airArea, ...gimPoGrid, - // ...ulsan features: [ // ...geoJson.features, ...airArea.features, @@ -459,12 +466,13 @@ export default function MapBoxMap({ handlerDrawObjInit }) { }, labelLayerId ); - // 김포 3d 공역 + // 3d 공역 map.addLayer({ id: 'route', type: 'custom', renderingMode: '3d', onAdd: function () { + // 김포 for (let i = 0; i < gimPo.features.length; i++) { let line; const options = { @@ -478,18 +486,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) { }); tb.add(line); } - }, - render: function () { - 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 = { @@ -503,6 +500,20 @@ export default function MapBoxMap({ handlerDrawObjInit }) { }); tb.add(line); } + // 제주 + for (let i = 0; i < jeju.features.length; i++) { + let line; + const options = { + path: jeju.features[i].geometry.coordinates + }; + let lineGeometry = options.path; + line = tb.line({ + geometry: lineGeometry, + width: jeju.features[i].properties['stroke-width'], + color: jeju.features[i].properties.stroke + }); + tb.add(line); + } }, render: function () { tb.update(); @@ -513,6 +524,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) { map.setMaxPitch(0); map.setBearing(0); map.dragRotate.disable(); + // 김포 gimPo.features.map((i, idx) => { map.addSource(`lineRoute${idx}`, { type: 'geojson', @@ -534,6 +546,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) { } }); }); + // 울산 ulsan.features.map((i, idx) => { map.addSource(`lineRoute${idx}`, { type: 'geojson', @@ -555,6 +568,28 @@ export default function MapBoxMap({ handlerDrawObjInit }) { } }); }); + // 제주 + jeju.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 15c6fcb5..e86a75b5 100644 --- a/src/utility/MapUtils.js +++ b/src/utility/MapUtils.js @@ -16,6 +16,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'; +import flatJeju from '../components/map/geojson/flatJejuAirport.json'; /** * geojson Feature 형식으로 반환 @@ -335,11 +336,13 @@ export const handlerCreateAirSpace = ( ...airArea, ...flatGimpo, ...flatUlsan, + ...flatJeju, features: [ // ...geoJson.features, ...airArea.features, ...flatGimpo.features, - ...flatUlsan.features + ...flatUlsan.features, + ...flatJeju.features ] } ) => { diff --git a/src/views/control/setting/ControlSetting.js b/src/views/control/setting/ControlSetting.js index 730983a2..03fc1795 100644 --- a/src/views/control/setting/ControlSetting.js +++ b/src/views/control/setting/ControlSetting.js @@ -9,6 +9,7 @@ import { clientFlightAreaClick, clientMapTypeChange } from '@src/redux/features/control/map/mapSlice'; +import { clientDispatchTopMenu } from '@src/redux/features/layout/layoutSlice'; // v월드 공역 import { airArea } from '../../../components/map/geojson/_AirArea'; @@ -19,8 +20,8 @@ import gimPo from '../../../components/map/geojson/gimpoAirportAirArea.json'; 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'; +import flatJeju from '../../../components/map/geojson/flatJejuAirport.json'; const ControlSetting = props => { const [setMapType] = useMapType(); @@ -42,11 +43,13 @@ const ControlSetting = props => { ...airArea, ...flatGimpo, ...flatUlsan, + ...flatJeju, features: [ // ...geoJson.features, ...airArea.features, ...flatGimpo.features, - ...flatUlsan.features + ...flatUlsan.features, + ...flatJeju.features ] }; let arrGeoJson = [];