|
|
@ -49,6 +49,8 @@ export const NaverCustomMap = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
]; |
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [squarePaths, setSquarePaths] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
const uamPosition = [ |
|
|
|
const uamPosition = [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
name: 'V1', |
|
|
|
name: 'V1', |
|
|
@ -129,19 +131,18 @@ export const NaverCustomMap = () => { |
|
|
|
NaverMapInit(); |
|
|
|
NaverMapInit(); |
|
|
|
// airPort?.map(air => polyArea(air));
|
|
|
|
// airPort?.map(air => polyArea(air));
|
|
|
|
airPort?.map((air, idx) => polyArea(air, idx)); |
|
|
|
airPort?.map((air, idx) => polyArea(air, idx)); |
|
|
|
airPort?.map((air, idx) => airlist(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
|
|
|
|
|
|
|
|
// );
|
|
|
|
|
|
|
|
|
|
|
|
const arr = []; |
|
|
|
// arr.push(coord);
|
|
|
|
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(() => { |
|
|
|
useEffect(() => { |
|
|
@ -193,9 +194,17 @@ export const NaverCustomMap = () => { |
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (mapObject) { |
|
|
|
|
|
|
|
airPort?.map((air, idx) => gridgrid(air, idx)); |
|
|
|
|
|
|
|
} |
|
|
|
}, [mapObject, coordValue]); |
|
|
|
}, [mapObject, coordValue]); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {}, []); |
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (squarePaths.length > 315) { |
|
|
|
|
|
|
|
console.log(squarePaths, '>>>>'); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, [squarePaths]); |
|
|
|
const NaverMapInit = () => { |
|
|
|
const NaverMapInit = () => { |
|
|
|
const mapOptions = { |
|
|
|
const mapOptions = { |
|
|
|
center: new naver.maps.LatLng(37.520357, 126.610166), |
|
|
|
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 ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<div id='map' style={{ width: '100%', height: '100vh' }}></div> |
|
|
|
<div id='map' style={{ width: '100%', height: '100vh' }}></div> |
|
|
|