|
|
@ -1,27 +1,21 @@ |
|
|
|
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); |
|
|
|
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: '김포공항', |
|
|
@ -49,6 +43,8 @@ export const NaverCustomMap = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
]; |
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [squarePaths, setSquarePaths] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
const uamPosition = [ |
|
|
|
const uamPosition = [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
name: 'V1', |
|
|
|
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(() => { |
|
|
|
useEffect(() => { |
|
|
|
NaverMapInit(); |
|
|
|
NaverMapInit(); |
|
|
|
// airPort?.map(air => polyArea(air));
|
|
|
|
|
|
|
|
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));
|
|
|
|
const arr = []; |
|
|
|
airPort?.map((air, idx) => { |
|
|
|
for (let i = 0; i < 300; i++) { |
|
|
|
gridgrid(air, idx); |
|
|
|
const coord = new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
}); |
|
|
|
new naver.maps.LatLng(37.558522, 126.793722), |
|
|
|
gimPofeatures.map(air => { |
|
|
|
i, |
|
|
|
coords.push({ |
|
|
|
9300 |
|
|
|
lat: |
|
|
|
); |
|
|
|
(Math.max( |
|
|
|
// console.log(coord, '>>>>>>');
|
|
|
|
air.geometry.coordinates[0][0][1], |
|
|
|
arr.push(coord); |
|
|
|
air.geometry.coordinates[0][1][1], |
|
|
|
} |
|
|
|
air.geometry.coordinates[0][2][1], |
|
|
|
// console.log(arr, '>>>>');
|
|
|
|
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(() => { |
|
|
|
uamPosition.map(uam => { |
|
|
|
uamPosition.map(uam => { |
|
|
|
const name = uam.name; |
|
|
|
const name = uam.name; |
|
|
|
const position = new naver.maps.LatLng(uam.lat, uam.lon); |
|
|
|
const position = new naver.maps.LatLng(uam.lat, uam.lon); |
|
|
|
|
|
|
|
|
|
|
|
const cont = |
|
|
|
const cont = |
|
|
|
name.substr(0, 1) == 'R' |
|
|
|
name.substr(0, 1) == 'R' |
|
|
|
? [ |
|
|
|
? [ |
|
|
@ -162,7 +184,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: { |
|
|
@ -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 NaverMapInit = () => { |
|
|
|
const mapOptions = { |
|
|
|
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),
|
|
|
|
// center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
|
|
|
|
// zoom: 10,
|
|
|
|
// zoom: 10,
|
|
|
|
zoom: 14, |
|
|
|
zoom: 12, |
|
|
|
zoomControl: true, |
|
|
|
zoomControl: true, |
|
|
|
mapTypeId: naver.maps.MapTypeId.NORMAR, |
|
|
|
mapTypeId: naver.maps.MapTypeId.NORMAR, |
|
|
|
zoomControlOptions: { |
|
|
|
zoomControlOptions: { |
|
|
@ -214,210 +255,247 @@ export const NaverCustomMap = () => { |
|
|
|
setMapObject(new naver.maps.Map('map', mapOptions)); |
|
|
|
setMapObject(new naver.maps.Map('map', mapOptions)); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const createUamArea = uam => { |
|
|
|
const handleHistoryInit = line => { |
|
|
|
const title = uam.title; |
|
|
|
setArrPolyline([...arrPolyline, line]); |
|
|
|
const position = new naver.maps.LatLng(uam.lat, uam.lon); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//비행 공역 밖에 있는 값인지 확인하는 코드(추후 사용 할 수 있을 것 같아서 주석 걸어둠)
|
|
|
|
|
|
|
|
// 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({ |
|
|
|
const polyArea = (air, idx) => { |
|
|
|
strokeColor: '#283046', |
|
|
|
if (idx === 0) return; |
|
|
|
strokeOpacity: 1, |
|
|
|
|
|
|
|
fillColor: '#7367F0', |
|
|
|
const polyArr = []; |
|
|
|
fillOpacity: 0.1, |
|
|
|
const radius = air.buffer; |
|
|
|
center: position, |
|
|
|
const position = air.center; //공역 센터
|
|
|
|
// map: mapObject,
|
|
|
|
const color = '#000'; |
|
|
|
radius: 100, |
|
|
|
const opacity = 0.7; |
|
|
|
clickable: true |
|
|
|
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 => { |
|
|
|
const gridgrid = (air, idx) => { |
|
|
|
setArrPolyline([...arrPolyline, line]); |
|
|
|
if (idx !== 0) return; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const airlist = (air, idx) => { |
|
|
|
const realCenter = air.center; |
|
|
|
if (idx == 0) { |
|
|
|
new naver.maps.Marker({ |
|
|
|
const radius = air.buffer; |
|
|
|
position: realCenter, |
|
|
|
const position = air.center; //공역 센터
|
|
|
|
map: mapObject |
|
|
|
const coords = []; |
|
|
|
}); |
|
|
|
// console.log('>>', position);
|
|
|
|
|
|
|
|
let angle2 = 0; |
|
|
|
let westEastAngle = 270; |
|
|
|
let buffer2 = 0; |
|
|
|
for (let we = 0; we < 2; we++) { |
|
|
|
let angle = 0; |
|
|
|
if (we === 1) westEastAngle = 90; |
|
|
|
for (let l = 0; l < 4; l++) { |
|
|
|
let westEastBuffer = 0; |
|
|
|
angle2 += 90; |
|
|
|
for (let westEast = 0; westEast < 10; westEast++) { |
|
|
|
for (let i = 0; i < 1; i++) { |
|
|
|
westEastBuffer += 1000; |
|
|
|
angle += 90; |
|
|
|
const coord = new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
let buffer = 0; |
|
|
|
realCenter, |
|
|
|
// for (let j = 0; j < 4; j++) {
|
|
|
|
westEastAngle, |
|
|
|
for (let j = 0; j < 9; j++) { |
|
|
|
westEastBuffer |
|
|
|
// buffer += 2000;
|
|
|
|
); |
|
|
|
buffer += 1000; |
|
|
|
|
|
|
|
buffer2 = 0; |
|
|
|
let northSouthCoord = coord; |
|
|
|
const coord = new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
let notIncludes = 10; |
|
|
|
position, |
|
|
|
if (westEast === 3 || westEast === 4) { |
|
|
|
angle, |
|
|
|
notIncludes = 9; |
|
|
|
buffer |
|
|
|
} else if (westEast === 5 || westEast === 6) { |
|
|
|
); |
|
|
|
notIncludes = 8; |
|
|
|
for (let k = 0; k < 9; k++) { |
|
|
|
} else if (westEast === 7) { |
|
|
|
//EPSG3857.getDestinationCoord
|
|
|
|
notIncludes = 7; |
|
|
|
//지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환
|
|
|
|
} else if (westEast === 8) { |
|
|
|
const po = coord; |
|
|
|
notIncludes = 5; |
|
|
|
if (l == 0) angle2 = 0; |
|
|
|
} else if (westEast === 9) { |
|
|
|
buffer2 += 1000; |
|
|
|
notIncludes = 3; |
|
|
|
const coord2 = new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
|
|
|
|
po, |
|
|
|
|
|
|
|
angle2, |
|
|
|
|
|
|
|
buffer2 |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
// console.log('coord>>>>>', coord2);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
coords.push(coord2); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
coords.push(coord); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const incoords = []; |
|
|
|
for (let ns = 0; ns < 2; ns++) { |
|
|
|
coords.map(coord => { |
|
|
|
getNorthSouth(northSouthCoord, notIncludes, we, ns); |
|
|
|
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) => { |
|
|
|
|
|
|
|
if (idx == 0) { |
|
|
|
const getNorthSouth = (northSouthCoord, notIncludes, weType, nsType) => { |
|
|
|
const polyArr = []; |
|
|
|
for (let i = 0; i < notIncludes; i++) { |
|
|
|
const radius = air.buffer; |
|
|
|
getSquare(northSouthCoord, weType, nsType); |
|
|
|
const position = air.center; //공역 센터
|
|
|
|
|
|
|
|
const color = '#000'; |
|
|
|
const angle = nsType === 0 ? 0 : 180; |
|
|
|
const opacity = 0.7; |
|
|
|
northSouthCoord = new naver.maps.EPSG3857.getDestinationCoord( |
|
|
|
const coords = []; |
|
|
|
northSouthCoord, |
|
|
|
|
|
|
|
angle, |
|
|
|
let angle = 0; |
|
|
|
1000 |
|
|
|
for (let i = 0; i < 4; i++) { |
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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; |
|
|
|
angle += 90; |
|
|
|
let buffer = 0; |
|
|
|
} else if (weType === 1) { |
|
|
|
// for (let j = 0; j < 4; j++) {
|
|
|
|
angle -= 90; |
|
|
|
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({ |
|
|
|
square.push(tt); |
|
|
|
path: [ |
|
|
|
} |
|
|
|
new naver.maps.EPSG3857.getDestinationCoord(position, 0, radius), |
|
|
|
const polygon = new naver.maps.Polygon({ |
|
|
|
new naver.maps.EPSG3857.getDestinationCoord(position, 180, radius) |
|
|
|
strokeColor: '#283046', |
|
|
|
], |
|
|
|
strokeOpacity: 0.5, |
|
|
|
strokeWeight: 0.8, |
|
|
|
// fillColor: '#7367F0',
|
|
|
|
strokeOpacity: opacity, |
|
|
|
fillOpacity: 0.1, |
|
|
|
strokeColor: color |
|
|
|
paths: square, |
|
|
|
// map: props.map
|
|
|
|
map: mapObject |
|
|
|
}); |
|
|
|
}); |
|
|
|
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 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 ( |
|
|
|
return ( |
|
|
|