pav
/
pav-home
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

김포공항 사각공역 생성

ctrlGrid
이준희 1 year ago
parent
00b571b854
commit
e832f77d8a
3 changed files with 6147 additions and 155 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. 20
      src/components/map/geojson/airArea.json
  2. 6009
      src/components/map/geojson/airportAirArea.json
  3. 273
      src/components/map/naver/NaverMap.js

20
src/components/map/geojson/airArea.json
Unescape View File

@ -7656,26 +7656,6 @@
"description": "인천공항 비행불가",
"type": "0001"
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[126.78239009643008, 37.55852145849355, 0],
[126.78239009643008, 37.56750461133475, 0],
[126.79372336640101, 37.56750406965258, 0],
[126.79372336640101, 37.55852091681139, 0]
]
]
},
"properties": {
"name": "sdfsdfsdfsdf",
"description": "sdfssdfsdfsdfdf",
"type": "0006"
}
}
]
}

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

File diff suppressed because it is too large Load Diff

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

@ -1,20 +1,14 @@
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);
@ -51,6 +45,8 @@ export const NaverCustomMap = () => {
const [squarePaths, setSquarePaths] = useState([]);
const [jsonFormat, setJsonFormat] = useState([]);
const uamPosition = [
{
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(() => {
NaverMapInit();
// airPort?.map(air => polyArea(air));
airPort?.map((air, idx) => polyArea(air, idx));
airPort?.map(air => polyArea(air));
// 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
// );
// arr.push(coord);
// }
// airPort?.map((air, idx) => polyArea(air, idx));
}, []);
useEffect(() => {
@ -162,7 +152,7 @@ export const NaverCustomMap = () => {
'</div>'
];
const marker = new naver.maps.Marker({
new naver.maps.Marker({
position: position,
map: mapObject,
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]);
useEffect(() => {
if (squarePaths.length > 315) {
console.log(squarePaths, '>>>>');
}
}, [squarePaths]);
// useEffect(() => {
// if (squarePaths.length > 315) {
// // console.log(squarePaths, '>>>>');
// 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 NaverMapInit = () => {
const mapOptions = {
center: new naver.maps.LatLng(37.520357, 126.610166),
@ -303,110 +312,107 @@ export const NaverCustomMap = () => {
}
};
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 = [];
if (idx === 0) return;
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 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);
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) => {
@ -504,11 +510,8 @@ export const NaverCustomMap = () => {
const arr = [];
path.map(tt => {
const latlng = {
x: tt.lng(),
y: tt.lat()
};
arr.push(latlng);
const latlngJson = [tt.lng(), tt.lat(), 0];
arr.push(latlngJson);
});
setSquarePaths(prev => [...prev, arr]);
};

Write Preview
Loading…
Cancel
Save