diff --git a/src/components/map/naver/NaverMap.js b/src/components/map/naver/NaverMap.js index 9207c84..67701a1 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 = () => { - + {/* */} {/* */} diff --git a/src/components/map/naver/feature/FeatureAirZone.js b/src/components/map/naver/feature/FeatureAirZone.js index a157c4e..cd6601f 100644 --- a/src/components/map/naver/feature/FeatureAirZone.js +++ b/src/components/map/naver/feature/FeatureAirZone.js @@ -11,7 +11,11 @@ export const FeatureAirZone = props => { featureAirEvent(); }, [mapControl]); - useEffect(() => {}, []); + useEffect(() => { + props.poly?.map(prev => { + prev.setMap(props.map); + }); + }, []); const infowindowOpen = data => { const content = @@ -130,124 +134,6 @@ export const FeatureAirZone = props => { // } // console.log(coordzip); // console.log(tt); - - 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: props.map - }); - } 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 - }); - } - } - } - 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 - }); - 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 - }); }; const featureAirEvent = () => {