diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index 2f031fa..8c9a4f1 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -249,7 +249,7 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
.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;} */
+.measure-control{position:absolute; 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 92e9f8c..0562a90 100644
--- a/src/components/mapDraw/naver/NaverMap.js
+++ b/src/components/mapDraw/naver/NaverMap.js
@@ -1,19 +1,9 @@
import React, { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import dronicon from '../../../assets/control/icon/drone.png';
-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 { 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 { JQueryDraw } from './draw/JQueryDraw';
import geoJson from '../geojson/airArea.json';
import SensorZone from "./sensor/SensorZone";
@@ -33,14 +23,8 @@ export const NaverCustomMap = () => {
useEffect(() => {
NaverMapInit();
- // console.log(map);
- // console.log(features);
- // setIsMapLoad(true);
}, []);
- // useEffect(() => {
- // console.log('==============11111==================', mapObject);
- // }, [mapObject]);
const removeArrMarkers = arrData => {
arrMarkers = arrData;
@@ -53,7 +37,7 @@ export const NaverCustomMap = () => {
zoomControl: true,
// mapTypeId: naver.maps.MapTypeId.HYBRID,
zoomControlOptions: {
- position: naver.maps.Position.TOP_LEFT,
+ position: naver.maps.Position.LEFT_CENTER,
style: naver.maps.ZoomControlStyle.SMALL
}
@@ -63,36 +47,24 @@ 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
deleted file mode 100644
index 63a0fca..0000000
--- a/src/components/mapDraw/naver/draw/CircleTest.js
+++ /dev/null
@@ -1,145 +0,0 @@
-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
deleted file mode 100644
index 3eacda0..0000000
--- a/src/components/mapDraw/naver/draw/DrawDistance.js
+++ /dev/null
@@ -1,186 +0,0 @@
-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/DrawPath.js b/src/components/mapDraw/naver/draw/DrawPath.js
deleted file mode 100644
index 5cd123f..0000000
--- a/src/components/mapDraw/naver/draw/DrawPath.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import { useEffect, useState } from "react";
-import { BiCaretLeftCircle } from "react-icons/bi";
-import { useSelector } from "react-redux";
-
-export const DrawPath = props => {
- const {naver} = props;
- const {map} = props;
- const {drawType} = useSelector(state => state.controlMapReducer);
-
- let linePaths = ([]);
- let circleCenter = '';
-
- const [eventGroup, setEventGroup] = useState([]);
- const [polylines, setPolylines] = useState([]);
- const [circleLayers, setCircleLayers] = useState([]);
-
- useEffect(() => {
- init();
- }, [drawType]);
-
- useEffect(() => {
- }, [eventGroup]);
-
- useEffect(() => {
- moveCircle();
- }, [circleLayers]);
-
- const init = () => {
- removeEvent();
- removeLayers();
- }
-
- const removeEvent = () => {
- eventGroup.forEach(prev => naver.maps.Event.removeListener(prev));
- setEventGroup([]);
- addEvent();
- }
-
- const removeLayers = () => {
- if(polylines) {
- polylines.forEach(prev => prev.setMap(null));
- };
- if(circleLayers) {
- circleLayers.forEach(prev => prev.setMap(null));
- setCircleLayers([]);
- };
- linePaths = [];
- }
-
-
- const addEvent = () => {
- let addClick = naver.maps.Event.addListener(map, 'click', function(e) {
-
- if(drawType) {
- if(drawType === 'CIRCLE') {
- circleCenter = e.coord;
- }else if(drawType === 'LINE') {
- linePaths.push(e.coord);
- }
- startDraw();
- } else {
-
- }
- });
-
- setEventGroup(prev => ([...prev, addClick]));
- }
-
- const startDraw = () => {
- if(drawType === 'LINE') {
- createPolyline();
- } else if(drawType === 'CIRCLE') {
- createCircle();
- }
- }
-
- const createPolyline = () => {
- if(linePaths.length >= 2) {
- const polyline = new naver.maps.Polyline({
- path: linePaths,
- strokeColor: '#ff0000',
- strokeWeight: 2,
- strokeOpacity: 0.5,
- map: map
- });
- linePaths.shift();
- setPolylines(prev => ([...prev, polyline]));
- }
- }
-
- const createCircle = () => {
- const circle = new naver.maps.Circle({
- center: circleCenter,
- strokeColor: '#283046',
- strokeWeight: 2,
- strokeOpacity: 0.8,
- fillColor: '#0000ff',
- fillOpacity: 0.2,
- radius: 150, //단위 미터
- clickable: false,
- map: map
- });
- console.log(circle)
- setCircleLayers(prev => ([...prev, circle]));
- }
-
- const moveCircle = () => {
- if(circleLayers.length >= 2) {
- circleLayers[0].setMap(null);
- setCircleLayers(prev => ([prev[circleLayers.length-1]]));
- }
- }
-
- return null;
-};
-
diff --git a/src/components/mapDraw/naver/draw/DrawPolygon.js b/src/components/mapDraw/naver/draw/DrawPolygon.js
deleted file mode 100644
index 9a83ad6..0000000
--- a/src/components/mapDraw/naver/draw/DrawPolygon.js
+++ /dev/null
@@ -1,75 +0,0 @@
-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
deleted file mode 100644
index f5c5072..0000000
--- a/src/components/mapDraw/naver/draw/DrawTest.js
+++ /dev/null
@@ -1,128 +0,0 @@
-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/JQueryDraw.js b/src/components/mapDraw/naver/draw/JQueryDraw.js
new file mode 100644
index 0000000..2274731
--- /dev/null
+++ b/src/components/mapDraw/naver/draw/JQueryDraw.js
@@ -0,0 +1,422 @@
+import $ from 'jquery';
+import '../../../../assets/css/custom.css';
+
+export const JQueryDraw = props => {
+ const {naver} = props;
+ const {map} = props;
+
+ var Measure = function(buttons) {
+ console.log('Measure 구현 중')
+
+ this.$btnLine = buttons.line;
+ this.$btnPolygon = buttons.polygon;
+ this.$btnCircle = buttons.circle;
+
+ this._mode = null;
+
+ this._bindDOMEvents();
+ };
+
+ $.extend(
+ Measure.prototype,
+ console.log('extend'),{
+ constructor: Measure,
+
+ setMap: function(map) {
+ console.log('setMap')
+ if (this.map) {
+ this._unbindMap(this.map);
+ }
+
+ this.map = map;
+
+ if (map) {
+ this._bindMap(map);
+ }
+ },
+
+ startMode: function(mode) {
+ console.log('startMode')
+ if (!mode) return;
+
+ if (mode === 'line') {
+ this._startDistance();
+ } if (mode === 'polygon') {
+ this._startArea();
+ } if (mode === 'circle') {
+ this._startCircle();
+ }
+ },
+
+ _startDistance: function() {
+ console.log('startDistance')
+ var map = this.map;
+ this._distanceListeners = [
+ naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this))
+ ];
+ },
+
+ _startArea: function() {
+ console.log('startArea')
+ 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));
+ },
+
+ _startCircle: function() {
+ console.log('startCircle')
+ var map = this.map;
+ this._circleListeners = [
+ naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this))
+ ];
+ },
+
+ _finishDistance: function() {
+ console.log('finishDistance')
+ 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) delete this._polyline;
+
+ //onfocus()의 반대기능 = blur()
+ this.$btnLine.removeClass('control-on').blur();
+
+ this._mode = null;
+ },
+
+ _finishArea: function() {
+ console.log('finishArea')
+ naver.maps.Event.removeListener(this._areaListeners);
+ delete this._areaListeners;
+
+ $(document).off('mousemove.measure');
+
+ if (this._polygon) {
+ var path = this._polygon.getPath();
+ path.pop();
+
+ delete this._polygon;
+ }
+
+ this.$btnPolygon.removeClass('control-on').blur();
+
+ this._mode = null;
+ },
+
+ _finishCircle: function() {
+ console.log('finishCircle')
+
+ console.log(this._radius.getDistance(), 'r');
+
+ naver.maps.Event.removeListener(this._circleListeners);
+ delete this._circleListeners;
+
+ $(document).off('mousemove.measure');
+
+ if(this._guidecircle) {
+ this._guidecircle.setMap(null);
+ this._radius.setMap(null);
+ delete this._raidus;
+ delete this._guidecircle;
+ }
+
+ if (this._circle) {
+ // this._circle.setMap(null);
+ delete this._circle;
+ }
+
+ this.$btnCircle.removeClass('control-on').blur();
+
+ // delete this._lastDistance;
+ this._mode = null;
+ },
+
+ finishMode: function(mode) {
+ console.log('finishMode')
+ if (!mode) return;
+
+ if (mode === 'line') {
+ this._finishDistance();
+ } if (mode === 'polygon') {
+ this._finishArea();
+ } if (mode === 'circle') {
+ this._finishCircle();
+ }
+ },
+
+ _onClickDistance: function(e) {
+ console.log('onClickDistance')
+ var map = this.map,
+ coord = e.coord;
+
+ if (!this._polyline) {
+ // 임시로 보여줄 점선 폴리라인을 생성합니다.
+ this._guideline = new naver.maps.Polyline({
+ strokeColor: '#db4040',
+ strokeWeight: 5,
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.4,
+ 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({
+ strokeLineCap: 'round',
+ strokeLineJoin: 'round',
+ strokeColor: '#db4040',
+ strokeWeight: 8,
+ strokeOpacity: 1,
+ path: [coord],
+ map: map
+ });
+
+ } else {
+ this._guideline.setPath([e.coord]);
+ this._polyline.getPath().push(coord);
+ }
+ },
+
+ _onMouseMoveDistance: function(e) {
+ console.log('onMouseMoveDistance')
+ 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) {
+ console.log('onClickArea')
+ 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) {
+ console.log('onMouseMoveArea')
+ 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);
+ },
+
+ _onClickCircle: function(e) {
+ console.log('onClickCircle')
+ var map = this.map,
+ coord = e.coord;
+
+ if(!this._circle) {
+
+ //가이드 라인
+ this._radius = new naver.maps.Polyline({
+ strokeColor: '#db4040',
+ strokeWeight: 2,
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.6,
+ path: [coord],
+ map: map
+ });
+ this._lastDistance = this._radius.getDistance();
+
+ // 임시로 보여줄 원형
+ this._guidecircle = new naver.maps.Circle({
+ strokeColor: '#283046',
+ strokeWeight: 2,
+ strokeOpacity: 0.8,
+ strokeStyle: [4, 4],
+ fillColor: '#0000ff',
+ fillOpacity: 0.1,
+ center: coord,
+ radius: this._lastDistance,
+ map: map
+ });
+
+ $(document).on('mousemove.measure', this._onMouseMoveCircle.bind(this));
+ this._circleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this)));
+
+ // 실제 사용되는 원형
+ this._circle = new naver.maps.Circle({
+ strokeColor: '#283046',
+ strokeWeight: 2,
+ strokeOpacity: 0.8,
+ fillColor: '#0000ff',
+ fillOpacity: 0.1,
+ center: coord,
+ radius: this._lastDistance,
+ map: map
+ });
+
+ } else {
+ // this._guidecircle.setCenter(e.coord);
+ // this._circle.setCenter(coord);
+ // if(this._radius.getPath().length() === 2) {
+ // this._radius.getPath().pop();
+ // }
+
+ // this._radius.getPath().push(coord);
+
+ var distance = this._radius.getDistance();
+ this._lastDistance = distance;
+ this._circle.setRadius(this._lastDistance);
+ }
+ },
+
+ _onMouseMoveCircle: function(e) {
+ console.log('onMouseMoveCircle')
+ if(!this._circle) return;
+
+ var map = this.map,
+ proj = this.map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ path = this._radius.getPath(),
+ center = this._guidecircle.getCenter(), //LatLng으로 나옴
+ r = proj.getDistance(coord, center);
+
+ if(path.getLength() === 2) {
+ path.pop();
+ }
+ path.push(coord);
+ this._guidecircle.setRadius(r);
+ },
+
+ _bindMap: function(map) {
+ console.log('bindMap')
+ },
+
+ _unbindMap: function() {
+ console.log('unbindMap')
+ this.unbindAll();
+ },
+
+ _bindDOMEvents: function() {
+ console.log('bindDOMEvents')
+ console.log(this, 'this')
+ this.$btnLine.on('click.measure', this._onClickButton.bind(this, 'line'));
+ this.$btnPolygon.on('click.measure', this._onClickButton.bind(this, 'polygon'));
+ this.$btnCircle.on('click.measure', this._onClickButton.bind(this, 'circle'));
+ },
+
+ _onClickButton: function(newMode, e) {
+ //newMode는 방금 클릭한 값(line, polygon, circle...)
+ console.log('onClickButton')
+ e.preventDefault();
+
+ var btn = $(e.target),
+ map = this.map,
+ mode = this._mode;
+ //this._mode는 클릭하기 전 값(첫 클릭이면 null)
+
+ 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) {
+ console.log('clearMode')
+ if (!mode) return;
+
+ if (mode === 'line') {
+ if (this._polyline) {
+ this._polyline.setMap(null);
+ delete this._polyline;
+ }
+
+ this._finishDistance();
+ } else if (mode === 'polygon') {
+ if (this._polygon) {
+ this._polygon.setMap(null);
+ delete this._polygon;
+ }
+
+ this._finishArea();
+ } else if (mode === 'circle') {
+ if (this._circle) {
+ this._circle.setMap(null);
+ delete this._circle;
+ }
+
+ this._finishCircle();
+ }
+ }
+ });
+
+ // id랑 매치시켜서 옵션 지정함
+ var measures = new Measure({
+ line: $('#line'),
+ polygon: $('#polygon'),
+ circle: $('#circle')
+ });
+
+ measures.setMap(map);
+
+ return(
+ <>
+
+ >
+ )
+
+};
+
diff --git a/src/components/mapDraw/naver/draw/JQueryTest.js b/src/components/mapDraw/naver/draw/JQueryTest.js
deleted file mode 100644
index 492c8de..0000000
--- a/src/components/mapDraw/naver/draw/JQueryTest.js
+++ /dev/null
@@ -1,378 +0,0 @@
-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)) + 'km
2';
- } else {
- text = parseFloat(squarMeters.toFixed(1)) + 'm
2';
- }
-
- 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 ba86481..12ee4a5 100644
--- a/src/views/testDraw/main/ControlMainDraw.js
+++ b/src/views/testDraw/main/ControlMainDraw.js
@@ -95,34 +95,9 @@ const ControlMainDraw = () => {
-
- {/* pathDraw Test */}
- {/*
- -
- handlerDrawType('CIRCLE')}
- value={mapControl.drawType === 'CIRCLE' ? 'check' : 'CIRCLE'}
- />
- handlerDrawType('LINE')}
- value={mapControl.drawType === 'LINE' ? 'check' : 'LINE'}
- />
- handlerDrawType('')}
- value={mapControl.drawType === '' ? 'check' : 'X'}
- />
-
-
*/}
+
+ {/* 네이버 그리기 도구모음 */}
+ {/* 제이쿼리로 그리기(기능 연결 중) */}
- {/* */}
-