diff --git a/src/components/map/naver/NaverMap.js b/src/components/map/naver/NaverMap.js index 4ea3897e..2c6444ec 100644 --- a/src/components/map/naver/NaverMap.js +++ b/src/components/map/naver/NaverMap.js @@ -49,6 +49,8 @@ export const NaverCustomMap = () => { } ]; + const [squarePaths, setSquarePaths] = useState([]); + const uamPosition = [ { name: 'V1', @@ -129,19 +131,18 @@ export const NaverCustomMap = () => { NaverMapInit(); // airPort?.map(air => polyArea(air)); airPort?.map((air, idx) => polyArea(air, idx)); - airPort?.map((air, idx) => airlist(air, idx)); - - const arr = []; - for (let i = 0; i < 300; i++) { - const coord = new naver.maps.EPSG3857.getDestinationCoord( - new naver.maps.LatLng(37.558522, 126.793722), - i, - 9300 - ); - // console.log(coord, '>>>>>>'); - arr.push(coord); - } - // console.log(arr, '>>>>'); + // airPort?.map((air, idx) => airlist(air, idx)); + + // const arr = []; + // for (let i = 0; i < 300; i++) { + // const coord = new naver.maps.EPSG3857.getDestinationCoord( + // new naver.maps.LatLng(37.558522, 126.793722), + // i, + // 9300 + // ); + + // arr.push(coord); + // } }, []); useEffect(() => { @@ -193,9 +194,17 @@ export const NaverCustomMap = () => { // } // }); // }); + + if (mapObject) { + airPort?.map((air, idx) => gridgrid(air, idx)); + } }, [mapObject, coordValue]); - useEffect(() => {}, []); + useEffect(() => { + if (squarePaths.length > 315) { + console.log(squarePaths, '>>>>'); + } + }, [squarePaths]); const NaverMapInit = () => { const mapOptions = { center: new naver.maps.LatLng(37.520357, 126.610166), @@ -402,6 +411,110 @@ export const NaverCustomMap = () => { //격자 공역 }; + 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; + } + + 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 latlng = { + x: tt.lng(), + y: tt.lat() + }; + arr.push(latlng); + }); + setSquarePaths(prev => [...prev, arr]); + }; + return ( <>