|
|
@ -1,20 +1,14 @@ |
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
import { useSelector, useDispatch } from 'react-redux'; |
|
|
|
|
|
|
|
import { DronMarker } from './dron/DronMarker'; |
|
|
|
import { DronMarker } from './dron/DronMarker'; |
|
|
|
import { DronHistory } from './dron/DronHistory'; |
|
|
|
|
|
|
|
import NaverMapControl from './NaverMapControl'; |
|
|
|
import NaverMapControl from './NaverMapControl'; |
|
|
|
import { NaverMapSearch } from './search/NaverMapSearch'; |
|
|
|
|
|
|
|
import { FeatureAirZone } from './feature/FeatureAirZone'; |
|
|
|
import { FeatureAirZone } from './feature/FeatureAirZone'; |
|
|
|
import geoJson from '../geojson/airArea.json'; |
|
|
|
import geoJson from '../geojson/airArea.json'; |
|
|
|
import DronPlan from './dron/DronPlan'; |
|
|
|
import gimPo from '../geojson/airportAirArea.json'; |
|
|
|
import NewDronPlan from './dron/NewDronPlan'; |
|
|
|
import NewDronPlan from './dron/NewDronPlan'; |
|
|
|
import { NewDronHistory } from './dron/NewDronHistroy'; |
|
|
|
|
|
|
|
import DronToast from './dron/DronToast'; |
|
|
|
import DronToast from './dron/DronToast'; |
|
|
|
import SensorZone from './sensor/SensorZone'; |
|
|
|
|
|
|
|
import ControlDraw from './draw/ControlDraw'; |
|
|
|
import ControlDraw from './draw/ControlDraw'; |
|
|
|
|
|
|
|
|
|
|
|
export const NaverCustomMap = () => { |
|
|
|
export const NaverCustomMap = () => { |
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
|
|
|
const naver = window.naver; |
|
|
|
const naver = window.naver; |
|
|
|
|
|
|
|
|
|
|
|
const [mapObject, setMapObject] = useState(null); |
|
|
|
const [mapObject, setMapObject] = useState(null); |
|
|
@ -51,6 +45,8 @@ export const NaverCustomMap = () => { |
|
|
|
|
|
|
|
|
|
|
|
const [squarePaths, setSquarePaths] = useState([]); |
|
|
|
const [squarePaths, setSquarePaths] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [jsonFormat, setJsonFormat] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
const uamPosition = [ |
|
|
|
const uamPosition = [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
name: 'V1', |
|
|
|
name: 'V1', |
|
|
@ -125,23 +121,17 @@ export const NaverCustomMap = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
]; |
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
let features = geoJson.features; |
|
|
|
let airArea = geoJson.features; |
|
|
|
|
|
|
|
let gimPofeatures = gimPo.features; |
|
|
|
|
|
|
|
let features = airArea.concat(gimPofeatures); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// console.log(features);
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
NaverMapInit(); |
|
|
|
NaverMapInit(); |
|
|
|
// airPort?.map(air => polyArea(air));
|
|
|
|
airPort?.map(air => polyArea(air)); |
|
|
|
airPort?.map((air, idx) => polyArea(air, idx)); |
|
|
|
|
|
|
|
// airPort?.map((air, idx) => airlist(air, idx));
|
|
|
|
// airPort?.map((air, idx) => airlist(air, idx));
|
|
|
|
|
|
|
|
// airPort?.map((air, idx) => polyArea(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
|
|
|
|
|
|
|
|
// );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// arr.push(coord);
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
@ -162,7 +152,7 @@ export const NaverCustomMap = () => { |
|
|
|
'</div>' |
|
|
|
'</div>' |
|
|
|
]; |
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
const marker = new naver.maps.Marker({ |
|
|
|
new naver.maps.Marker({ |
|
|
|
position: position, |
|
|
|
position: position, |
|
|
|
map: mapObject, |
|
|
|
map: mapObject, |
|
|
|
icon: { |
|
|
|
icon: { |
|
|
@ -193,16 +183,35 @@ export const NaverCustomMap = () => { |
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
if (mapObject) { |
|
|
|
|
|
|
|
airPort?.map((air, idx) => gridgrid(air, idx)); |
|
|
|
// if (mapObject) {
|
|
|
|
} |
|
|
|
// airPort?.map((air, idx) => gridgrid(air, idx));
|
|
|
|
|
|
|
|
// }
|
|
|
|
}, [mapObject, coordValue]); |
|
|
|
}, [mapObject, coordValue]); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
// useEffect(() => {
|
|
|
|
if (squarePaths.length > 315) { |
|
|
|
// if (squarePaths.length > 315) {
|
|
|
|
console.log(squarePaths, '>>>>'); |
|
|
|
// // console.log(squarePaths, '>>>>');
|
|
|
|
} |
|
|
|
// const arr = [];
|
|
|
|
}, [squarePaths]); |
|
|
|
// squarePaths.map((path, idx) => {
|
|
|
|
|
|
|
|
// const obj = {
|
|
|
|
|
|
|
|
// type: 'Feature',
|
|
|
|
|
|
|
|
// geometry: {
|
|
|
|
|
|
|
|
// type: 'Polygon',
|
|
|
|
|
|
|
|
// coordinates: [path]
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// properties: {
|
|
|
|
|
|
|
|
// name: `${idx + 1}번째 영역`,
|
|
|
|
|
|
|
|
// description: `${idx + 1}번째 영역 입니다.`,
|
|
|
|
|
|
|
|
// type: '0001'
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
// arr.push(obj);
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// console.log(arr, '>>>>>');
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// }, [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), |
|
|
@ -303,110 +312,107 @@ export const NaverCustomMap = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
const polyArea = (air, idx) => { |
|
|
|
const polyArea = (air, idx) => { |
|
|
|
if (idx == 0) { |
|
|
|
if (idx === 0) return; |
|
|
|
const polyArr = []; |
|
|
|
|
|
|
|
const radius = air.buffer; |
|
|
|
|
|
|
|
const position = air.center; //공역 센터
|
|
|
|
|
|
|
|
const color = '#000'; |
|
|
|
|
|
|
|
const opacity = 0.7; |
|
|
|
|
|
|
|
const coords = []; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let angle = 0; |
|
|
|
const polyArr = []; |
|
|
|
for (let i = 0; i < 4; i++) { |
|
|
|
const radius = air.buffer; |
|
|
|
angle += 90; |
|
|
|
const position = air.center; //공역 센터
|
|
|
|
let buffer = 0; |
|
|
|
const color = '#000'; |
|
|
|
// for (let j = 0; j < 4; j++) {
|
|
|
|
const opacity = 0.7; |
|
|
|
for (let j = 0; j < 9; j++) { |
|
|
|
const coords = []; |
|
|
|
// buffer += 2000;
|
|
|
|
|
|
|
|
buffer += 1000; |
|
|
|
let angle = 0; |
|
|
|
|
|
|
|
for (let i = 0; i < 4; i++) { |
|
|
|
//EPSG3857.getDestinationCoord
|
|
|
|
angle += 90; |
|
|
|
//지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환
|
|
|
|
let buffer = 0; |
|
|
|
const coord = new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
// for (let j = 0; j < 4; j++) {
|
|
|
|
position, |
|
|
|
for (let j = 0; j < 9; j++) { |
|
|
|
angle, |
|
|
|
// buffer += 2000;
|
|
|
|
buffer |
|
|
|
buffer += 1000; |
|
|
|
); |
|
|
|
|
|
|
|
// console.log('coord>>>>>', coord);
|
|
|
|
//EPSG3857.getDestinationCoord
|
|
|
|
// coords.push(coord);
|
|
|
|
//지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환
|
|
|
|
// setCoordValue(coords);
|
|
|
|
const coord = new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
let reduce = 0; |
|
|
|
position, |
|
|
|
reduce = air.reduce[j]; |
|
|
|
angle, |
|
|
|
|
|
|
|
buffer |
|
|
|
// 2km reduce
|
|
|
|
); |
|
|
|
// [218.6, 905.4, 2195, 4560.2]
|
|
|
|
// console.log('coord>>>>>', coord);
|
|
|
|
|
|
|
|
// coords.push(coord);
|
|
|
|
if (angle % 180 == 0) { |
|
|
|
// setCoordValue(coords);
|
|
|
|
const polyEW = new naver.maps.Polyline({ |
|
|
|
let reduce = 0; |
|
|
|
path: [ |
|
|
|
reduce = air.reduce[j]; |
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
|
|
|
|
coord, |
|
|
|
// 2km reduce
|
|
|
|
90, |
|
|
|
// [218.6, 905.4, 2195, 4560.2]
|
|
|
|
radius - reduce |
|
|
|
|
|
|
|
), |
|
|
|
if (angle % 180 == 0) { |
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
const polyEW = new naver.maps.Polyline({ |
|
|
|
coord, |
|
|
|
path: [ |
|
|
|
270, |
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
radius - reduce |
|
|
|
coord, |
|
|
|
) |
|
|
|
90, |
|
|
|
], |
|
|
|
radius - reduce |
|
|
|
strokeWeight: 0.8, |
|
|
|
), |
|
|
|
strokeOpacity: opacity, |
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
strokeColor: color |
|
|
|
coord, |
|
|
|
// map: map
|
|
|
|
270, |
|
|
|
}); |
|
|
|
radius - reduce |
|
|
|
polyArr.push(polyEW); |
|
|
|
) |
|
|
|
} else { |
|
|
|
], |
|
|
|
const polyNS = new naver.maps.Polyline({ |
|
|
|
strokeWeight: 0.8, |
|
|
|
path: [ |
|
|
|
strokeOpacity: opacity, |
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
strokeColor: color |
|
|
|
coord, |
|
|
|
// map: map
|
|
|
|
0, |
|
|
|
}); |
|
|
|
radius - reduce |
|
|
|
polyArr.push(polyEW); |
|
|
|
), |
|
|
|
} else { |
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
const polyNS = new naver.maps.Polyline({ |
|
|
|
coord, |
|
|
|
path: [ |
|
|
|
180, |
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
radius - reduce |
|
|
|
coord, |
|
|
|
) |
|
|
|
0, |
|
|
|
], |
|
|
|
radius - reduce |
|
|
|
strokeWeight: 0.8, |
|
|
|
), |
|
|
|
strokeOpacity: opacity, |
|
|
|
new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
strokeColor: color |
|
|
|
coord, |
|
|
|
// map: props.map
|
|
|
|
180, |
|
|
|
}); |
|
|
|
radius - reduce |
|
|
|
polyArr.push(polyNS); |
|
|
|
) |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
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]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// console.log(idx);
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
//격자 공역
|
|
|
|
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]); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const gridgrid = (air, idx) => { |
|
|
|
const gridgrid = (air, idx) => { |
|
|
@ -504,11 +510,8 @@ export const NaverCustomMap = () => { |
|
|
|
|
|
|
|
|
|
|
|
const arr = []; |
|
|
|
const arr = []; |
|
|
|
path.map(tt => { |
|
|
|
path.map(tt => { |
|
|
|
const latlng = { |
|
|
|
const latlngJson = [tt.lng(), tt.lat(), 0]; |
|
|
|
x: tt.lng(), |
|
|
|
arr.push(latlngJson); |
|
|
|
y: tt.lat() |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
arr.push(latlng); |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
setSquarePaths(prev => [...prev, arr]); |
|
|
|
setSquarePaths(prev => [...prev, arr]); |
|
|
|
}; |
|
|
|
}; |
|
|
|