diff --git a/package.json b/package.json
index b292c85..de9181f 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
"html-to-draftjs": "1.5.0",
"http-proxy-middleware": "^2.0.1",
"intl-messageformat": "7.8.4",
- "jquery": "3.5.1",
+ "jquery": "^3.5.1",
"js-cookie": "^3.0.0",
"jsonwebtoken": "8.5.1",
"jwt-decode": "^3.1.2",
diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index c6f1fbc..2f031fa 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -245,6 +245,11 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
/* fligth path draw */
.left-menu-nav li .check{background-color: #283046; font-size:0.9rem; color: white; width:70px; border: 0px;}
+.left-menu-nav.test{position: relative; z-index: 1; cursor: pointer; float: left; display: block; margin: 0px; padding: 0px; width: 28px; height: 28px; list-style: none; box-sizing: content-box !important; background: rgb(255, 255, 255);}
+.left-menu-nav .test .btn-stop{margin-left:25px; width: 28px; height: 28px; display: block; border: 0px solid transparent; box-sizing: content-box !important;}
+.left-menu-nav .test .btn-use{margin-left:20px; width: 35px; height: 35px; display: block; border: 0px solid transparent; box-sizing: content-box !important; background-color: #009cad;}
+
+/* .target2{position:absoulte; top:0; left:0; padding:5px; z-index:100;} */
/*메인-알림*/
.notice{width:650px;height:45px;overflow:hidden;position:absolute;left:50%;top:20px;transform: translate(-50%,0px);background:#283046;display:flex;font-size:0.9375rem;color:#f4f4f4;padding:0px 20px;border-radius:30px;}
diff --git a/src/components/mapDraw/naver/NaverMap.js b/src/components/mapDraw/naver/NaverMap.js
index 6b32d00..92e9f8c 100644
--- a/src/components/mapDraw/naver/NaverMap.js
+++ b/src/components/mapDraw/naver/NaverMap.js
@@ -9,10 +9,17 @@ import { NaverMapSearch } from './search/NaverMapSearch';
import { FeatureAirZone } from './feature/FeatureAirZone';
import { DrawPath } from './draw/DrawPath';
import { DrawMap } from './draw/DrawMap';
+import { DrawTest } from './draw/DrawTest';
+import { CircleTest } from './draw/CircleTest';
+import { DrawDistance } from './draw/DrawDistance';
+import { JQueryTest } from './draw/JQueryTest';
+import { DrawPolygon } from './draw/DrawPolygon';
import geoJson from '../geojson/airArea.json';
import SensorZone from "./sensor/SensorZone";
+import $ from 'jquery';
+
export const NaverCustomMap = () => {
const naver = window.naver;
// let map;
@@ -57,13 +64,30 @@ export const NaverCustomMap = () => {
return (
<>
-
+ 제이쿼리 테스트
+
+
+
+
+
{mapObject != null ? (
<>
+ {/* 첨에 만든 원형까지 되는 거
-
+ 그리기 도구 모음 불러오는 거
+ */}
+ {/* 업그레이드 된 그리기(circle 안됨)
+ */}
+ {/* 카카오API참고한 직선거리 이용한 원그리기(원 안됨)
+ */}
+ {/* 네이버 거리재기 + 면적재기
+ */}
+ {/* 네이버 면적재기(다각형)
+ */}
+
+
>
) : null}
diff --git a/src/components/mapDraw/naver/draw/CircleTest.js b/src/components/mapDraw/naver/draw/CircleTest.js
new file mode 100644
index 0000000..63a0fca
--- /dev/null
+++ b/src/components/mapDraw/naver/draw/CircleTest.js
@@ -0,0 +1,145 @@
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import {
+ drawTypeChangeAction
+} from '../../../../modules/control/map/actions/controlMapActions';
+
+export const CircleTest = props => {
+ const {naver} = props;
+ const {map} = props;
+ const {drawType} = useSelector(state => state.controlMapReducer);
+
+ let drawingFlag = false;
+ let centerPosition;
+ let drawingCircle;
+ let drawingLine;
+
+ naver.maps.Event.addListener(map, 'click', function(e) {
+ if(!drawingFlag) {
+ drawingFlag = true;
+
+ // 원이 그려질 중심좌표를 클릭한 위치로 설정합니다
+ centerPosition = e.coord;
+ console.log(centerPosition)
+
+ // 그려지고 있는 원의 반경을 표시할 선 객체를 생성합니다
+ if (!drawingLine) {
+ drawingLine = new naver.maps.Polyline({
+ strokeWeight: 3, // 선의 두께입니다
+ strokeColor: '#00a0e9', // 선의 색깔입니다
+ strokeOpacity: 1 // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
+ // strokeStyle: 'solid' // 선의 스타일입니다
+ });
+ }
+
+ // 그려지고 있는 원을 표시할 원 객체를 생성합니다
+ if (!drawingCircle) {
+ drawingCircle = new naver.maps.Circle({
+ strokeColor: '#283046',
+ strokeWeight: 2,
+ strokeOpacity: 0.8,
+ fillColor: '#0000ff',
+ fillOpacity: 0.2,
+ });
+ }
+
+ }
+ });
+
+ // 지도에 마우스무브 이벤트를 등록합니다
+// 원을 그리고있는 상태에서 마우스무브 이벤트가 발생하면 그려질 원의 위치와 반경정보를 동적으로 보여주도록 합니다
+ naver.maps.Event.addListener(map, 'mousemove', function(e) {
+ // 마우스무브 이벤트가 발생했을 때 원을 그리고있는 상태이면
+ if (drawingFlag) {
+ // 마우스 커서의 현재 위치를 얻어옵니다
+ var mousePosition = e.coord;
+ // 그려지고 있는 선을 표시할 좌표 배열입니다. 클릭한 중심좌표와 마우스커서의 위치로 설정합니다
+ var linePath = [centerPosition, mousePosition];
+ // 그려지고 있는 선을 표시할 선 객체에 좌표 배열을 설정합니다
+ drawingLine.setPath([centerPosition, mousePosition]);
+
+ // 원의 반지름을 선 객체를 이용해서 얻어옵니다
+ var length = drawingLine.getDistance();
+ if(length > 0) {
+
+ // 그려지고 있는 원의 중심좌표와 반지름입니다
+ var circleOptions = {
+ center : centerPosition,
+ radius: length,
+ };
+
+ // 그려지고 있는 원의 옵션을 설정합니다
+ drawingCircle.setOptions(circleOptions);
+
+
+ // 그려지고 있는 원을 지도에 표시합니다
+ drawingCircle.setMap(map);
+
+ // 그려지고 있는 선을 지도에 표시합니다
+ drawingLine.setMap(map);
+
+
+ } else {
+
+ drawingCircle.setMap(null);
+ drawingLine.setMap(null);
+
+ }
+ }
+ });
+
+ // 지도에 마우스 오른쪽 클릭이벤트를 등록합니다
+// 원을 그리고있는 상태에서 마우스 오른쪽 클릭 이벤트가 발생하면
+// 마우스 오른쪽 클릭한 위치를 기준으로 원과 원의 반경정보를 표시하는 선과 커스텀 오버레이를 표시하고 그리기를 종료합니다
+naver.maps.Event.addListener(map, 'rightclick', function(e) {
+
+ if (drawingFlag) {
+
+ // 마우스로 오른쪽 클릭한 위치입니다
+ var rClickPosition = e.coord;
+
+ // 원의 반경을 표시할 선 객체를 생성합니다
+ var polyline = new naver.maps.Polyline({
+ path: [centerPosition, rClickPosition], // 선을 구성하는 좌표 배열입니다. 원의 중심좌표와 클릭한 위치로 설정합니다
+ strokeWeight: 3, // 선의 두께 입니다
+ strokeColor: '#00a0e9', // 선의 색깔입니다
+ strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
+ strokeStyle: 'solid' // 선의 스타일입니다
+ });
+
+ // 원 객체를 생성합니다
+ let r = polyline.getDistance();
+ var circle = new naver.maps.Circle({
+ center : centerPosition, // 원의 중심좌표입니다
+ radius: r, // 원의 반지름입니다 m 단위 이며 선 객체를 이용해서 얻어옵니다
+ strokeWeight: 1, // 선의 두께입니다
+ strokeColor: '#00a0e9', // 선의 색깔입니다
+ strokeOpacity: 0.1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
+ strokeStyle: 'solid', // 선의 스타일입니다
+ fillColor: '#00a0e9', // 채우기 색깔입니다
+ fillOpacity: 0.5 // 채우기 불투명도입니다
+ });
+
+ // 원을 지도에 표시합니다
+ circle.setMap(map);
+
+ // 선을 지도에 표시합니다
+ polyline.setMap(map);
+
+ // 그리기 상태를 그리고 있지 않는 상태로 바꿉니다
+ drawingFlag = false;
+
+ // 중심 좌표를 초기화 합니다
+ centerPosition = null;
+
+ // 그려지고 있는 원, 선, 커스텀오버레이를 지도에서 제거합니다
+ drawingCircle.setMap(null);
+ drawingLine.setMap(null);
+ }
+});
+
+
+
+ return null;
+};
+
diff --git a/src/components/mapDraw/naver/draw/DrawDistance.js b/src/components/mapDraw/naver/draw/DrawDistance.js
new file mode 100644
index 0000000..3eacda0
--- /dev/null
+++ b/src/components/mapDraw/naver/draw/DrawDistance.js
@@ -0,0 +1,186 @@
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import {
+ drawTypeChangeAction
+} from '../../../../modules/control/map/actions/controlMapActions';
+
+export const DrawDistance = props => {
+ const {naver} = props;
+ const {map} = props;
+ const {drawType} = useSelector(state => state.controlMapReducer);
+
+ let guideline;
+ let polyline;
+ let distanceListener;
+ let lastDistance;
+ let polygon;
+ let areaListener;
+
+ useEffect(() => {
+ init();
+ }, [drawType])
+
+ const init = () => {
+ if(drawType) {
+ if(drawType === 'LINE') {
+ startDistance();
+ } else if(drawType === 'POLYGON') {
+ startArea();
+ }
+ } else {
+ finishDistance();
+ }
+ };
+
+ const startDistance = () => {
+ var map1 = map;
+
+ distanceListener = [
+ naver.maps.Event.addListener(map, 'click', function(e) { onClickDistance(e); })
+ ];
+ }
+
+ const startArea = () => {
+ var map1 = map;
+
+ areaListener = [
+ naver.maps.Event.addListener(map, 'click', function(e) { onClickArea(e); }),
+ naver.maps.Event.addListener(map, 'rightclick', function(e) { finishArea(e); })
+ ];
+
+ naver.maps.Event.addListener(map, 'mousemove.measure', function(e) { onMouseMoveArea(e); })
+ };
+
+ const onClickDistance = (e) => {
+ var map2 = map,
+ coord = e.coord;
+
+ if(!polyline) {
+ guideline = new naver.maps.Polyline({
+ strokeColor: '#f00',
+ strokeWeight: 5,
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.6,
+ path: [coord],
+ map: map2
+ });
+
+ // naver.maps.addListener(map, 'mousemove', onMouseMoveDistance(e));
+ naver.maps.Event.addListener(map, 'mousemove', function(e) {
+ onMouseMoveDistance(e);
+ });
+ distanceListener.push(naver.maps.Event.addListener(map, 'rightclick', function(e) {
+ finishDistance(e);
+ }));
+
+ polyline = new naver.maps.Polyline({
+ strokeColor: '#f00',
+ strokeWeight: 5,
+ strokeOpacity: 0.8,
+ path: [coord],
+ map: map2
+ });
+
+ lastDistance = polyline.getDistance();
+ } else {
+ guideline.setPath([e.coord]);
+ polyline.getPath().push(coord);
+
+ var distance = polyline.getDistance();
+ //addMileStone(coord, fromMetersToText(distance - lastDistance));
+ lastDistance = distance;
+ }
+ }
+
+ const onClickArea = (e) => {
+ var map2 = map,
+ coord = e.coord;
+
+ if(!polygon) {
+ polygon = new naver.maps.Polygon({
+ strokeColor: '#f00',
+ strokeOpacity: 0.6,
+ strokeWeight: 5,
+ fillColor: '#00f',
+ fillOpacity: 0.3,
+ paths: [coord],
+ map: map2
+ });
+ } else {
+ polygon.getPath().push(coord);
+ }
+ };
+
+ const onMouseMoveDistance = (e) => {
+ var map3 = map,
+ proj = map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ path = guideline.getPath();
+
+ if(path.getLength() === 2) {
+ path.pop();
+ }
+
+ path.push(coord);
+ }
+
+ const onMouseMoveArea = (e) => {
+ if(!polygon) return;
+
+ var map3 = map,
+ proj = map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ path = polygon.getPath();
+
+ if(path.getLength() >= 2) {
+ path.pop();
+ }
+
+ path.push(coord);
+ }
+
+ const finishDistance = (e) => {
+ console.log('1')
+ naver.maps.Event.removeListener(distanceListener);
+ //delete distanceListener
+
+ if(guideline) {
+ guideline.setMap(null);
+ // delete this.guideline;
+ }
+
+ if(polyline) {
+ var path = polyline.getPath(),
+ lastCoord = path.getAt(path.getLength()-1),
+ distance = polyline.getDistance();
+
+ //delete polyline?
+
+ if(lastCoord) {
+ // console.log("lastcoord 있음")
+ }
+ }
+
+ //delete lastDistance;
+ // mode = null;
+ }
+
+ const finishArea = (e) => {
+ naver.maps.Event.removeListener(areaListener);
+ //delete areaListener
+
+ if(polygon) {
+ var path = polygon.getPath();
+ path.pop();
+
+ //delete polygon;
+ }
+ }
+
+
+
+
+
+ return null;
+};
+
diff --git a/src/components/mapDraw/naver/draw/DrawMap.js b/src/components/mapDraw/naver/draw/DrawMap.js
index 6b0ea4f..3e6b12e 100644
--- a/src/components/mapDraw/naver/draw/DrawMap.js
+++ b/src/components/mapDraw/naver/draw/DrawMap.js
@@ -1,38 +1,57 @@
import { useEffect, useState } from "react";
-import { render } from "react-dom";
-import { BiCaretLeftCircle } from "react-icons/bi";
import { useSelector } from "react-redux";
export const DrawMap = props => {
const {naver} = props;
const {map} = props;
- const [check, setCheck] = useState([]);
+ const [drawing, setDrawing] = useState();
+ const [overlay, setOverlay] = useState([]);
const {drawCheck} = useSelector(state => state.controlMapReducer);
+ useEffect(() => {
+ removeOverlay();
+ }, [overlay]);
useEffect(() => {
init();
}, [drawCheck]);
+
+ const removeOverlay = () => {
+ if(overlay.length >= 2) {
+ drawing.removeDrawing(overlay[0]);
+ setOverlay(prev => ([prev[overlay.length-1]]));
+ }
+ }
+
const init = () => {
- removeDraw();
+ initRemove();
+ removeDrawManager();
}
- const removeDraw = () => {
- check.forEach(prev => prev.setMap(null));
- drawSetting();
+ const initRemove = () => {
+ if(overlay) {
+ overlay.forEach(prev => drawing.removeDrawing(prev));
+ setOverlay([]);
+ }
}
+ const removeDrawManager = () => {
+ if(drawing) {
+ drawing.setMap(null);
+ }
+ drawSetting();
+ }
const drawSetting = () => {
if(drawCheck) {
+ // debugger;
let drawingManager = new naver.maps.drawing.DrawingManager({
drawingControl: [
naver.maps.drawing.DrawingMode.POLYLINE,
naver.maps.drawing.DrawingMode.POLYGON,
- naver.maps.drawing.DrawingMode.ELLIPSE,
- naver.maps.drawing.DrawingMode.RECTANGLE
+ naver.maps.drawing.DrawingMode.ELLIPSE
],
drawingControlOptions: {
position: naver.maps.Position.LEFT_CENTER,
@@ -52,21 +71,15 @@ export const DrawMap = props => {
strokeWeight: 2,
}
},
- rectangleOptions: {
- fillColor: '#ff0000',
- fillOpacity: 0.3,
- strokeWeight: 2,
- strokeColor: '#ff0000'
- },
ellipseOptions: {
fillColor: '#ff25dc',
fillOpacity: 0.3,
strokeWeight: 2,
strokeColor: '#ff25dc'
},
- polylineOptions: { // 화살표 아이콘 계열 옵션은 무시됩니다.
+ polylineOptions: {
strokeColor: '#222',
- strokeWeight: 2
+ strokeWeight: 10
},
polygonOptions: {
fillColor: '#ffc300',
@@ -75,12 +88,28 @@ export const DrawMap = props => {
strokeColor:'#ffc300'
}
});
+
+ // console.log(drawingManager.)
+
+ addEvent(drawingManager);
drawingManager.setMap(map);
- setCheck(prev => ([...prev, drawingManager]));
+ setDrawing(drawingManager);
}
}
+ const addEvent = (drawingManager) => {
+ drawingManager.addListener('drawing_added', function(overlay) {
+ console.log(overlay)
+ if(overlay.OVERLAY_TYPE === 'Polygon') {
+ console.log(overlay.paths._array[0]._array)
+ } else if(overlay.OVERLAY_TYPE === 'Ellipse') {
+ console.log(overlay.bounds)
+ }
+ setOverlay(prev=> ([...prev, overlay]));
+ });
+ }
+
return null;
};
diff --git a/src/components/mapDraw/naver/draw/DrawPath.js b/src/components/mapDraw/naver/draw/DrawPath.js
index f8326ed..5cd123f 100644
--- a/src/components/mapDraw/naver/draw/DrawPath.js
+++ b/src/components/mapDraw/naver/draw/DrawPath.js
@@ -7,17 +7,13 @@ export const DrawPath = props => {
const {map} = props;
const {drawType} = useSelector(state => state.controlMapReducer);
- let linePath = ([]);
+ let linePaths = ([]);
let circleCenter = '';
const [eventGroup, setEventGroup] = useState([]);
const [polylines, setPolylines] = useState([]);
const [circleLayers, setCircleLayers] = useState([]);
- useEffect(() => {
- // drawSetting();
- }, []);
-
useEffect(() => {
init();
}, [drawType]);
@@ -34,29 +30,8 @@ export const DrawPath = props => {
removeLayers();
}
- const drawSetting = () => {
- const drawingManager = new naver.maps.drawing.DrawingManager({
- drawingControl: [
- naver.maps.drawing.DrawingMode.POLYLINE,
- naver.maps.drawing.DrawingMode.POLYGON,
- naver.maps.drawing.DrawingMode.ELLIPSE,
- naver.maps.drawing.DrawingMode.RECTANGLE
- ],
- drawingControlOptions: {
- position: naver.maps.Position.LEFT_CENTER,
- style: naver.maps.drawing.DrawingStyle.VERTICAL
- }
- });
- drawingManager.setMap(map);
- }
-
const removeEvent = () => {
eventGroup.forEach(prev => naver.maps.Event.removeListener(prev));
- // eventGroup.forEach(prev => console.log(prev));
- // const test = eventGroup.find(prev=> prev='drawingManager');
- // if(test) {
- // test.setMap(null);
- // }
setEventGroup([]);
addEvent();
}
@@ -64,40 +39,30 @@ export const DrawPath = props => {
const removeLayers = () => {
if(polylines) {
polylines.forEach(prev => prev.setMap(null));
- setPolylines([]);
};
if(circleLayers) {
circleLayers.forEach(prev => prev.setMap(null));
setCircleLayers([]);
};
- linePath = [];
- // circleCenter = '';
+ linePaths = [];
}
+
const addEvent = () => {
let addClick = naver.maps.Event.addListener(map, 'click', function(e) {
- // debugger;
+
if(drawType) {
- linePath.push(e.coord);
- circleCenter = e.coord;
+ if(drawType === 'CIRCLE') {
+ circleCenter = e.coord;
+ }else if(drawType === 'LINE') {
+ linePaths.push(e.coord);
+ }
startDraw();
} else {
- // console.log('1');
+
}
});
- // let escDown = naver.maps.Event.addListener(map, 'keydown', function(e) {
- // const keyboardEvent = e.keyboardEvent,
- // keyCode = keyboardEvent.keyCode || keyboardEvent.which;
-
- // const ESC = 27;
- // if(keyCode === ESC) {
- // keyboardEvent.preventDefault();
- // // removeLayers();
- // }
- // });
-
-
setEventGroup(prev => ([...prev, addClick]));
}
@@ -110,15 +75,15 @@ export const DrawPath = props => {
}
const createPolyline = () => {
- if(linePath.length >= 2) {
+ if(linePaths.length >= 2) {
const polyline = new naver.maps.Polyline({
- path: linePath,
+ path: linePaths,
strokeColor: '#ff0000',
strokeWeight: 2,
strokeOpacity: 0.5,
map: map
});
- linePath.shift();
+ linePaths.shift();
setPolylines(prev => ([...prev, polyline]));
}
}
@@ -127,15 +92,15 @@ export const DrawPath = props => {
const circle = new naver.maps.Circle({
center: circleCenter,
strokeColor: '#283046',
- strokeWeight: 1,
+ strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#0000ff',
fillOpacity: 0.2,
- radius: 150,
+ radius: 150, //단위 미터
clickable: false,
map: map
- });
- // circleCenter = '';
+ });
+ console.log(circle)
setCircleLayers(prev => ([...prev, circle]));
}
@@ -144,9 +109,6 @@ export const DrawPath = props => {
circleLayers[0].setMap(null);
setCircleLayers(prev => ([prev[circleLayers.length-1]]));
}
- // else {
- // console.log(circleLayers);
- // }
}
return null;
diff --git a/src/components/mapDraw/naver/draw/DrawPolygon.js b/src/components/mapDraw/naver/draw/DrawPolygon.js
new file mode 100644
index 0000000..9a83ad6
--- /dev/null
+++ b/src/components/mapDraw/naver/draw/DrawPolygon.js
@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+
+export const DrawPolygon = props => {
+ const {naver} = props;
+ const {map} = props;
+
+ let polygon;
+ let areaListener;
+
+ useEffect(() => {
+ startArea();
+ }, [])
+
+ const startArea = () => {
+ var map1 = map;
+
+ areaListener = [
+ naver.maps.Event.addListener(map, 'click', function(e) { onClickArea(e); }),
+ naver.maps.Event.addListener(map, 'rightclick', function(e) { finishArea(e); })
+ ];
+
+ naver.maps.Event.addListener(map, 'mousemove.measure', function(e) { onMouseMoveArea(e); })
+ };
+
+ const onClickArea = (e) => {
+ var map2 = map,
+ coord = e.coord;
+
+ if(!polygon) {
+ polygon = new naver.maps.Polygon({
+ strokeColor: '#f00',
+ strokeOpacity: 0.6,
+ strokeWeight: 5,
+ fillColor: '#00f',
+ fillOpacity: 0.3,
+ paths: [coord],
+ map: map2
+ });
+ } else {
+ polygon.getPath().push(coord);
+ }
+ };
+
+ const finishArea = (e) => {
+ naver.maps.Event.removeListener(areaListener);
+ //delete areaListener
+
+ if(polygon) {
+ var path = polygon.getPath();
+ path.pop();
+
+ //delete polygon;
+ }
+ }
+
+ const onMouseMoveArea = (e) => {
+ if(!polygon) return;
+
+ var map3 = map,
+ proj = map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ path = polygon.getPath();
+
+ if(path.getLength() >= 2) {
+ path.pop();
+ }
+
+ path.push(coord);
+ }
+
+
+
+ return null;
+};
+
diff --git a/src/components/mapDraw/naver/draw/DrawTest.js b/src/components/mapDraw/naver/draw/DrawTest.js
new file mode 100644
index 0000000..f5c5072
--- /dev/null
+++ b/src/components/mapDraw/naver/draw/DrawTest.js
@@ -0,0 +1,128 @@
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import {
+ drawTypeChangeAction
+} from '../../../../modules/control/map/actions/controlMapActions';
+
+export const DrawTest = props => {
+ const {naver} = props;
+ const {map} = props;
+ const {drawType} = useSelector(state => state.controlMapReducer);
+
+ var point = '';
+ var path = '';
+ var polygon = '';
+ var polyline = '';
+ var circle = '';
+
+ const [polylineLayers, setPolylineLayers] = useState([]);
+ const [polygonLayers, setPolygonLayers] = useState([]);
+ const [eventGroup, setEventGroup] = useState([]);
+
+ const [isRight, setIsRight] = useState(false);
+
+ useEffect(() => {
+ init();
+ }, [drawType, isRight]);
+
+
+ const init = () => {
+ removeLayers();
+ removeEvent();
+ drawInit();
+ addEvent();
+ }
+
+ //point -> right클릭, polygonLayers -> stop
+ const removeLayers = () => {
+ if(polygonLayers) {
+ polygonLayers.forEach(prev => prev.setMap(null));
+ polylineLayers.forEach(prev => prev.setMap(null));
+ point = '';
+ path = '';
+ polygon = '';
+ polyline = '';
+ }
+
+ if(point) {
+ polygon.setMap(null);
+ polyline.setMap(null);
+ point = '';
+ path = '';
+ polygon = '';
+ polyline = '';
+ }
+
+
+ }
+
+ const removeEvent = () => {
+ eventGroup.forEach(prev => naver.maps.Event.removeListener(prev));
+ setEventGroup([]);
+ }
+
+ const drawInit = () => {
+ polygon = new naver.maps.Polygon({
+ map: map,
+ paths: [[]],
+ fillColor: '#ff0000',
+ fillOpacity: 0.3,
+ strokeColor: '#ff0000',
+ strokeOpacity: 0.6,
+ strokeWeight: 3,
+ clickable: true
+ })
+
+ polyline = new naver.maps.Polyline({
+ map: map,
+ path: [],
+ strokeColor: '#5347AA',
+ strokeWeight: 2
+ });
+ }
+
+ const addEvent = () => {
+ let addClick = naver.maps.Event.addListener(map, 'click', function(e) {
+
+ if(drawType) {
+ point = e.coord;
+ if(drawType === 'CIRCLE') {
+ // path = circle.getCenter();
+
+ createCircle();
+
+ }else if(drawType === 'LINE') {
+ path = polyline.getPath();
+ setPolylineLayers(prev => ([...prev, polyline]));
+ path.push(point);
+ }else if(drawType === 'POLYGON') {
+ path = polygon.getPaths().getAt(0);
+ setPolygonLayers(prev => ([...prev, polygon]));
+ path.push(point);
+ // console.log(polygon.paths._array[0]._array)
+ }
+
+ } else {
+ // console.log("df")
+ }
+ });
+
+ let rightClick = naver.maps.Event.addListener(map, 'rightclick', function(e) {
+ if(drawType) {
+ setIsRight(!isRight);
+ }
+ })
+
+ setEventGroup(prev => ([...prev, addClick, rightClick]));
+ // setEventGroup(addClick, rightClick);
+ }
+
+ const createCircle = () => {
+
+ }
+
+
+
+ return null;
+};
+
diff --git a/src/components/mapDraw/naver/draw/JQueryTest.js b/src/components/mapDraw/naver/draw/JQueryTest.js
new file mode 100644
index 0000000..492c8de
--- /dev/null
+++ b/src/components/mapDraw/naver/draw/JQueryTest.js
@@ -0,0 +1,378 @@
+import { useEffect, useState } from "react";
+import $ from 'jquery';
+
+export const JQueryTest = props => {
+ const {naver} = props;
+ const {map} = props;
+
+
+ var Measure = function(buttons) {
+ this.$btnDistance = buttons.distance;
+ this.$btnArea = buttons.area;
+
+ this._mode = null;
+
+ this._bindDOMEvents();
+ };
+ $.extend(Measure.prototype, {
+ constructor: Measure,
+
+ setMap: function(map) {
+ if (this.map) {
+ this._unbindMap(this.map);
+ }
+
+ this.map = map;
+
+ if (map) {
+ this._bindMap(map);
+ }
+ },
+
+ startMode: function(mode) {
+ if (!mode) return;
+
+ if (mode === 'distance') {
+ this._startDistance();
+ } if (mode === 'area') {
+ this._startArea();
+ }
+ },
+
+ _startDistance: function() {
+ var map = this.map;
+
+ this._distanceListeners = [
+ naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this))
+ ];
+
+ // map.setCursor("url('"+ HOME_PATH +"/img/rule.cur'), default");
+ },
+
+ _startArea: function() {
+ var map = this.map;
+
+ this._areaListeners = [
+ naver.maps.Event.addListener(map, 'click', this._onClickArea.bind(this)),
+ naver.maps.Event.addListener(map, 'rightclick', this._finishArea.bind(this))
+ ];
+
+ $(document).on('mousemove.measure', this._onMouseMoveArea.bind(this));
+
+ // map.setCursor("url('"+ HOME_PATH +"/img/area.cur'), default");
+ },
+
+ _finishDistance: function() {
+ naver.maps.Event.removeListener(this._distanceListeners);
+ delete this._distanceListeners;
+
+ $(document).off('mousemove.measure');
+
+ if (this._guideline) {
+ this._guideline.setMap(null);
+ delete this._guideline;
+ }
+
+ if (this._polyline) {
+ var path = this._polyline.getPath(),
+ lastCoord = path.getAt(path.getLength() - 1),
+ distance = this._polyline.getDistance();
+ // 폴리라인의 거리를 미터 단위로 반환합니다.
+
+ delete this._polyline;
+
+ if (lastCoord) {
+ this._addMileStone(lastCoord, this._fromMetersToText(distance), {
+ 'font-size': '14px',
+ 'font-weight': 'bold',
+ 'color': '#f00'
+ });
+ }
+ }
+
+ this.$btnDistance.removeClass('control-on').blur();
+
+ map.setCursor('auto');
+
+ delete this._lastDistance;
+ this._mode = null;
+ },
+
+ _finishArea: function() {
+ naver.maps.Event.removeListener(this._areaListeners);
+ delete this._areaListeners;
+
+ $(document).off('mousemove.measure');
+
+ if (this._polygon) {
+ var path = this._polygon.getPath();
+ path.pop();
+
+ // 폴리곤의 면적을 제곱미터 단위로 반환합니다.
+ var squarMeters = this._polygon.getAreaSize(),
+ lastCoord = path.getAt(path.getLength() - 1);
+
+ if (lastCoord) {
+ this._addMileStone(lastCoord, this._fromSquareMetersToText(squarMeters), {
+ 'font-size': '14px',
+ 'font-weight': 'bold',
+ 'color': '#00f'
+ });
+ }
+
+ delete this._polygon;
+ }
+
+ this.$btnArea.removeClass('control-on').blur();
+
+ map.setCursor('auto');
+
+ this._mode = null;
+ },
+
+ finishMode: function(mode) {
+ if (!mode) return;
+
+ if (mode === 'distance') {
+ this._finishDistance();
+ } if (mode === 'area') {
+ this._finishArea();
+ }
+ },
+
+ _fromMetersToText: function(meters) {
+ meters = meters || 0;
+
+ var km = 1000,
+ text = meters;
+
+ if (meters >= km) {
+ text = parseFloat((meters / km).toFixed(1)) +'km';
+ } else {
+ text = parseFloat(meters.toFixed(1)) +'m';
+ }
+
+ return text;
+ },
+
+ _fromSquareMetersToText: function(squarMeters) {
+ squarMeters = squarMeters || 0;
+
+ var squarKm = 1000 * 1000,
+ text = squarMeters;
+
+ if (squarMeters >= squarKm) {
+ text = parseFloat((squarMeters / squarKm).toFixed(1)) + 'km2';
+ } else {
+ text = parseFloat(squarMeters.toFixed(1)) + 'm2';
+ }
+
+ return text;
+ },
+
+ _addMileStone: function(coord, text, css) {
+ if (!this._ms) this._ms = [];
+
+ var ms = new naver.maps.Marker({
+ position: coord,
+ icon: {
+ content: ''+ text +'
',
+ anchor: new naver.maps.Point(-5, -5)
+ },
+ map: this.map
+ });
+
+ var msElement = $(ms.getElement());
+
+ if (css) {
+ msElement.css(css);
+ } else {
+ msElement.css('font-size', '11px');
+ }
+
+ this._ms.push(ms);
+ },
+
+ _onClickDistance: function(e) {
+ var map = this.map,
+ coord = e.coord;
+
+ if (!this._polyline) {
+ // 임시로 보여줄 점선 폴리라인을 생성합니다.
+ this._guideline = new naver.maps.Polyline({
+ strokeColor: '#f00',
+ strokeWeight: 5,
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.6,
+ path: [coord],
+ map: map
+ });
+
+ $(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this));
+ this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.bind(this)));
+
+ // 실제 거리재기에 사용되는 폴리라인을 생성합니다.
+ this._polyline = new naver.maps.Polyline({
+ strokeColor: '#f00',
+ strokeWeight: 5,
+ strokeOpacity: 0.8,
+ path: [coord],
+ map: map
+ });
+
+ // 폴리라인의 거리를 미터 단위로 반환합니다.
+ this._lastDistance = this._polyline.getDistance();
+ } else {
+ this._guideline.setPath([e.coord]);
+ this._polyline.getPath().push(coord);
+
+ // 폴리라인의 거리를 미터 단위로 반환합니다.
+ var distance = this._polyline.getDistance();
+
+ this._addMileStone(coord, this._fromMetersToText(distance - this._lastDistance));
+
+ this._lastDistance = distance;
+ }
+ },
+
+ _onMouseMoveDistance: function(e) {
+ var map = this.map,
+ proj = this.map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ path = this._guideline.getPath();
+
+ if (path.getLength() === 2) {
+ path.pop();
+ }
+
+ path.push(coord);
+ },
+
+ _onClickArea: function(e) {
+ var map = this.map,
+ coord = e.coord;
+
+ if (!this._polygon) {
+ this._polygon = new naver.maps.Polygon({
+ strokeColor: '#00f',
+ strokeOpacity: 0.6,
+ strokeWeight: 5,
+ fillColor: '#00f',
+ fillOpacity: 0.3,
+ paths: [coord],
+ map: map
+ });
+ } else {
+ this._polygon.getPath().push(coord);
+ }
+ },
+
+ _onMouseMoveArea: function(e) {
+ if (!this._polygon) return;
+
+ var map = this.map,
+ proj = this.map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ path = this._polygon.getPath();
+
+ if (path.getLength() >= 2) {
+ path.pop();
+ }
+
+ path.push(coord);
+ },
+
+ _bindMap: function(map) {
+
+ },
+
+ _unbindMap: function() {
+ this.unbindAll();
+ },
+
+ _bindDOMEvents: function() {
+ this.$btnDistance.on('click.measure', this._onClickButton.bind(this, 'distance'));
+ this.$btnArea.on('click.measure', this._onClickButton.bind(this, 'area'));
+ },
+
+ _onClickButton: function(newMode, e) {
+ e.preventDefault();
+
+ var btn = $(e.target),
+ map = this.map,
+ mode = this._mode;
+
+ if (btn.hasClass('control-on')) {
+ btn.removeClass('control-on');
+ } else {
+ btn.addClass('control-on');
+ }
+
+ this._clearMode(mode);
+
+ if (mode === newMode) {
+ this._mode = null;
+ return;
+ }
+
+ this._mode = newMode;
+
+ this.startMode(newMode);
+ },
+
+ _clearMode: function(mode) {
+ if (!mode) return;
+
+ if (mode === 'distance') {
+ if (this._polyline) {
+ this._polyline.setMap(null);
+ delete this._polyline;
+ }
+
+ this._finishDistance();
+
+ if (this._ms) {
+ for (var i=0, ii=this._ms.length; i
+
+ {/* {test}
*/}
+ >
+ )
+
+};
+
diff --git a/src/views/testDraw/main/ControlMainDraw.js b/src/views/testDraw/main/ControlMainDraw.js
index 55410ac..ba86481 100644
--- a/src/views/testDraw/main/ControlMainDraw.js
+++ b/src/views/testDraw/main/ControlMainDraw.js
@@ -1,12 +1,8 @@
import React, { useEffect, useState } from 'react';
-
import '../../../assets/css/custom.css';
import logo from '../../../assets/images/pal_logo.png';
-
import { Sun, Map, Bell, Check } from 'react-feather';
-
import { AiOutlinePoweroff } from 'react-icons/ai';
-
import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg';
import ControlAlarmNotice from '../alarm/ControlAlarmNotice';
@@ -101,7 +97,7 @@ const ControlMainDraw = () => {
{/* pathDraw Test */}
-
+ {/*
-
{
value={mapControl.drawType === '' ? 'check' : 'X'}
/>
-
+
*/}
-
@@ -139,6 +135,46 @@ const ControlMainDraw = () => {
+
+ -
+ handlerDrawType('LINE')}
+ />
+ handlerDrawType('POLYGON')}
+ />
+ handlerDrawType('CIRCLE')}
+ />
+ handlerDrawType('')}
+ value={mapControl.drawType === '' ? 'STOP' : 'IN USE'}
+ />
+
+
+
+ {/* */}
+