lannc 지도 공역 적용중

src/views/laanc/FlightArea.js

@@ -1,13 +1,16 @@
 import 'mapbox-gl/dist/mapbox-gl.css';
 import mapboxgl from 'mapbox-gl';
+import threebox from 'threebox-plugin';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import { MAPBOX_TOKEN } from '../../configs/constants';
 import { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { initFlightBas } from '../../modules/basis/flight/models/basisFlightModel';
 import { AREA_DETAIL_LIST_SAVE } from '../../modules/basis/flight/actions/basisFlightAction';
-import { drawTypeChangeAction } from '../../modules/control/map/actions/controlMapActions';
+import {
+  drawTypeChangeAction,
+  mapInitAction
+} from '../../modules/control/map/actions/controlMapActions';
 import LaancAreaMap from './LaancAreaMap';
 import {
   InitFeature,
@@ -15,10 +18,15 @@ import {
   handlerDrawLayerInit,
   handlerGetCircleCoord
 } from '../../utility/DrawUtil';
+import flatGimpo from '../../components/map/geojson/flatGimpoAirportAirArea.json';
+import gimpo from '../../components/map/geojson/gimpoAirportAirArea.json';
+import geoJson from '../../components/map/geojson/airArea.json';
+import { FeatureAirZone } from '../../components/map/mapbox/feature/FeatureAirZone';
 
 export default function FlightArea({ centeredModal, setCenteredModal }) {
   const dispatch = useDispatch();
   const { areaCoordList } = useSelector(state => state.flightState);
+  const mapControl = useSelector(state => state.controlMapReducer);
 
   const mapContainer = useRef(null);
   const [mapObject, setMapObject] = useState();
@@ -37,6 +45,87 @@ export default function FlightArea({ centeredModal, setCenteredModal }) {
     if (!centeredModal) handlerPreviewDraw();
   }, [areaCoordList, centeredModal]);
 
+  useEffect(() => {
+    if (mapObject) {
+      // handlerCreateAirSpace(mapObject);
+    }
+  }, [
+    mapControl.area0001,
+    mapControl.area0002,
+    mapControl.area0003,
+    mapControl.area0004,
+    mapControl.area0005,
+    mapControl.area0006
+  ]);
+
+  const handlerCreateAirSpace = (
+    map,
+    useGeoJson = {
+      ...geoJson,
+      ...flatGimpo,
+      features: [...geoJson.features, ...flatGimpo.features]
+    }
+  ) => {
+    if (map.getLayer('maine')) {
+      map.removeLayer('maine');
+      map.removeSource('maine');
+    }
+    let arrGeoJson = [];
+    useGeoJson.features.map(item => {
+      if (item.properties.type === '0001' && mapControl.area0001) {
+        arrGeoJson.push({
+          ...item,
+          properties: { ...item.properties, color: '#FF3648' }
+        });
+      } else if (item.properties.type === '0002' && mapControl.area0002) {
+        arrGeoJson.push({
+          ...item,
+          properties: { ...item.properties, color: '#FFA1AA' }
+        });
+      } else if (item.properties.type === '0003' && mapControl.area0003) {
+        arrGeoJson.push({
+          ...item,
+          properties: { ...item.properties, color: '#FFA800' }
+        });
+      } else if (item.properties.type === '0004' && mapControl.area0004) {
+        arrGeoJson.push({
+          ...item,
+          properties: { ...item.properties, color: '#A16B00' }
+        });
+      } else if (item.properties.type === '0005' && mapControl.area0005) {
+        arrGeoJson.push({
+          ...item,
+          properties: { ...item.properties, color: '#AB40FF' }
+        });
+      } else if (item.properties.type === '0006' && mapControl.area0006) {
+        arrGeoJson.push({
+          ...item,
+          properties: { ...item.properties, color: '#009cad' }
+        });
+      }
+    });
+    useGeoJson.features = arrGeoJson.filter(i => i.geometry.type === 'Polygon');
+
+    // 공역 생성 start
+    map.addSource('maine', {
+      type: 'geojson',
+      data: {
+        ...useGeoJson
+      }
+    });
+    map.addLayer({
+      id: 'maine',
+      type: 'fill',
+      source: 'maine',
+      layout: {},
+      paint: {
+        'fill-color': ['get', 'color'],
+        // 'fill-extrusion-height': 3000,
+        'fill-opacity': 0.5
+      }
+    });
+  };
+
   const handlerDrawType = val => {
     dispatch(drawTypeChangeAction(val));
   };
@@ -92,6 +181,43 @@ export default function FlightArea({ centeredModal, setCenteredModal }) {
     const language = new MapboxLanguage();
     map.addControl(language);
 
+    const tb = (window.tb = new threebox.Threebox(
+      map,
+      map.getCanvas().getContext('webgl'),
+      {
+        enableSelectingObjects: true,
+        enableTooltips: true
+      }
+    ));
+
+    map.on('style.load', () => {
+      // 김포 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);
+          }
+        },
+        render: function () {
+          tb.update();
+        }
+      });
+      handlerCreateAirSpace(map);
+      setIsMapLoad(true);
+
       handlerDrawLayerInit(
         map,
         'preview',
@@ -100,6 +226,9 @@ export default function FlightArea({ centeredModal, setCenteredModal }) {
         setIsMapLoad,
         ''
       );
+    });
+    setMapObject(map);
+    dispatch(mapInitAction(map));
   };
 
   const handlerPreviewDraw = () => {
@@ -174,6 +303,9 @@ export default function FlightArea({ centeredModal, setCenteredModal }) {
           ref={mapContainer}
           style={{ width: '100%', height: '35vh' }}
         ></div>
+        {/* {isMapLoad && mapObject ? (
+          <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
+        ) : null} */}
       </div>
       <Modal
         isOpen={centeredModal}

src/views/laanc/LaancAreaMap.js

@@ -220,14 +220,14 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) {
                 <InputGroup className='search-feather'>
                   <InputGroupAddon addonType='prepend'>
                     <InputGroupText>
-                      <Search bssize={14} onClick={handlerSearchRes} />
+                      <Search size={14} onClick={handlerSearchRes} />
                     </InputGroupText>
                   </InputGroupAddon>
                   <Input
                     type='text'
                     id='searchInput'
                     name='searchInput'
-                    bssize='sm'
+                    size='sm'
                     autoComplete='off'
                     placeholder='검색명을 입력하세요.'
                     onChange={handlerSearchChange}

src/views/laanc/LaancStep1.js

@@ -93,7 +93,7 @@ export default function LaancStep1({
                   type='text'
                   id='memberName'
                   name='memberName'
-                  bssize='sm'
+                  size='sm'
                   placeholder=''
                   value={user.memberName}
                   disabled
@@ -106,7 +106,7 @@ export default function LaancStep1({
                 <Label for='test'>
                   <span className='necessary'>*</span>종류
                 </Label>
-                <Input type='select' name='select' bssize='sm' id='test'>
+                <Input type='select' name='select' size='sm' id='test'>
                   <option value=''>= 선택 =</option>
                   <option>상업</option>
                   <option>비상업</option>
@@ -184,7 +184,7 @@ export default function LaancStep1({
                       id='fltPurpose'
                       name='fltPurpose'
                       value={data.fltPurpose}
-                      bssize='sm'
+                      size='sm'
                       onChange={e => {
                         const { name, value } = e.target;
                         handleChange({
@@ -218,7 +218,7 @@ export default function LaancStep1({
             </Col>
             <Col className='list-input' md='12'>
               <div className='ti'>
-                비행 구역 정보<Button bssize='sm'>적용</Button>
+                비행 구역 정보<Button size='sm'>적용</Button>
               </div>
               <Row>
                 <Col className='list-input' md='6'>
@@ -232,7 +232,7 @@ export default function LaancStep1({
                       name='fltElev'
                       // defaultValue={data.email || ''}
                       value={data.areaList[0].fltElev}
-                      bssize='sm'
+                      size='sm'
                       onChange={e => {
                         const { name, value } = e.target;
                         handleChange({
@@ -257,7 +257,7 @@ export default function LaancStep1({
                       name='bufferZone'
                       // defaultValue={data.email || ''}
                       value={data.areaList[0].bufferZone}
-                      bssize='sm'
+                      size='sm'
                       onChange={e => {
                         const { name, value } = e.target;
                         handleChange({
@@ -282,7 +282,7 @@ export default function LaancStep1({
                       name='fltMethod'
                       // defaultValue={data.email || ''}
                       value={data.areaList[0].fltMethod}
-                      bssize='sm'
+                      size='sm'
                       onChange={e => {
                         const { name, value } = e.target;
                         handleChange({
@@ -314,7 +314,7 @@ export default function LaancStep1({
                       type='text'
                       id='selffltMethod'
                       name='selffltMethod'
-                      bssize='sm'
+                      size='sm'
                       onChange={e => {
                         const { name, value } = e.target;
                         handleChange({
@@ -343,7 +343,7 @@ export default function LaancStep1({
                     <Input
                       type='select'
                       id='test'
-                      bssize='sm'
+                      size='sm'
                       placeholder=''
                       value={data.arcrftList[0].arcrftWdth}
                     >
@@ -374,7 +374,7 @@ export default function LaancStep1({
                       id='arcrftTypeCd'
                       name='arcrftTypeCd'
                       value={data.arcrftList[0].arcrftTypeCd}
-                      bssize='sm'
+                      size='sm'
                       onChange={e => {
                         const { name, value } = e.target;
                         handleChange({
@@ -403,7 +403,7 @@ export default function LaancStep1({
                       name='groupNm'
                       // defaultValue={data.email || ''}
                       value={data.arcrftList[0].groupNm}
-                      bssize='sm'
+                      size='sm'
                       onChange={e => {
                         const { name, value } = e.target;
                         handleChange({