diff --git a/src/components/map/naver/NaverMap.js b/src/components/map/naver/NaverMap.js index 9207c841..67701a1a 100644 --- a/src/components/map/naver/NaverMap.js +++ b/src/components/map/naver/NaverMap.js @@ -17,10 +17,13 @@ export const NaverCustomMap = () => { const [mapObject, setMapObject] = useState(null); const [arrPolyline, setArrPolyline] = useState([]); + const [poly, setPoly] = useState([]); + let features = geoJson.features; useEffect(() => { NaverMapInit(); + polyArea(); }, []); const NaverMapInit = () => { @@ -45,6 +48,133 @@ export const NaverCustomMap = () => { setArrPolyline([...arrPolyline, line]); }; + const polyArea = () => { + //격자 공역 + const polyArr = []; + const SENSOR_RADIUS = 9300; + const position = new naver.maps.LatLng(37.558522, 126.793722); + const color = '#000'; + const opacity = 0.7; + + let angle = 0; + for (let i = 0; i < 4; i++) { + angle += 90; + let buffer = 0; + // for (let j = 0; j < 4; j++) { + for (let j = 0; j < 9; j++) { + // buffer += 2000; + buffer += 1000; + + const coord = new naver.maps.EPSG3857.getDestinationCoord( + position, + angle, + buffer + ); + + let reduce = 0; + if (j === 0) { + // reduce = 218.6; + reduce = 54.4; + } else if (j === 1) { + // reduce = 905.4; + reduce = 218.6; + } else if (j === 2) { + // reduce = 2195; + reduce = 500; + } else if (j === 3) { + // reduce = 4560.2; + reduce = 905.4; + } else if (j === 4) { + reduce = 1459.8; + } else if (j === 5) { + reduce = 2195; + } else if (j === 6) { + reduce = 3173.5; + } else if (j === 7) { + reduce = 4552.5; + } else if (j === 8) { + reduce = 6952.5; + } + if (angle % 180 == 0) { + const polyEW = new naver.maps.Polyline({ + path: [ + new naver.maps.EPSG3857.getDestinationCoord( + coord, + 90, + SENSOR_RADIUS - reduce + ), + new naver.maps.EPSG3857.getDestinationCoord( + coord, + 270, + SENSOR_RADIUS - reduce + ) + ], + strokeWeight: 0.8, + strokeOpacity: opacity, + strokeColor: color + // map: map + }); + polyArr.push(polyEW); + } else { + const polyNS = new naver.maps.Polyline({ + path: [ + new naver.maps.EPSG3857.getDestinationCoord( + coord, + 0, + SENSOR_RADIUS - reduce + ), + new naver.maps.EPSG3857.getDestinationCoord( + coord, + 180, + SENSOR_RADIUS - reduce + ) + ], + strokeWeight: 0.8, + strokeOpacity: opacity, + strokeColor: color + // map: props.map + }); + polyArr.push(polyNS); + } + } + } + const NS = new naver.maps.Polyline({ + path: [ + new naver.maps.EPSG3857.getDestinationCoord(position, 0, SENSOR_RADIUS), + new naver.maps.EPSG3857.getDestinationCoord( + position, + 180, + SENSOR_RADIUS + ) + ], + strokeWeight: 0.8, + strokeOpacity: opacity, + strokeColor: color + // map: props.map + }); + polyArr.push(NS); + const EW = new naver.maps.Polyline({ + path: [ + new naver.maps.EPSG3857.getDestinationCoord( + position, + 90, + SENSOR_RADIUS + ), + new naver.maps.EPSG3857.getDestinationCoord( + position, + 270, + SENSOR_RADIUS + ) + ], + strokeWeight: 0.8, + strokeOpacity: opacity, + strokeColor: color + // map: props.map + }); + polyArr.push(EW); + setPoly(polyArr); + }; + return ( <>
@@ -65,7 +195,12 @@ export const NaverCustomMap = () => {