공역 고도 값 화면 깨짐 수정

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

@@ -128,6 +128,9 @@ export const NaverCustomMap = () => {
     airPort?.map((air, idx) => polyArea(air, idx));
     // airPort?.map((air, idx) => airlist(air, idx));
     // airPort?.map((air, idx) => polyArea(air, idx));
+    airPort?.map((air, idx) => {
+      gridgrid(air, idx);
+    });
     gimPofeatures.map(air => {
       coords.push({
         lat:
@@ -168,7 +171,6 @@ export const NaverCustomMap = () => {
     uamPosition.map(uam => {
       const name = uam.name;
       const position = new naver.maps.LatLng(uam.lat, uam.lon);
-
       const cont =
         name.substr(0, 1) == 'R'
           ? [
@@ -191,16 +193,23 @@ export const NaverCustomMap = () => {
         }
       });
     });
-
+    // coordCenter = new nl();
     coordCenter.map((val, idx) => {
-      const position = new naver.maps.LatLng(val.lat, val.lng);
+      const position = new naver.maps.LatLng(
-      const cont = `<div style=font-size:15px;color:#000000;padding-top:5px;padding-left:8px ">${val.airspace}</div>`;
+        val.lat.toFixed(6),
+        val.lng.toFixed(6)
+      );
+
+      //  const cont = `<div style=font-size:5px;color:#000000; text-align:center">${val.airspace}</div>`;
       const marker = new naver.maps.Marker({
         position: position,
         map: mapObject,
         icon: {
-          content: [cont].join(''),
+          content: `<div style="color:#000000;font-size:5px;">${val.airspace}</div>`,
-          anchor: new naver.maps.Point(20, 20)
+          size: new naver.maps.Size(0, 0),
+          origin: new naver.maps.Point(0, 0),
+          anchor: new naver.maps.Point(5, 5),
+          align: 'center'
         }
       });
     });
@@ -230,10 +239,10 @@ export const NaverCustomMap = () => {
 
   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: {
@@ -485,6 +494,7 @@ export const NaverCustomMap = () => {
       const latlngJson = [tt.lng(), tt.lat(), 0];
       arr.push(latlngJson);
     });
+    arr.push([path[0].lng(), path[0].lat(), 0]);
     setSquarePaths(prev => [...prev, arr]);
   };
 

src/views/control/main/ControlMain.js

@@ -133,8 +133,8 @@ const ControlMain = () => {
   };
   //날씨 API
   const rq = {
-    nx: 37.4562557,
+    nx: 37.558522,
-    ny: 126.7052062
+    ny: 126.793722
   };
   useEffect(() => {
     dispatch(controlweatherAction.request(rq));
@@ -229,7 +229,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}