From 38ce25e63cf11eca27420070cc02a80761c272cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Tue, 8 Nov 2022 13:51:57 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B9=80=ED=8F=AC=EA=B3=B5=ED=95=AD=20?= =?UTF-8?q?=EA=B2=A9=EC=9E=90=EA=B3=B5=EC=97=AD=20=ED=91=9C=EC=B6=9C=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map/naver/NaverMap.js | 137 +++++++++++++++++- .../map/naver/feature/FeatureAirZone.js | 124 +--------------- 2 files changed, 141 insertions(+), 120 deletions(-) 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 = () => {