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

화면 공역 재작업

pull/2/head
sanguu516(박상현) 1 year ago
parent
d577f38a0e
commit
4ed385d2a0
5 changed files with 9076 additions and 2139 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. 1769
      src/components/map/geojson/airArea.json
  2. 7661
      src/components/map/geojson/airAreaCopy.json
  3. 1581
      src/components/map/geojson/airportAirArea.json
  4. 192
      src/components/map/naver/NaverMap.js
  5. 12
      src/components/map/naver/feature/FeatureAirZone.js

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

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

File diff suppressed because it is too large Load Diff

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

@ -15,7 +15,7 @@ export const NaverCustomMap = () => {
const [arrPolyline, setArrPolyline] = useState([]);
const [poly, setPoly] = useState([]);
const [coordValue, setCoordValue] = useState([]);
const [coordCenter, setCoordCenter] = useState([]);
const airPort = [
{
title: '김포공항',
@ -45,8 +45,6 @@ export const NaverCustomMap = () => {
const [squarePaths, setSquarePaths] = useState([]);
const [jsonFormat, setJsonFormat] = useState([]);
const uamPosition = [
{
name: 'V1',
@ -124,14 +122,46 @@ export const NaverCustomMap = () => {
let airArea = geoJson.features;
let gimPofeatures = gimPo.features;
let features = airArea.concat(gimPofeatures);
// console.log(features);
const coords = [];
useEffect(() => {
NaverMapInit();
airPort?.map((air, idx) => polyArea(air, idx));
// airPort?.map((air, idx) => airlist(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(() => {
@ -162,36 +192,22 @@ export const NaverCustomMap = () => {
});
});
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)
// }
// });
// });
// if (mapObject) {
// airPort?.map((air, idx) => gridgrid(air, idx));
// }
}, [mapObject, coordValue]);
coordCenter.map((val, idx) => {
const position = new naver.maps.LatLng(val.lat, val.lng);
const cont = `<div style=font-size:15px;color:#000000;padding-top:5px;padding-left:8px ">${val.airspace}</div>`;
const marker = new naver.maps.Marker({
position: position,
map: mapObject,
icon: {
content: [cont].join(''),
anchor: new naver.maps.Point(20, 20)
}
});
});
}, [mapObject, coordCenter]);
// useEffect(() => {
// if (squarePaths.length > 315) {
// // console.log(squarePaths, '>>>>');
// const arr = [];
// squarePaths.map((path, idx) => {
// const obj = {
@ -234,83 +250,38 @@ export const NaverCustomMap = () => {
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 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 polyArea = (air, idx) => {
if (idx === 0) return;
@ -389,6 +360,7 @@ export const NaverCustomMap = () => {
}
}
}
const NS = new naver.maps.Polyline({
path: [
new naver.maps.EPSG3857.getDestinationCoord(position, 0, radius),

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
};
});

Write Preview
Loading…
Cancel
Save