diff --git a/src/components/map/naver/NaverMap.js b/src/components/map/naver/NaverMap.js
index 4fb47ae..134d781 100644
--- a/src/components/map/naver/NaverMap.js
+++ b/src/components/map/naver/NaverMap.js
@@ -11,7 +11,6 @@ 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();
@@ -21,7 +20,7 @@ export const NaverCustomMap = () => {
const [arrPolyline, setArrPolyline] = useState([]);
const [poly, setPoly] = useState([]);
-
+ const [coordValue, setCoordValue] = useState([]);
const airPort = [
{
title: '김포공항',
@@ -129,6 +128,19 @@ export const NaverCustomMap = () => {
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, '>>>>');
}, []);
useEffect(() => {
@@ -158,8 +170,31 @@ export const NaverCustomMap = () => {
}
});
});
- }, [mapObject]);
+ 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 = `
${idx}번
`;
+ 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),
@@ -200,104 +235,188 @@ export const NaverCustomMap = () => {
setArrPolyline([...arrPolyline, line]);
};
- const polyArea = (air, idx) => {
- //격자 공역
- const polyArr = [];
- const radius = air.buffer;
- const position = air.center; //공역 센터
- const color = '#000';
- const opacity = 0.7;
-
- 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
- );
-
- 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 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 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);
+ };
+ 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++) {
+ 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]);
- setPoly(m => [...m, polyArr]);
+ // console.log(idx);
+ }
+ //격자 공역
};
return (
@@ -312,8 +431,6 @@ export const NaverCustomMap = () => {
-
-
{/*