|
|
@ -11,7 +11,6 @@ import NewDronPlan from './dron/NewDronPlan'; |
|
|
|
import { NewDronHistory } from './dron/NewDronHistroy'; |
|
|
|
import { NewDronHistory } from './dron/NewDronHistroy'; |
|
|
|
import DronToast from './dron/DronToast'; |
|
|
|
import DronToast from './dron/DronToast'; |
|
|
|
import SensorZone from './sensor/SensorZone'; |
|
|
|
import SensorZone from './sensor/SensorZone'; |
|
|
|
import ControlDraw from './draw/ControlDraw'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export const NaverCustomMap = () => { |
|
|
|
export const NaverCustomMap = () => { |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
@ -21,7 +20,7 @@ export const NaverCustomMap = () => { |
|
|
|
const [arrPolyline, setArrPolyline] = useState([]); |
|
|
|
const [arrPolyline, setArrPolyline] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
const [poly, setPoly] = useState([]); |
|
|
|
const [poly, setPoly] = useState([]); |
|
|
|
|
|
|
|
const [coordValue, setCoordValue] = useState([]); |
|
|
|
const airPort = [ |
|
|
|
const airPort = [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: '김포공항', |
|
|
|
title: '김포공항', |
|
|
@ -129,6 +128,19 @@ 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)); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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(() => { |
|
|
|
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 = `<div style="background-color:#f8f9fa;border-radius:20px;color:#000000 ">${idx}번</div>`; |
|
|
|
|
|
|
|
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 NaverMapInit = () => { |
|
|
|
const mapOptions = { |
|
|
|
const mapOptions = { |
|
|
|
center: new naver.maps.LatLng(37.520357, 126.610166), |
|
|
|
center: new naver.maps.LatLng(37.520357, 126.610166), |
|
|
@ -200,13 +235,91 @@ export const NaverCustomMap = () => { |
|
|
|
setArrPolyline([...arrPolyline, line]); |
|
|
|
setArrPolyline([...arrPolyline, line]); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 polyArea = (air, idx) => { |
|
|
|
const polyArea = (air, idx) => { |
|
|
|
//격자 공역
|
|
|
|
if (idx == 0) { |
|
|
|
const polyArr = []; |
|
|
|
const polyArr = []; |
|
|
|
const radius = air.buffer; |
|
|
|
const radius = air.buffer; |
|
|
|
const position = air.center; //공역 센터
|
|
|
|
const position = air.center; //공역 센터
|
|
|
|
const color = '#000'; |
|
|
|
const color = '#000'; |
|
|
|
const opacity = 0.7; |
|
|
|
const opacity = 0.7; |
|
|
|
|
|
|
|
const coords = []; |
|
|
|
|
|
|
|
|
|
|
|
let angle = 0; |
|
|
|
let angle = 0; |
|
|
|
for (let i = 0; i < 4; i++) { |
|
|
|
for (let i = 0; i < 4; i++) { |
|
|
@ -224,7 +337,9 @@ export const NaverCustomMap = () => { |
|
|
|
angle, |
|
|
|
angle, |
|
|
|
buffer |
|
|
|
buffer |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
// console.log('coord>>>>>', coord);
|
|
|
|
|
|
|
|
// coords.push(coord);
|
|
|
|
|
|
|
|
// setCoordValue(coords);
|
|
|
|
let reduce = 0; |
|
|
|
let reduce = 0; |
|
|
|
reduce = air.reduce[j]; |
|
|
|
reduce = air.reduce[j]; |
|
|
|
|
|
|
|
|
|
|
@ -298,6 +413,10 @@ export const NaverCustomMap = () => { |
|
|
|
polyArr.push(EW); |
|
|
|
polyArr.push(EW); |
|
|
|
|
|
|
|
|
|
|
|
setPoly(m => [...m, polyArr]); |
|
|
|
setPoly(m => [...m, polyArr]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// console.log(idx);
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
//격자 공역
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
@ -312,8 +431,6 @@ export const NaverCustomMap = () => { |
|
|
|
|
|
|
|
|
|
|
|
<NaverMapControl map={mapObject} /> |
|
|
|
<NaverMapControl map={mapObject} /> |
|
|
|
|
|
|
|
|
|
|
|
<ControlDraw map={mapObject} naver={naver} /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* <DronHistory |
|
|
|
{/* <DronHistory |
|
|
|
map={mapObject} |
|
|
|
map={mapObject} |
|
|
|
naver={naver} |
|
|
|
naver={naver} |
|
|
|