pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://gitea.palntour.com/pav/pav-home

pull/2/head
이준희 1 year ago
parent
1c9cc24468 b28040e93a
commit
3b463398c9
7 changed files with 14882 additions and 1645 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 67
      src/components/basis/flight/plan/FlightPlanAreaMap.js
  2. 1769
      src/components/map/geojson/airArea.json
  3. 7661
      src/components/map/geojson/airAreaCopy.json
  4. 6450
      src/components/map/geojson/airportAirArea.json
  5. 562
      src/components/map/naver/NaverMap.js
  6. 12
      src/components/map/naver/feature/FeatureAirZone.js
  7. 6
      src/views/control/main/ControlMain.js

67
src/components/basis/flight/plan/FlightPlanAreaMap.js
Unescape View File

@ -24,7 +24,7 @@ import {
} from '../../../../modules/basis/flight/actions/basisFlightAction';
import { flightPlanAPI } from '../../../../modules/basis/flight/apis/basisFlightApi';
import { WeatherContainer } from '../../../../containers/basis/flight/plan/WeatherContainer';
import gimpo from '../../../map/geojson/airportAirArea.json';
const FlightPlanAreaMap = props => {
const dispatch = useDispatch();
const naver = window.naver;
@ -49,8 +49,50 @@ const FlightPlanAreaMap = props => {
const [number, setNumber] = useState(0);
const [formModal, setFormModal] = useState(false);
const [coordCenter, setCoordCenter] = useState([]); // 격자 센터값
let gimPofeatures = gimpo.features;
useEffect(() => {
NaverMapInit();
const coords = [];
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);
return () => {
dispatch(AREA_DETAIL_INIT());
};
@ -64,6 +106,25 @@ const FlightPlanAreaMap = props => {
setIsMapLoad(true);
}, [airArea]);
useEffect(() => {
coordCenter.map((val, idx) => {
const position = new naver.maps.LatLng(
val.lat.toFixed(6),
val.lng.toFixed(6)
);
const marker = new naver.maps.Marker({
position: position,
map: map,
icon: {
content: `<div style="color:#000000;font-size:10px;">${val.airspace}</div>`,
size: new naver.maps.Size(0, 0),
origin: new naver.maps.Point(0, 0),
anchor: new naver.maps.Point(7, 5),
align: 'center'
}
});
});
}, [coordCenter]);
useEffect(() => {
ModeInit();
}, [mapControl.drawType]);
@ -118,8 +179,8 @@ const FlightPlanAreaMap = props => {
}
const mapOptions = {
// center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
center: new naver.maps.LatLng(37.520357, 126.610166),
zoom: !areaCoordList ? 14 : bufferzoom.bufferzoom,
center: new naver.maps.LatLng(37.558522, 126.793722),
zoom: !areaCoordList ? 11 : bufferzoom.bufferzoom,
zoomControl: true,
mapTypeId: naver.maps.MapTypeId.NORMAL,
zoomControlOptions: {

1769
src/components/map/geojson/airArea.json
View File

File diff suppressed because it is too large Load Diff

7661
src/components/map/geojson/airAreaCopy.json
View File

File diff suppressed because it is too large Load Diff

6450
src/components/map/geojson/airportAirArea.json
View File

File diff suppressed because it is too large Load Diff

562
src/components/map/naver/NaverMap.js
Unescape View File

@ -1,27 +1,21 @@
import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { DronMarker } from './dron/DronMarker';
import { DronHistory } from './dron/DronHistory';
import NaverMapControl from './NaverMapControl';
import { NaverMapSearch } from './search/NaverMapSearch';
import { FeatureAirZone } from './feature/FeatureAirZone';
import geoJson from '../geojson/airArea.json';
import DronPlan from './dron/DronPlan';
import gimPo from '../geojson/airportAirArea.json';
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();
const naver = window.naver;
const [mapObject, setMapObject] = useState(null);
const [arrPolyline, setArrPolyline] = useState([]);
const [poly, setPoly] = useState([]);
const [coordValue, setCoordValue] = useState([]);
const [coordCenter, setCoordCenter] = useState([]);
const airPort = [
{
title: '김포공항',
@ -49,6 +43,8 @@ export const NaverCustomMap = () => {
}
];
const [squarePaths, setSquarePaths] = useState([]);
const uamPosition = [
{
name: 'V1',
@ -123,32 +119,58 @@ export const NaverCustomMap = () => {
}
];
let features = geoJson.features;
let airArea = geoJson.features;
let gimPofeatures = gimPo.features;
let features = airArea.concat(gimPofeatures);
const coords = [];
useEffect(() => {
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, '>>>>');
// airPort?.map((air, idx) => airlist(air, idx));
// airPort?.map((air, idx) => polyArea(air, idx));
airPort?.map((air, idx) => {
gridgrid(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(() => {
uamPosition.map(uam => {
const name = uam.name;
const position = new naver.maps.LatLng(uam.lat, uam.lon);
const cont =
name.substr(0, 1) == 'R'
? [
@ -162,7 +184,7 @@ export const NaverCustomMap = () => {
'</div>'
];
const marker = new naver.maps.Marker({
new naver.maps.Marker({
position: position,
map: mapObject,
icon: {
@ -171,37 +193,56 @@ export const NaverCustomMap = () => {
}
});
});
// coordCenter = new nl();
coordCenter.map((val, idx) => {
const position = new naver.maps.LatLng(
val.lat.toFixed(6),
val.lng.toFixed(6)
);
// const cont = `<div style=font-size:5px;color:#000000; text-align:center">${val.airspace}</div>`;
const marker = new naver.maps.Marker({
position: position,
map: mapObject,
icon: {
content: `<div style="color:#000000;font-size:5px;">${val.airspace}</div>`,
size: new naver.maps.Size(0, 0),
origin: new naver.maps.Point(0, 0),
anchor: new naver.maps.Point(5, 5),
align: 'center'
}
});
});
}, [mapObject, coordCenter]);
// useEffect(() => {
// if (squarePaths.length > 315) {
// const arr = [];
// 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 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 mapOptions = {
center: new naver.maps.LatLng(37.520357, 126.610166),
center: new naver.maps.LatLng(37.558522, 126.793722),
// center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
// zoom: 10,
zoom: 14,
zoom: 12,
zoomControl: true,
mapTypeId: naver.maps.MapTypeId.NORMAR,
zoomControlOptions: {
@ -214,210 +255,247 @@ export const NaverCustomMap = () => {
setMapObject(new naver.maps.Map('map', mapOptions));
};
const createUamArea = uam => {
const title = uam.title;
const position = new naver.maps.LatLng(uam.lat, uam.lon);
const handleHistoryInit = line => {
setArrPolyline([...arrPolyline, line]);
};
//비행 공역 밖에 있는 값인지 확인하는 코드(추후 사용 할 수 있을 것 같아서 주석 걸어둠)
// 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;
// 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 circle = new naver.maps.Circle({
strokeColor: '#283046',
strokeOpacity: 1,
fillColor: '#7367F0',
fillOpacity: 0.1,
center: position,
// map: mapObject,
radius: 100,
clickable: true
const polyArea = (air, idx) => {
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;
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);
// circle.setMap(mapObject);
setPoly(m => [...m, polyArr]);
};
const handleHistoryInit = line => {
setArrPolyline([...arrPolyline, line]);
};
const gridgrid = (air, idx) => {
if (idx !== 0) return;
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 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;
}
}
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);
for (let ns = 0; ns < 2; ns++) {
getNorthSouth(northSouthCoord, notIncludes, we, ns);
}
});
setCoordValue(incoords);
}
}
};
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++) {
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;
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);
}
}
} else if (weType === 1) {
angle -= 90;
}
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);
square.push(tt);
}
const polygon = new naver.maps.Polygon({
strokeColor: '#283046',
strokeOpacity: 0.5,
// fillColor: '#7367F0',
fillOpacity: 0.1,
paths: square,
map: mapObject
});
setPoly(m => [...m, polyArr]);
const path = polygon.getPath()._array;
// console.log(idx);
}
//격자 공역
const arr = [];
path.map(tt => {
const latlngJson = [tt.lng(), tt.lat(), 0];
arr.push(latlngJson);
});
arr.push([path[0].lng(), path[0].lat(), 0]);
setSquarePaths(prev => [...prev, arr]);
};
return (

12
src/components/map/naver/feature/FeatureAirZone.js
Unescape View File

@ -96,9 +96,10 @@ export const FeatureAirZone = props => {
//0004 비행장(군사) #A16B00
//0005 이착륙장(RC비행장) #AB40FF
//0006 초경량비행장치 #009cad
// 공역 색상 변경
const type = feature.getProperty('type');
const name = feature.getProperty('name');
if (type === '0001') {
color = '#FF3648';
} else if (type === '0002') {
@ -109,14 +110,17 @@ export const FeatureAirZone = props => {
color = '#A16B00';
} else if (type === '0005') {
color = '#AB40FF';
} else if (type === '0006') {
} else if (type === '0006' && name != '김포공항') {
color = '#009cad';
} else if (name === '김포공항') {
color = '#020715';
}
return {
fillColor: color,
fillColor: name === '김포공항' ? '#ffffff' : color,
opercity: name === '김포공항' ? 0 : 1,
strokeColor: color,
strokeWeight: 0.7,
strokeWeight: name === '김포공항' ? 1 : 0.7,
icon: null
};
});

6
src/views/control/main/ControlMain.js
Unescape View File

@ -134,8 +134,8 @@ const ControlMain = () => {
};
//날씨 API
const rq = {
nx: 37.4562557,
ny: 126.7052062
nx: 37.558522,
ny: 126.793722
};
useEffect(() => {
dispatch(controlweatherAction.request(rq));
@ -232,7 +232,7 @@ const ControlMain = () => {
<div className='data-box-header'>
<span className='box-ti'>
{!isClickObject
? '인천광역시'
? '김포공항'
: !controlDetail?.stAreaNm
? `${controlDetail?.res.area1} ${controlDetail?.res.area2} ${controlDetail?.res.area3} ${controlDetail?.res.landNm} ${controlDetail?.res.landNum} `
: controlDetail?.stAreaNm}

Write Preview
Loading…
Cancel
Save