드론교통관리 이착륙장공역 토글 기능

src/components/map/mapbox/feature/FeatureAirZone.js

@@ -2,6 +2,7 @@ import '../../../../assets/css/custom.css';
 import { useEffect } from 'react';
 import geoJson from '../../geojson/airArea.json';
 import * as turf from '@turf/turf';
+import { useSelector } from 'react-redux';
 
 // 격자 공역 Source
 const airPort = [
@@ -27,6 +28,29 @@ const airPort = [
 
 export const FeatureAirZone = props => {
   let popup;
+  const mapControl = useSelector(state => state.controlMapReducer);
+
+  useEffect(() => {
+    if (mapControl.flightAreaMarker) {
+      const markers = mapControl.flightAreaMarker;
+
+      markers.forEach(marker => {
+        marker.getElement().addEventListener('mouseover', e => {
+          const data = {};
+          data.coord = marker.getLngLat();
+          data.title = marker.properties.name;
+          data.description = marker.properties.description;
+
+          infowindowOpen(data);
+        });
+        marker.getElement().addEventListener('mouseout', () => {
+          if (popup) {
+            popup.remove();
+          }
+        });
+      });
+    }
+  }, [mapControl.flightAreaMarker]);
 
   useEffect(() => {
     featureAirZoneInit();

src/modules/control/map/actions/controlMapActions.ts

@@ -31,3 +31,6 @@ export const ctrlDrawTypeChangeAction = (value: any) => dispatch =>
 
 export const laancModeAction = (value: boolean) => dispatch =>
   dispatch({ type: 'LAANC_MODE', value });
+
+export const flightAreaClickAction = (value: any) => dispatch =>
+  dispatch({ type: 'FLIGHT_AREA_CLICK', value });

src/modules/control/map/reducers/controlMapReducer.ts

@@ -16,7 +16,8 @@ const initialState = {
   isLaanc: false,
   drawType: null,
   ctrlDrawType: null,
-  drawCheck: ''
+  drawCheck: '',
+  flightAreaMarker: null
 };
 
 const controlReducerReducer = (state = initialState, action) => {
@@ -109,6 +110,8 @@ const controlReducerReducer = (state = initialState, action) => {
         ...state,
         isLaanc: action.value
       };
+    case 'FLIGHT_AREA_CLICK':
+      return { ...state, flightAreaMarker: action.value };
   }
 };
 

src/views/control/setting/ControlSetting.js

@@ -1,10 +1,11 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { Button, ButtonGroup, CustomInput } from 'reactstrap';
 import * as Actions from '../../../modules/menu/actions/menuAction';
 import {
   areaClickAction,
+  flightAreaClickAction,
   mapTypeChangeAction
 } from '../../../modules/control/map/actions/controlMapActions';
 import geoJson from '../../../components/map/geojson/airArea.json';
@@ -14,6 +15,8 @@ import gimPoGrid from '../../../components/map/geojson/airportAirArea.json';
 // 김포 선형 공역
 import flatGimpo from '../../../components/map/geojson/flatGimpoAirportAirArea.json';
 
+import mapboxgl from 'mapbox-gl';
+
 const ControlSetting = props => {
   const dispatch = useDispatch();
   const history = useHistory();
@@ -21,6 +24,9 @@ const ControlSetting = props => {
   // 지도, 지도타입, 공역 타입 컨트롤
   const mapControl = useSelector(state => state.controlMapReducer);
 
+  // 이착륙장 마커
+  const [markerArr, setMarkerArr] = useState([]);
+
   useEffect(() => {
     if (mapControl.map) {
       const source = mapControl.map.getSource('maine');
@@ -70,6 +76,29 @@ const ControlSetting = props => {
           i => i.geometry.type === 'Polygon'
         );
 
+        // 이착륙장 마커 컨트롤
+        const firstMarker = mapControl.map._markers.filter(i => i?.properties);
+        const pointArr = arrGeoJson.filter(i => i.geometry.type === 'Point');
+
+        if (firstMarker.length > 0 && !mapControl.area0005)
+          firstMarker.map(m => m.remove());
+
+        if (mapControl.area0005) {
+          if (markerArr.length === 0) {
+            const markers = createFlightMarker(pointArr);
+
+            setMarkerArr(markers);
+            dispatch(flightAreaClickAction(markers));
+          }
+        } else {
+          if (markerArr.length > 0) {
+            markerArr.map(m => m.remove());
+
+            setMarkerArr([]);
+            dispatch(flightAreaClickAction(null));
+          }
+        }
+
         source.setData({ ...useGeoJson });
       }
     }
@@ -83,6 +112,18 @@ const ControlSetting = props => {
     mapControl.area0006
   ]);
 
+  // 이착륙장 마커 생성
+  const createFlightMarker = geojson => {
+    const markers = geojson.map(i => {
+      const marker = new mapboxgl.Marker()
+        .setLngLat(i.geometry.coordinates)
+        .addTo(mapControl.map);
+      marker.properties = i.properties;
+      return marker;
+    });
+    return markers;
+  };
+
   // 지도 유형 변경
   const handlerMapType = val => {
     if (val === mapControl.mapType) return;