Merge branch 'master' of http://gitea.palntour.com/pav/pav-home

src/components/basis/flight/plan/FlightPlanAreaMap.js

@@ -24,7 +24,7 @@ import {
 } from '../../../../modules/basis/flight/actions/basisFlightAction';
 import { flightPlanAPI } from '../../../../modules/basis/flight/apis/basisFlightApi';
 import { WeatherContainer } from '../../../../containers/basis/flight/plan/WeatherContainer';
-
+import gimpo from '../../../map/geojson/airportAirArea.json';
 const FlightPlanAreaMap = props => {
   const dispatch = useDispatch();
   const naver = window.naver;
@@ -49,8 +49,50 @@ const FlightPlanAreaMap = props => {
   const [number, setNumber] = useState(0);
 
   const [formModal, setFormModal] = useState(false);
+
+  const [coordCenter, setCoordCenter] = useState([]); // 격자 센터값
+
+  let gimPofeatures = gimpo.features;
+
   useEffect(() => {
     NaverMapInit();
+
+    const coords = [];
+    gimPofeatures.map(air => {
+      coords.push({
+        lat:
+          (Math.max(
+            air.geometry.coordinates[0][0][1],
+            air.geometry.coordinates[0][1][1],
+            air.geometry.coordinates[0][2][1],
+            air.geometry.coordinates[0][3][1]
+          ) +
+            Math.min(
+              air.geometry.coordinates[0][0][1],
+              air.geometry.coordinates[0][1][1],
+              air.geometry.coordinates[0][2][1],
+              air.geometry.coordinates[0][3][1]
+            )) /
+          2,
+        lng:
+          (Math.max(
+            air.geometry.coordinates[0][0][0],
+            air.geometry.coordinates[0][1][0],
+            air.geometry.coordinates[0][2][0],
+            air.geometry.coordinates[0][3][0]
+          ) +
+            Math.min(
+              air.geometry.coordinates[0][0][0],
+              air.geometry.coordinates[0][1][0],
+              air.geometry.coordinates[0][2][0],
+              air.geometry.coordinates[0][3][0]
+            )) /
+          2,
+        airspace: air.properties.airspace
+      });
+    });
+    setCoordCenter(coords);
+
     return () => {
       dispatch(AREA_DETAIL_INIT());
     };
@@ -64,6 +106,25 @@ const FlightPlanAreaMap = props => {
     setIsMapLoad(true);
   }, [airArea]);
 
+  useEffect(() => {
+    coordCenter.map((val, idx) => {
+      const position = new naver.maps.LatLng(
+        val.lat.toFixed(6),
+        val.lng.toFixed(6)
+      );
+      const marker = new naver.maps.Marker({
+        position: position,
+        map: map,
+        icon: {
+          content: `<div style="color:#000000;font-size:10px;">${val.airspace}</div>`,
+          size: new naver.maps.Size(0, 0),
+          origin: new naver.maps.Point(0, 0),
+          anchor: new naver.maps.Point(7, 5),
+          align: 'center'
+        }
+      });
+    });
+  }, [coordCenter]);
   useEffect(() => {
     ModeInit();
   }, [mapControl.drawType]);
@@ -118,8 +179,8 @@ const FlightPlanAreaMap = props => {
     }
     const mapOptions = {
       // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
-      center: new naver.maps.LatLng(37.520357, 126.610166),
+      center: new naver.maps.LatLng(37.558522, 126.793722),
-      zoom: !areaCoordList ? 14 : bufferzoom.bufferzoom,
+      zoom: !areaCoordList ? 11 : bufferzoom.bufferzoom,
       zoomControl: true,
       mapTypeId: naver.maps.MapTypeId.NORMAL,
       zoomControlOptions: {

src/components/map/naver/NaverMap.js

@@ -1,27 +1,21 @@
 import React, { useEffect, useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
 import { DronMarker } from './dron/DronMarker';
-import { DronHistory } from './dron/DronHistory';
 import NaverMapControl from './NaverMapControl';
-import { NaverMapSearch } from './search/NaverMapSearch';
 import { FeatureAirZone } from './feature/FeatureAirZone';
 import geoJson from '../geojson/airArea.json';
-import DronPlan from './dron/DronPlan';
+import gimPo from '../geojson/airportAirArea.json';
 import NewDronPlan from './dron/NewDronPlan';
-import { NewDronHistory } from './dron/NewDronHistroy';
 import DronToast from './dron/DronToast';
-import SensorZone from './sensor/SensorZone';
 import ControlDraw from './draw/ControlDraw';
 
 export const NaverCustomMap = () => {
-  const dispatch = useDispatch();
   const naver = window.naver;
 
   const [mapObject, setMapObject] = useState(null);
   const [arrPolyline, setArrPolyline] = useState([]);
 
   const [poly, setPoly] = useState([]);
-  const [coordValue, setCoordValue] = useState([]);
+  const [coordCenter, setCoordCenter] = useState([]);
   const airPort = [
     {
       title: '김포공항',
@@ -49,6 +43,8 @@ export const NaverCustomMap = () => {
     }
   ];
 
+  const [squarePaths, setSquarePaths] = useState([]);
+
   const uamPosition = [
     {
       name: 'V1',
@@ -123,32 +119,58 @@ export const NaverCustomMap = () => {
     }
   ];
 
-  let features = geoJson.features;
+  let airArea = geoJson.features;
-
+  let gimPofeatures = gimPo.features;
+  let features = airArea.concat(gimPofeatures);
+  const coords = [];
   useEffect(() => {
     NaverMapInit();
-    // airPort?.map(air => polyArea(air));
     airPort?.map((air, idx) => polyArea(air, idx));
-    airPort?.map((air, idx) => airlist(air, idx));
+    // airPort?.map((air, idx) => airlist(air, idx));
-
+    // airPort?.map((air, idx) => polyArea(air, idx));
-    const arr = [];
+    airPort?.map((air, idx) => {
-    for (let i = 0; i < 300; i++) {
+      gridgrid(air, idx);
-      const coord = new naver.maps.EPSG3857.getDestinationCoord(
+    });
-        new naver.maps.LatLng(37.558522, 126.793722),
+    gimPofeatures.map(air => {
-        i,
+      coords.push({
-        9300
+        lat:
-      );
+          (Math.max(
-      // console.log(coord, '>>>>>>');
+            air.geometry.coordinates[0][0][1],
-      arr.push(coord);
+            air.geometry.coordinates[0][1][1],
-    }
+            air.geometry.coordinates[0][2][1],
-    //   console.log(arr, '>>>>');
+            air.geometry.coordinates[0][3][1]
+          ) +
+            Math.min(
+              air.geometry.coordinates[0][0][1],
+              air.geometry.coordinates[0][1][1],
+              air.geometry.coordinates[0][2][1],
+              air.geometry.coordinates[0][3][1]
+            )) /
+          2,
+        lng:
+          (Math.max(
+            air.geometry.coordinates[0][0][0],
+            air.geometry.coordinates[0][1][0],
+            air.geometry.coordinates[0][2][0],
+            air.geometry.coordinates[0][3][0]
+          ) +
+            Math.min(
+              air.geometry.coordinates[0][0][0],
+              air.geometry.coordinates[0][1][0],
+              air.geometry.coordinates[0][2][0],
+              air.geometry.coordinates[0][3][0]
+            )) /
+          2,
+        airspace: air.properties.airspace
+      });
+    });
+    setCoordCenter(coords);
   }, []);
 
   useEffect(() => {
     uamPosition.map(uam => {
       const name = uam.name;
       const position = new naver.maps.LatLng(uam.lat, uam.lon);
-
       const cont =
         name.substr(0, 1) == 'R'
           ? [
@@ -162,7 +184,7 @@ export const NaverCustomMap = () => {
               '</div>'
             ];
 
-      const marker = new naver.maps.Marker({
+      new naver.maps.Marker({
         position: position,
         map: mapObject,
         icon: {
@@ -171,37 +193,56 @@ export const NaverCustomMap = () => {
         }
       });
     });
+    // coordCenter = new nl();
+    coordCenter.map((val, idx) => {
+      const position = new naver.maps.LatLng(
+        val.lat.toFixed(6),
+        val.lng.toFixed(6)
+      );
 
-    const result = [];
+      //  const cont = `<div style=font-size:5px;color:#000000; text-align:center">${val.airspace}</div>`;
-    //   for (let i = 0; i < coordValue.length; i += 2) {
+      const marker = new naver.maps.Marker({
-    //     const lat_sum = (coordValue[i]._lat + coordValue[i + 1]._lat) / 2;
+        position: position,
-    //    const lng_sum = (coordValue[i]._lng + coordValue[i + 1]._lng) / 2;
+        map: mapObject,
-
+        icon: {
-    // result.push({ lat: lat_avg, lng: lng_avg });
+          content: `<div style="color:#000000;font-size:5px;">${val.airspace}</div>`,
-    //   result.push({ lat: lat_sum, lng: lng_sum });
+          size: new naver.maps.Size(0, 0),
-    // console.log('coordvalue>>', coordValue);
+          origin: new naver.maps.Point(0, 0),
-
+          anchor: new naver.maps.Point(5, 5),
-    // coordValue.map((val, idx) => {
+          align: 'center'
-    //   const po = new naver.maps.LatLng(val._lat, val._lng);
+        }
-    //   const cont = `<div style="background-color:#f8f9fa;border-radius:20px;color:#000000 ">${idx}번</div>`;
+      });
-    //   const marker = new naver.maps.Marker({
+    });
-    //     position: po,
+  }, [mapObject, coordCenter]);
-    //     map: mapObject,
+
-    //     icon: {
+  // useEffect(() => {
-    //       content: [cont].join(''),
+  //   if (squarePaths.length > 315) {
-    //       anchor: new naver.maps.Point(20, 20)
+  //     const arr = [];
+  //     squarePaths.map((path, idx) => {
+  //       const obj = {
+  //         type: 'Feature',
+  //         geometry: {
+  //           type: 'Polygon',
+  //           coordinates: [path]
+  //         },
+  //         properties: {
+  //           name: `${idx + 1}번째 영역`,
+  //           description: `${idx + 1}번째 영역 입니다.`,
+  //           type: '0001'
   //         }
+  //       };
+  //       arr.push(obj);
   //     });
-    // });
+  //     console.log(arr, '>>>>>');
-  }, [mapObject, coordValue]);
+  //   }
+  // }, [squarePaths]);
 
-  useEffect(() => {}, []);
   const NaverMapInit = () => {
     const mapOptions = {
-      center: new naver.maps.LatLng(37.520357, 126.610166),
+      center: new naver.maps.LatLng(37.558522, 126.793722),
       // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
       // zoom: 10,
-      zoom: 14,
+      zoom: 12,
       zoomControl: true,
       mapTypeId: naver.maps.MapTypeId.NORMAR,
       zoomControlOptions: {
@@ -214,107 +255,45 @@ export const NaverCustomMap = () => {
     setMapObject(new naver.maps.Map('map', mapOptions));
   };
 
-  const createUamArea = uam => {
-    const title = uam.title;
-    const position = new naver.maps.LatLng(uam.lat, uam.lon);
-
-    const circle = new naver.maps.Circle({
-      strokeColor: '#283046',
-      strokeOpacity: 1,
-      fillColor: '#7367F0',
-      fillOpacity: 0.1,
-      center: position,
-      // map: mapObject,
-      radius: 100,
-      clickable: true
-    });
-
-    // circle.setMap(mapObject);
-  };
-
   const handleHistoryInit = line => {
     setArrPolyline([...arrPolyline, line]);
   };
 
-  const airlist = (air, idx) => {
+  //비행 공역 밖에 있는 값인지 확인하는 코드(추후 사용 할 수 있을 것 같아서 주석 걸어둠)
-    if (idx == 0) {
+  // const incoords = [];
-      const radius = air.buffer;
+  // coords.map(coord => {
-      const position = air.center; //공역 센터
+  //   let centerLat = 37.558522;
-      const coords = [];
+  //   let centerLng = 126.793722;
-      // console.log('>>', position);
+  //   let radius = 9.3;
-      let angle2 = 0;
+  //   // let distance = Math.sqrt(
-      let buffer2 = 0;
+  //   //   (coord._lat - centerLat) ** 2 + (coord._lng - centerLng) ** 2
-      let angle = 0;
+  //   // );
-      for (let l = 0; l < 4; l++) {
+  //   const centerLatRad = (centerLat * Math.PI) / 180;
-        angle2 += 90;
+  //   const centerLngRad = (centerLng * Math.PI) / 180;
-        for (let i = 0; i < 1; i++) {
+  //   const coordlat = (coord._lat.toFixed(6) * Math.PI) / 180;
-          angle += 90;
+  //   const coordlng = (coord._lng.toFixed(6) * Math.PI) / 180;
-          let buffer = 0;
+
-          // for (let j = 0; j < 4; j++) {
+  //   const R = 6371; // Radius of the earth in km
-          for (let j = 0; j < 9; j++) {
+  //   const dLat = coordlat - centerLatRad;
-            // buffer += 2000;
+  //   const dLon = coordlng - centerLngRad;
-            buffer += 1000;
+  //   const a =
-            buffer2 = 0;
+  //     Math.sin(dLat / 2) * Math.sin(dLat / 2) +
-            const coord = new naver.maps.EPSG3857.getDestinationCoord(
+  //     Math.sin(dLon / 2) *
-              position,
+  //       Math.sin(dLon / 2) *
-              angle,
+  //       Math.cos(centerLatRad) *
-              buffer
+  //       Math.cos(coordlat);
-            );
+  //   const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-            for (let k = 0; k < 9; k++) {
+  //   const distance = R * c; // Distance in km
-              //EPSG3857.getDestinationCoord
+
-              //지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환
+  //   if (distance <= radius) {
-              const po = coord;
+  //     incoords.push(coord);
-              if (l == 0) angle2 = 0;
+  //   }
-              buffer2 += 1000;
+  // });
-              const coord2 = new naver.maps.EPSG3857.getDestinationCoord(
+  //   setCoordValue(incoords);
-                po,
-                angle2,
-                buffer2
-              );
-              //  console.log('coord>>>>>', coord2);
-
-              coords.push(coord2);
-            }
 
-            coords.push(coord);
-          }
-        }
-      }
-      const incoords = [];
-      coords.map(coord => {
-        let centerLat = 37.558522;
-        let centerLng = 126.793722;
-        let radius = 9.3;
-        // let distance = Math.sqrt(
-        //   (coord._lat - centerLat) ** 2 + (coord._lng - centerLng) ** 2
-        // );
-        const centerLatRad = (centerLat * Math.PI) / 180;
-        const centerLngRad = (centerLng * Math.PI) / 180;
-        const coordlat = (coord._lat.toFixed(6) * Math.PI) / 180;
-        const coordlng = (coord._lng.toFixed(6) * Math.PI) / 180;
-
-        // console.log('>>', coordlat);
-        const R = 6371; // Radius of the earth in km
-        const dLat = coordlat - centerLatRad;
-        const dLon = coordlng - centerLngRad;
-        const a =
-          Math.sin(dLat / 2) * Math.sin(dLat / 2) +
-          Math.sin(dLon / 2) *
-            Math.sin(dLon / 2) *
-            Math.cos(centerLatRad) *
-            Math.cos(coordlat);
-        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-        const distance = R * c; // Distance in km
-
-        if (distance <= radius) {
-          incoords.push(coord);
-        }
-      });
-      setCoordValue(incoords);
-    }
-  };
   const polyArea = (air, idx) => {
-    if (idx == 0) {
+    if (idx === 0) return;
+
     const polyArr = [];
     const radius = air.buffer;
     const position = air.center; //공역 센터
@@ -390,6 +369,7 @@ export const NaverCustomMap = () => {
         }
       }
     }
+
     const NS = new naver.maps.Polyline({
       path: [
         new naver.maps.EPSG3857.getDestinationCoord(position, 0, radius),
@@ -414,10 +394,108 @@ export const NaverCustomMap = () => {
     polyArr.push(EW);
 
     setPoly(m => [...m, polyArr]);
+  };
+
+  const gridgrid = (air, idx) => {
+    if (idx !== 0) return;
+
+    const realCenter = air.center;
+    new naver.maps.Marker({
+      position: realCenter,
+      map: mapObject
+    });
+
+    let westEastAngle = 270;
+    for (let we = 0; we < 2; we++) {
+      if (we === 1) westEastAngle = 90;
+      let westEastBuffer = 0;
+      for (let westEast = 0; westEast < 10; westEast++) {
+        westEastBuffer += 1000;
+        const coord = new naver.maps.EPSG3857.getDestinationCoord(
+          realCenter,
+          westEastAngle,
+          westEastBuffer
+        );
+
+        let northSouthCoord = coord;
+        let notIncludes = 10;
+        if (westEast === 3 || westEast === 4) {
+          notIncludes = 9;
+        } else if (westEast === 5 || westEast === 6) {
+          notIncludes = 8;
+        } else if (westEast === 7) {
+          notIncludes = 7;
+        } else if (westEast === 8) {
+          notIncludes = 5;
+        } else if (westEast === 9) {
+          notIncludes = 3;
+        }
 
-      // console.log(idx);
+        for (let ns = 0; ns < 2; ns++) {
+          getNorthSouth(northSouthCoord, notIncludes, we, ns);
         }
-    //격자 공역
+      }
+    }
+  };
+
+  const getNorthSouth = (northSouthCoord, notIncludes, weType, nsType) => {
+    for (let i = 0; i < notIncludes; i++) {
+      getSquare(northSouthCoord, weType, nsType);
+
+      const angle = nsType === 0 ? 0 : 180;
+      northSouthCoord = new naver.maps.EPSG3857.getDestinationCoord(
+        northSouthCoord,
+        angle,
+        1000
+      );
+    }
+  };
+
+  const getSquare = (coord, weType, nsType) => {
+    const square = [coord];
+
+    let angle = 0;
+
+    if (weType === 0 && nsType === 1) {
+      angle = 90;
+    } else if (weType === 1) {
+      if (nsType === 0) {
+        angle = 360;
+      } else if (nsType === 1) {
+        angle = 270;
+      }
+    }
+    for (let i = 2; i < 5; i++) {
+      const tt = new naver.maps.EPSG3857.getDestinationCoord(
+        square[i - 2],
+        angle,
+        1000
+      );
+      if (weType === 0) {
+        angle += 90;
+      } else if (weType === 1) {
+        angle -= 90;
+      }
+      square.push(tt);
+    }
+    const polygon = new naver.maps.Polygon({
+      strokeColor: '#283046',
+      strokeOpacity: 0.5,
+      // fillColor: '#7367F0',
+      fillOpacity: 0.1,
+      paths: square,
+      map: mapObject
+    });
+
+    const path = polygon.getPath()._array;
+
+    const arr = [];
+    path.map(tt => {
+      const latlngJson = [tt.lng(), tt.lat(), 0];
+      arr.push(latlngJson);
+    });
+    arr.push([path[0].lng(), path[0].lat(), 0]);
+    setSquarePaths(prev => [...prev, arr]);
   };
 
   return (

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

@@ -96,9 +96,10 @@ export const FeatureAirZone = props => {
       //0004 비행장(군사) #A16B00
       //0005 이착륙장(RC비행장) #AB40FF
       //0006 초경량비행장치 #009cad
-
       // 공역 색상 변경
       const type = feature.getProperty('type');
+      const name = feature.getProperty('name');
+
       if (type === '0001') {
         color = '#FF3648';
       } else if (type === '0002') {
@@ -109,14 +110,17 @@ export const FeatureAirZone = props => {
         color = '#A16B00';
       } else if (type === '0005') {
         color = '#AB40FF';
-      } else if (type === '0006') {
+      } else if (type === '0006' && name != '김포공항') {
         color = '#009cad';
+      } else if (name === '김포공항') {
+        color = '#020715';
       }
 
       return {
-        fillColor: color,
+        fillColor: name === '김포공항' ? '#ffffff' : color,
+        opercity: name === '김포공항' ? 0 : 1,
         strokeColor: color,
-        strokeWeight: 0.7,
+        strokeWeight: name === '김포공항' ? 1 : 0.7,
         icon: null
       };
     });

src/views/control/main/ControlMain.js

@@ -134,8 +134,8 @@ const ControlMain = () => {
   };
   //날씨 API
   const rq = {
-    nx: 37.4562557,
+    nx: 37.558522,
-    ny: 126.7052062
+    ny: 126.793722
   };
   useEffect(() => {
     dispatch(controlweatherAction.request(rq));
@@ -232,7 +232,7 @@ const ControlMain = () => {
             <div className='data-box-header'>
               <span className='box-ti'>
                 {!isClickObject
-                  ? '인천광역시'
+                  ? '김포공항'
                   : !controlDetail?.stAreaNm
                   ? `${controlDetail?.res.area1} ${controlDetail?.res.area2} ${controlDetail?.res.area3} ${controlDetail?.res.landNm} ${controlDetail?.res.landNum} `
                   : controlDetail?.stAreaNm}