|
|
@ -15,7 +15,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 [coordCenter, setCoordCenter] = useState([]); |
|
|
|
const airPort = [ |
|
|
|
const airPort = [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: '김포공항', |
|
|
|
title: '김포공항', |
|
|
@ -45,8 +45,6 @@ export const NaverCustomMap = () => { |
|
|
|
|
|
|
|
|
|
|
|
const [squarePaths, setSquarePaths] = useState([]); |
|
|
|
const [squarePaths, setSquarePaths] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
const [jsonFormat, setJsonFormat] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const uamPosition = [ |
|
|
|
const uamPosition = [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
name: 'V1', |
|
|
|
name: 'V1', |
|
|
@ -124,14 +122,46 @@ export const NaverCustomMap = () => { |
|
|
|
let airArea = geoJson.features; |
|
|
|
let airArea = geoJson.features; |
|
|
|
let gimPofeatures = gimPo.features; |
|
|
|
let gimPofeatures = gimPo.features; |
|
|
|
let features = airArea.concat(gimPofeatures); |
|
|
|
let features = airArea.concat(gimPofeatures); |
|
|
|
|
|
|
|
const coords = []; |
|
|
|
// console.log(features);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
NaverMapInit(); |
|
|
|
NaverMapInit(); |
|
|
|
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));
|
|
|
|
// airPort?.map((air, idx) => polyArea(air, idx));
|
|
|
|
// airPort?.map((air, idx) => polyArea(air, idx));
|
|
|
|
|
|
|
|
gimPofeatures.map(air => { |
|
|
|
|
|
|
|
coords.push({ |
|
|
|
|
|
|
|
lat: |
|
|
|
|
|
|
|
(Math.max( |
|
|
|
|
|
|
|
air.geometry.coordinates[0][0][1], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][1][1], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][2][1], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][3][1] |
|
|
|
|
|
|
|
) + |
|
|
|
|
|
|
|
Math.min( |
|
|
|
|
|
|
|
air.geometry.coordinates[0][0][1], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][1][1], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][2][1], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][3][1] |
|
|
|
|
|
|
|
)) / |
|
|
|
|
|
|
|
2, |
|
|
|
|
|
|
|
lng: |
|
|
|
|
|
|
|
(Math.max( |
|
|
|
|
|
|
|
air.geometry.coordinates[0][0][0], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][1][0], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][2][0], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][3][0] |
|
|
|
|
|
|
|
) + |
|
|
|
|
|
|
|
Math.min( |
|
|
|
|
|
|
|
air.geometry.coordinates[0][0][0], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][1][0], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][2][0], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][3][0] |
|
|
|
|
|
|
|
)) / |
|
|
|
|
|
|
|
2, |
|
|
|
|
|
|
|
airspace: air.properties.airspace |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
setCoordCenter(coords); |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
@ -162,36 +192,22 @@ export const NaverCustomMap = () => { |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const result = []; |
|
|
|
coordCenter.map((val, idx) => { |
|
|
|
// for (let i = 0; i < coordValue.length; i += 2) {
|
|
|
|
const position = new naver.maps.LatLng(val.lat, val.lng); |
|
|
|
// const lat_sum = (coordValue[i]._lat + coordValue[i + 1]._lat) / 2;
|
|
|
|
const cont = `<div style=font-size:15px;color:#000000;padding-top:5px;padding-left:8px ">${val.airspace}</div>`; |
|
|
|
// const lng_sum = (coordValue[i]._lng + coordValue[i + 1]._lng) / 2;
|
|
|
|
const marker = new naver.maps.Marker({ |
|
|
|
|
|
|
|
position: position, |
|
|
|
// result.push({ lat: lat_avg, lng: lng_avg });
|
|
|
|
map: mapObject, |
|
|
|
// result.push({ lat: lat_sum, lng: lng_sum });
|
|
|
|
icon: { |
|
|
|
// console.log('coordvalue>>', coordValue);
|
|
|
|
content: [cont].join(''), |
|
|
|
|
|
|
|
anchor: new naver.maps.Point(20, 20) |
|
|
|
// 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({
|
|
|
|
}, [mapObject, coordCenter]); |
|
|
|
// position: po,
|
|
|
|
|
|
|
|
// map: mapObject,
|
|
|
|
|
|
|
|
// icon: {
|
|
|
|
|
|
|
|
// content: [cont].join(''),
|
|
|
|
|
|
|
|
// anchor: new naver.maps.Point(20, 20)
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if (mapObject) {
|
|
|
|
|
|
|
|
// airPort?.map((air, idx) => gridgrid(air, idx));
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
}, [mapObject, coordValue]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// useEffect(() => {
|
|
|
|
// useEffect(() => {
|
|
|
|
// if (squarePaths.length > 315) {
|
|
|
|
// if (squarePaths.length > 315) {
|
|
|
|
// // console.log(squarePaths, '>>>>');
|
|
|
|
|
|
|
|
// const arr = [];
|
|
|
|
// const arr = [];
|
|
|
|
// squarePaths.map((path, idx) => {
|
|
|
|
// squarePaths.map((path, idx) => {
|
|
|
|
// const obj = {
|
|
|
|
// const obj = {
|
|
|
@ -234,83 +250,38 @@ export const NaverCustomMap = () => { |
|
|
|
setArrPolyline([...arrPolyline, line]); |
|
|
|
setArrPolyline([...arrPolyline, line]); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const airlist = (air, idx) => { |
|
|
|
//비행 공역 밖에 있는 값인지 확인하는 코드(추후 사용 할 수 있을 것 같아서 주석 걸어둠)
|
|
|
|
if (idx == 0) { |
|
|
|
// const incoords = [];
|
|
|
|
const radius = air.buffer; |
|
|
|
// coords.map(coord => {
|
|
|
|
const position = air.center; //공역 센터
|
|
|
|
// let centerLat = 37.558522;
|
|
|
|
const coords = []; |
|
|
|
// let centerLng = 126.793722;
|
|
|
|
// console.log('>>', position);
|
|
|
|
// let radius = 9.3;
|
|
|
|
let angle2 = 0; |
|
|
|
// // let distance = Math.sqrt(
|
|
|
|
let buffer2 = 0; |
|
|
|
// // (coord._lat - centerLat) ** 2 + (coord._lng - centerLng) ** 2
|
|
|
|
let angle = 0; |
|
|
|
// // );
|
|
|
|
for (let l = 0; l < 4; l++) { |
|
|
|
// const centerLatRad = (centerLat * Math.PI) / 180;
|
|
|
|
angle2 += 90; |
|
|
|
// const centerLngRad = (centerLng * Math.PI) / 180;
|
|
|
|
for (let i = 0; i < 1; i++) { |
|
|
|
// const coordlat = (coord._lat.toFixed(6) * Math.PI) / 180;
|
|
|
|
angle += 90; |
|
|
|
// const coordlng = (coord._lng.toFixed(6) * Math.PI) / 180;
|
|
|
|
let buffer = 0; |
|
|
|
|
|
|
|
// for (let j = 0; j < 4; j++) {
|
|
|
|
// const R = 6371; // Radius of the earth in km
|
|
|
|
for (let j = 0; j < 9; j++) { |
|
|
|
// const dLat = coordlat - centerLatRad;
|
|
|
|
// buffer += 2000;
|
|
|
|
// const dLon = coordlng - centerLngRad;
|
|
|
|
buffer += 1000; |
|
|
|
// const a =
|
|
|
|
buffer2 = 0; |
|
|
|
// Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
|
|
|
const coord = new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
// Math.sin(dLon / 2) *
|
|
|
|
position, |
|
|
|
// Math.sin(dLon / 2) *
|
|
|
|
angle, |
|
|
|
// Math.cos(centerLatRad) *
|
|
|
|
buffer |
|
|
|
// Math.cos(coordlat);
|
|
|
|
); |
|
|
|
// const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
|
|
|
for (let k = 0; k < 9; k++) { |
|
|
|
// const distance = R * c; // Distance in km
|
|
|
|
//EPSG3857.getDestinationCoord
|
|
|
|
|
|
|
|
//지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환
|
|
|
|
// if (distance <= radius) {
|
|
|
|
const po = coord; |
|
|
|
// incoords.push(coord);
|
|
|
|
if (l == 0) angle2 = 0; |
|
|
|
// }
|
|
|
|
buffer2 += 1000; |
|
|
|
// });
|
|
|
|
const coord2 = new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
// setCoordValue(incoords);
|
|
|
|
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) return; |
|
|
|
if (idx === 0) return; |
|
|
|
|
|
|
|
|
|
|
@ -389,6 +360,7 @@ export const NaverCustomMap = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const NS = new naver.maps.Polyline({ |
|
|
|
const NS = new naver.maps.Polyline({ |
|
|
|
path: [ |
|
|
|
path: [ |
|
|
|
new naver.maps.EPSG3857.getDestinationCoord(position, 0, radius), |
|
|
|
new naver.maps.EPSG3857.getDestinationCoord(position, 0, radius), |
|
|
|