From 6b2b81ed6fa29dac29d7bd1479ec1895cee76f32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?sanguu516=28=EB=B0=95=EC=83=81=ED=98=84=29?= Date: Tue, 13 Jun 2023 15:48:58 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B3=B5=EC=97=AD=20=EA=BC=AD=EC=A7=93?= =?UTF-8?q?=EC=A0=90=20=EA=B5=AC=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map/naver/NaverMap.js | 315 ++++++++++++++++++--------- 1 file changed, 216 insertions(+), 99 deletions(-) diff --git a/src/components/map/naver/NaverMap.js b/src/components/map/naver/NaverMap.js index 4fb47ae..134d781 100644 --- a/src/components/map/naver/NaverMap.js +++ b/src/components/map/naver/NaverMap.js @@ -11,7 +11,6 @@ import NewDronPlan from './dron/NewDronPlan'; import { NewDronHistory } from './dron/NewDronHistroy'; import DronToast from './dron/DronToast'; import SensorZone from './sensor/SensorZone'; -import ControlDraw from './draw/ControlDraw'; export const NaverCustomMap = () => { const dispatch = useDispatch(); @@ -21,7 +20,7 @@ export const NaverCustomMap = () => { const [arrPolyline, setArrPolyline] = useState([]); const [poly, setPoly] = useState([]); - + const [coordValue, setCoordValue] = useState([]); const airPort = [ { title: '김포공항', @@ -129,6 +128,19 @@ 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, '>>>>'); }, []); useEffect(() => { @@ -158,8 +170,31 @@ export const NaverCustomMap = () => { } }); }); - }, [mapObject]); + const result = []; + // for (let i = 0; i < coordValue.length; i += 2) { + // const lat_sum = (coordValue[i]._lat + coordValue[i + 1]._lat) / 2; + // const lng_sum = (coordValue[i]._lng + coordValue[i + 1]._lng) / 2; + + // result.push({ lat: lat_avg, lng: lng_avg }); + // result.push({ lat: lat_sum, lng: lng_sum }); + // console.log('coordvalue>>', coordValue); + + coordValue.map((val, idx) => { + const po = new naver.maps.LatLng(val._lat, val._lng); + const cont = `
${idx}번
`; + const marker = new naver.maps.Marker({ + position: po, + map: mapObject, + icon: { + content: [cont].join(''), + anchor: new naver.maps.Point(20, 20) + } + }); + }); + }, [mapObject, coordValue]); + + useEffect(() => {}, []); const NaverMapInit = () => { const mapOptions = { center: new naver.maps.LatLng(37.520357, 126.610166), @@ -200,104 +235,188 @@ export const NaverCustomMap = () => { setArrPolyline([...arrPolyline, line]); }; - const polyArea = (air, idx) => { - //격자 공역 - const polyArr = []; - const radius = air.buffer; - const position = air.center; //공역 센터 - 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; - - //EPSG3857.getDestinationCoord - //지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환 - const coord = new naver.maps.EPSG3857.getDestinationCoord( - position, - angle, - buffer - ); - - let reduce = 0; - reduce = air.reduce[j]; - - // 2km reduce - // [218.6, 905.4, 2195, 4560.2] - - if (angle % 180 == 0) { - const polyEW = new naver.maps.Polyline({ - path: [ - new naver.maps.EPSG3857.getDestinationCoord( - coord, - 90, - radius - reduce - ), - new naver.maps.EPSG3857.getDestinationCoord( - coord, - 270, - 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, - radius - reduce - ), - new naver.maps.EPSG3857.getDestinationCoord( - coord, - 180, - radius - reduce - ) - ], - strokeWeight: 0.8, - strokeOpacity: opacity, - strokeColor: color - // map: props.map - }); - polyArr.push(polyNS); + const airlist = (air, idx) => { + if (idx == 0) { + const radius = air.buffer; + const position = air.center; //공역 센터 + const coords = []; + // console.log('>>', position); + let angle2 = 0; + let buffer2 = 0; + let angle = 0; + for (let l = 0; l < 4; l++) { + angle2 += 90; + for (let i = 0; i < 1; i++) { + angle += 90; + let buffer = 0; + // for (let j = 0; j < 4; j++) { + for (let j = 0; j < 9; j++) { + // buffer += 2000; + buffer += 1000; + buffer2 = 0; + const coord = new naver.maps.EPSG3857.getDestinationCoord( + position, + angle, + buffer + ); + for (let k = 0; k < 9; k++) { + //EPSG3857.getDestinationCoord + //지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환 + const po = coord; + if (l == 0) angle2 = 0; + buffer2 += 1000; + const coord2 = new naver.maps.EPSG3857.getDestinationCoord( + 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 NS = new naver.maps.Polyline({ - path: [ - new naver.maps.EPSG3857.getDestinationCoord(position, 0, radius), - new naver.maps.EPSG3857.getDestinationCoord(position, 180, 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, radius), - new naver.maps.EPSG3857.getDestinationCoord(position, 270, radius) - ], - strokeWeight: 0.8, - strokeOpacity: opacity, - strokeColor: color - // map: props.map - }); - polyArr.push(EW); + }; + const polyArea = (air, idx) => { + if (idx == 0) { + const polyArr = []; + const radius = air.buffer; + const position = air.center; //공역 센터 + const color = '#000'; + const opacity = 0.7; + const coords = []; + + 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; + + //EPSG3857.getDestinationCoord + //지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환 + const coord = new naver.maps.EPSG3857.getDestinationCoord( + position, + angle, + buffer + ); + // console.log('coord>>>>>', coord); + // coords.push(coord); + // setCoordValue(coords); + let reduce = 0; + reduce = air.reduce[j]; + + // 2km reduce + // [218.6, 905.4, 2195, 4560.2] + + if (angle % 180 == 0) { + const polyEW = new naver.maps.Polyline({ + path: [ + new naver.maps.EPSG3857.getDestinationCoord( + coord, + 90, + radius - reduce + ), + new naver.maps.EPSG3857.getDestinationCoord( + coord, + 270, + 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, + radius - reduce + ), + new naver.maps.EPSG3857.getDestinationCoord( + coord, + 180, + 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, radius), + new naver.maps.EPSG3857.getDestinationCoord(position, 180, 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, radius), + new naver.maps.EPSG3857.getDestinationCoord(position, 270, radius) + ], + strokeWeight: 0.8, + strokeOpacity: opacity, + strokeColor: color + // map: props.map + }); + polyArr.push(EW); + + setPoly(m => [...m, polyArr]); - setPoly(m => [...m, polyArr]); + // console.log(idx); + } + //격자 공역 }; return ( @@ -312,8 +431,6 @@ export const NaverCustomMap = () => { - - {/*