화면 공역 재작업

src/components/map/naver/NaverMap.js

@@ -15,7 +15,7 @@ export const NaverCustomMap = () => {
   const [arrPolyline, setArrPolyline] = useState([]);
 
   const [poly, setPoly] = useState([]);
-  const [coordValue, setCoordValue] = useState([]);
+  const [coordCenter, setCoordCenter] = useState([]);
   const airPort = [
     {
       title: '김포공항',
@@ -45,8 +45,6 @@ export const NaverCustomMap = () => {
 
   const [squarePaths, setSquarePaths] = useState([]);
 
-  const [jsonFormat, setJsonFormat] = useState([]);
-
   const uamPosition = [
     {
       name: 'V1',
@@ -124,14 +122,46 @@ export const NaverCustomMap = () => {
   let airArea = geoJson.features;
   let gimPofeatures = gimPo.features;
   let features = airArea.concat(gimPofeatures);
-
+  const coords = [];
-  // console.log(features);
-
   useEffect(() => {
     NaverMapInit();
     airPort?.map((air, idx) => polyArea(air, idx));
     // airPort?.map((air, idx) => airlist(air, idx));
     // airPort?.map((air, idx) => polyArea(air, idx));
+    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);
   }, []);
 
   useEffect(() => {
@@ -162,36 +192,22 @@ export const NaverCustomMap = () => {
       });
     });
 
-    const result = [];
+    coordCenter.map((val, idx) => {
-    //   for (let i = 0; i < coordValue.length; i += 2) {
+      const position = new naver.maps.LatLng(val.lat, val.lng);
-    //     const lat_sum = (coordValue[i]._lat + coordValue[i + 1]._lat) / 2;
+      const cont = `<div style=font-size:15px;color:#000000;padding-top:5px;padding-left:8px ">${val.airspace}</div>`;
-    //    const lng_sum = (coordValue[i]._lng + coordValue[i + 1]._lng) / 2;
+      const marker = new naver.maps.Marker({
-
+        position: position,
-    // result.push({ lat: lat_avg, lng: lng_avg });
+        map: mapObject,
-    //   result.push({ lat: lat_sum, lng: lng_sum });
+        icon: {
-    // console.log('coordvalue>>', coordValue);
+          content: [cont].join(''),
-
+          anchor: new naver.maps.Point(20, 20)
-    // coordValue.map((val, idx) => {
+        }
-    //   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({
+  }, [mapObject, coordCenter]);
-    //     position: po,
-    //     map: mapObject,
-    //     icon: {
-    //       content: [cont].join(''),
-    //       anchor: new naver.maps.Point(20, 20)
-    //     }
-    //   });
-    // });
-
-    // if (mapObject) {
-    //   airPort?.map((air, idx) => gridgrid(air, idx));
-    // }
-  }, [mapObject, coordValue]);
 
   // useEffect(() => {
   //   if (squarePaths.length > 315) {
-  //     // console.log(squarePaths, '>>>>');
   //     const arr = [];
   //     squarePaths.map((path, idx) => {
   //       const obj = {
@@ -234,83 +250,38 @@ export const NaverCustomMap = () => {
     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) return;
 
@@ -389,6 +360,7 @@ export const NaverCustomMap = () => {
         }
       }
     }
+
     const NS = new naver.maps.Polyline({
       path: [
         new naver.maps.EPSG3857.getDestinationCoord(position, 0, radius),

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
       };
     });