From 229a05900660ce12bdef6a5c91464cd561d4628a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Mon, 27 Jun 2022 15:20:01 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EA=B5=AC=EC=97=AD=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanAreaForm.js | 99 ++++++++++++++----- .../flight/plan/FlightPlanAreaModal.js} | 28 ++++-- .../flight/plan/FlightPlanAreaContainer.js | 54 ++++++++-- .../flight/plan/FlightPlanDetailContainer.js | 26 +++-- .../basis/flight/actions/basisFlightAction.ts | 16 ++- .../basis/flight/models/basisFlightModel.ts | 12 ++- .../flight/reducers/basisFlightReducer.ts | 8 +- .../basis/flight/sagas/basisFlightSaga.ts | 18 ++++ 8 files changed, 204 insertions(+), 57 deletions(-) rename src/components/{modal/FormModal.js => basis/flight/plan/FlightPlanAreaModal.js} (50%) diff --git a/src/components/basis/flight/plan/FlightPlanAreaForm.js b/src/components/basis/flight/plan/FlightPlanAreaForm.js index 2de40024..0d9fdc43 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaForm.js +++ b/src/components/basis/flight/plan/FlightPlanAreaForm.js @@ -1,20 +1,24 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; +import classnames from 'classnames'; import { Card, CardBody, Col, FormGroup, + FormFeedback, Input, Label, Row, - Button + Button, + Form } from 'reactstrap'; -const FlightPlanAreaForm = () => { + +const FlightPlanAreaForm = (props) => { return ( - +
@@ -38,11 +42,21 @@ const FlightPlanAreaForm = () => { + {/* {props.errors && props.errors.address && ( + + {props.errors.address.message} + + )} */} @@ -56,11 +70,21 @@ const FlightPlanAreaForm = () => { + {/* {props.errors && props.errors.coodinates && ( + + {props.errors.coodinates.message} + + )} */} @@ -70,15 +94,16 @@ const FlightPlanAreaForm = () => { + placeholder='' + innerRef={props.data} + /> @@ -89,33 +114,55 @@ const FlightPlanAreaForm = () => {
-
+
- +
+ + 확인 + + + props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }) + } + > + 취소 + - -
+ ) diff --git a/src/components/modal/FormModal.js b/src/components/basis/flight/plan/FlightPlanAreaModal.js similarity index 50% rename from src/components/modal/FormModal.js rename to src/components/basis/flight/plan/FlightPlanAreaModal.js index 5c7f92f2..3bcee8fa 100644 --- a/src/components/modal/FormModal.js +++ b/src/components/basis/flight/plan/FlightPlanAreaModal.js @@ -1,6 +1,11 @@ +import { useState } from 'react'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; +import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaContainer'; + +export const FlightPlanAreaModal = props => { + + const [onSubmit, setOnSubmit] = useState(false); -export const FormModal = props => { return (
{ {props.modal.title} - {props.modal.contents} + - + {/* - + */}
); diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js index 1e2cecd1..b8f822fd 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -1,29 +1,59 @@ import React, { useEffect, useState } from 'react'; +import { useForm } from 'react-hook-form'; +import {useHistory} from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import FlightPlanAreaForm from '../../../../components/basis/flight/plan/FlightPlanAreaForm'; -import { Button, Col, Row } from 'reactstrap'; +import {Col, Row, Form } from 'reactstrap'; import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; import FlightPlanAreaMap from '../../../../components/basis/flight/plan/FlightPlanAreaMap'; +import * as yup from 'yup'; +import { yupResolver } from '@hookform/resolvers/yup'; - -const FlightPlanAreaContainer = () => { +const FlightPlanAreaContainer = (props) => { const dispatch = useDispatch(); + const history = useHistory(); + const { areaList } = useSelector(state => state.flightState); - const [airArea, setAirArea] = useState(null); + const validSchema = yup.object().shape({ + // address: yup.string().trim().required('주소가 올바르지 않습니다.'), + // coodinates: yup.string().trim().required('좌표가 올바르지 않습니다.'), + // radius: yup.string().trim().required('반경을 입력해 주세요.'), + // altitude_m: yup.string().trim().required('고도(m)를 입력해 주세요.'), + // altitude_ft: yup.string().trim().required('고도(ft)를 입력해 주세요.'), + }); + + const { register, getValues, setValue, errors, handleSubmit } = useForm({ + defaultValues: { + address: '', + coodinates: '', + radius: '', + altitude_m: '', + altitude_ft: '', + }, + resolver: yupResolver(validSchema) + }); + - const getAriAreaList = () => { + const getAirAreaList = () => { dispatch(Actions.AREA_LIST.request()); } + const createAirArea = async data => { + dispatch(Actions.FLIGHT_PLAN_AREA.request(data)); + + props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }); + props.setOnSubmit(false); + } + useEffect(() => { - getAriAreaList(); + getAirAreaList(); }, []); useEffect(() => { setAirArea(areaList); - }, [areaList]) + }, [areaList]) return ( @@ -34,8 +64,14 @@ const FlightPlanAreaContainer = () => { /> ) : null} - - + + diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 99809ec6..7e7d4528 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -1,18 +1,21 @@ -import React, {useState} from 'react'; +import React, {useEffect, useState} from 'react'; import FlightPlanForm from '../../../../components/basis/flight/plan/FlightPlanForm'; import { CustomDetailLayout } from '../../../../components/layout/CustomDetailLayout'; -import { FormModal } from '../../../../components/modal/FormModal'; +import { FlightPlanAreaModal } from '../../../../components/basis/flight/plan/FlightPlanAreaModal'; import FlightPlanAreaContainer from './FlightPlanAreaContainer'; +import { useSelector } from 'react-redux'; const FlightPlanDetailContainer = () => { + const dispatch = useDispatch(); + const history = useHistory(); + + const { flightPlanArea } = useSelector(state => state.flightState); + const [modal, setModal] = useState({ isOpen: false, - title: '', - contents: '', + title: '', }); - - const saveFlightPlanArea = () => { console.log('비행 구역 설정 저장'); @@ -21,20 +24,23 @@ const FlightPlanDetailContainer = () => { const openModal = () => { setModal({ isOpen: true, - title: '비행 구역 설정', - contents: + title: '비행 구역 설정', }); } + useEffect(() => { + + }, [flightPlanArea]); + return ( - ) diff --git a/src/modules/basis/flight/actions/basisFlightAction.ts b/src/modules/basis/flight/actions/basisFlightAction.ts index f7cd37cc..402a7ba8 100644 --- a/src/modules/basis/flight/actions/basisFlightAction.ts +++ b/src/modules/basis/flight/actions/basisFlightAction.ts @@ -1,6 +1,6 @@ import { AxiosError } from 'axios'; import { createAsyncAction, ActionType} from 'typesafe-actions'; -import { FlightAreaData } from '../models/basisFlightModel'; +import { FlightAreaData, FlightPlanArea } from '../models/basisFlightModel'; // 공역 조회 @@ -8,14 +8,26 @@ const AREA_LIST_REQUEST = 'basis/flight/area/LIST_REQUEST'; const AREA_LIST_SUCCESS = 'basis/flight/area/LIST_SUCCESS'; const AREA_LIST_FAILURE = 'basis/flight/area/LIST_FAILURE'; +// 비행 구역 설정 +const FLIGHT_PLAN_AREA_REQUEST = 'basis/flight/plan/area/LIST_REQUEST'; +const FLIGHT_PLAN_AREA_SUCCESS = 'basis/flight/plan/area/LIST_SUCCESS'; +const FLIGHT_PLAN_AREA_FAILURE = 'basis/flight/plan/area/LIST_FAILURE'; + export const AREA_LIST = createAsyncAction( AREA_LIST_REQUEST, AREA_LIST_SUCCESS, AREA_LIST_FAILURE )(); +export const FLIGHT_PLAN_AREA = createAsyncAction( + FLIGHT_PLAN_AREA_REQUEST, + FLIGHT_PLAN_AREA_SUCCESS, + FLIGHT_PLAN_AREA_FAILURE +)(); + const actions = { - AREA_LIST + AREA_LIST, + FLIGHT_PLAN_AREA }; export type FlightAction = ActionType; \ No newline at end of file diff --git a/src/modules/basis/flight/models/basisFlightModel.ts b/src/modules/basis/flight/models/basisFlightModel.ts index 3880268e..abcedbcc 100644 --- a/src/modules/basis/flight/models/basisFlightModel.ts +++ b/src/modules/basis/flight/models/basisFlightModel.ts @@ -1,11 +1,21 @@ export interface FlightState { areaList: FlightAreaData | undefined + flightPlanArea: FlightPlanArea | undefined } export interface FlightAreaData { areaList: [] } +export interface FlightPlanArea { + address : '', + coordinates : '', + redius : '', + altitude_m : '', + altitude_ft : '', +} + export const initFlight = { - areaList: undefined + areaList: undefined, + flightPlanArea: undefined }; \ No newline at end of file diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index 32ad54b5..708445ad 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -12,4 +12,10 @@ export const flightReducer = createReducer ( const {data} = action.payload; draft.areaList = data; }) -) ; \ No newline at end of file +) +.handleAction(Actions.FLIGHT_PLAN_AREA.request, (state, action) => + produce(state, draft => { + const data = action.payload; + draft.flightPlanArea = data; + }) +) \ No newline at end of file diff --git a/src/modules/basis/flight/sagas/basisFlightSaga.ts b/src/modules/basis/flight/sagas/basisFlightSaga.ts index 9676eaa8..82362ef7 100644 --- a/src/modules/basis/flight/sagas/basisFlightSaga.ts +++ b/src/modules/basis/flight/sagas/basisFlightSaga.ts @@ -38,6 +38,24 @@ function* listAreaSaga(action: ActionType) { } } +function* createFlightPlanArea(action: ActionType) { + try { + const data = action.payload; + + yield put( + Actions.FLIGHT_PLAN_AREA.success({ + data: data + }) + ) + + } catch (error: any) { + yield put( + Actions.FLIGHT_PLAN_AREA.failure(error) + ) + } +} + export function* flightSaga() { yield takeEvery(Actions.AREA_LIST.request, listAreaSaga); + yield takeEvery(Actions.FLIGHT_PLAN_AREA.request, createFlightPlanArea); } \ No newline at end of file From b00fc131bf16bfe54f3010eac82e920d034a028c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Mon, 27 Jun 2022 15:36:01 +0900 Subject: [PATCH 2/6] . --- src/containers/basis/flight/plan/FlightPlanDetailContainer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 7e7d4528..87078e31 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -3,7 +3,8 @@ import FlightPlanForm from '../../../../components/basis/flight/plan/FlightPlanF import { CustomDetailLayout } from '../../../../components/layout/CustomDetailLayout'; import { FlightPlanAreaModal } from '../../../../components/basis/flight/plan/FlightPlanAreaModal'; import FlightPlanAreaContainer from './FlightPlanAreaContainer'; -import { useSelector } from 'react-redux'; +import {useHistory} from 'react-router-dom'; +import { useDispatch, useSelector } from 'react-redux'; const FlightPlanDetailContainer = () => { From 6babfe2f8f58ff6064499094e09603e7574951d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Thu, 30 Jun 2022 09:58:14 +0900 Subject: [PATCH 3/6] . --- .../basis/flight/plan/FlightPlanAreaForm.js | 58 +------------------ .../basis/flight/plan/FlightPlanForm.js | 45 ++++++++------ .../flight/plan/FlightPlanAreaContainer.js | 12 +--- .../flight/plan/FlightPlanDetailContainer.js | 23 +++++++- 4 files changed, 51 insertions(+), 87 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanAreaForm.js b/src/components/basis/flight/plan/FlightPlanAreaForm.js index 0d9fdc43..50ef0011 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaForm.js +++ b/src/components/basis/flight/plan/FlightPlanAreaForm.js @@ -32,63 +32,7 @@ const FlightPlanAreaForm = (props) => {
-
-
- - - - - - {/* {props.errors && props.errors.address && ( - - {props.errors.address.message} - - )} */} - - - -
-
- - - - - - {/* {props.errors && props.errors.coodinates && ( - - {props.errors.coodinates.message} - - )} */} - - - -
+
diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 8a758b86..2df3b01c 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -44,7 +44,7 @@ const FlightPlanForm = (props) => { - + { - + { placeholder='' /> - + + +
+
+ - + { /> - - + { placeholder='' /> - - -
+ + + + -
+ {/*
- + { - + { -
+
*/}
@@ -273,7 +277,8 @@ const FlightPlanForm = (props) => { id='ownerNm' name='ownerNm' size='sm' - placeholder='' + placeholder='' + readOnly /> @@ -287,7 +292,8 @@ const FlightPlanForm = (props) => { id='ownerNm' name='ownerNm' size='sm' - placeholder='' + placeholder='' + readOnly /> @@ -305,7 +311,8 @@ const FlightPlanForm = (props) => { id='ownerNm' name='ownerNm' size='sm' - placeholder='' + placeholder='' + readOnly /> @@ -320,7 +327,8 @@ const FlightPlanForm = (props) => { id='ownerNm' name='ownerNm' size='sm' - placeholder='m' + placeholder='m' + readOnly />
@@ -329,7 +337,8 @@ const FlightPlanForm = (props) => { id='ownerNm' name='ownerNm' size='sm' - placeholder='ft' + placeholder='ft' + readOnly />
diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js index b8f822fd..39dc57ec 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -16,18 +16,12 @@ const FlightPlanAreaContainer = (props) => { const { areaList } = useSelector(state => state.flightState); const [airArea, setAirArea] = useState(null); - const validSchema = yup.object().shape({ - // address: yup.string().trim().required('주소가 올바르지 않습니다.'), - // coodinates: yup.string().trim().required('좌표가 올바르지 않습니다.'), - // radius: yup.string().trim().required('반경을 입력해 주세요.'), - // altitude_m: yup.string().trim().required('고도(m)를 입력해 주세요.'), - // altitude_ft: yup.string().trim().required('고도(ft)를 입력해 주세요.'), + const validSchema = yup.object().shape({ }); const { register, getValues, setValue, errors, handleSubmit } = useForm({ - defaultValues: { - address: '', - coodinates: '', + defaultValues: { + coodinates: [], radius: '', altitude_m: '', altitude_ft: '', diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 87078e31..3df9a61e 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -5,18 +5,34 @@ import { FlightPlanAreaModal } from '../../../../components/basis/flight/plan/Fl import FlightPlanAreaContainer from './FlightPlanAreaContainer'; import {useHistory} from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; - +import * as yup from 'yup'; +import { yupResolver } from '@hookform/resolvers/yup'; +import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; +import { useForm } from 'react-hook-form'; const FlightPlanDetailContainer = () => { const dispatch = useDispatch(); const history = useHistory(); const { flightPlanArea } = useSelector(state => state.flightState); - + const [areaInfo, setAreaInfo] = useState(); const [modal, setModal] = useState({ isOpen: false, title: '', }); + + /* Form Validation Checking */ + const validSchema = yup.object().shape({ + }); + const {} = useForm({ + defaultValues: { + coodinates: [], + radius: '', + altitude_m: '', + altitude_ft: '', + }, + resolver: yupResolver(validSchema) + }) const saveFlightPlanArea = () => { console.log('비행 구역 설정 저장'); @@ -30,13 +46,14 @@ const FlightPlanDetailContainer = () => { } useEffect(() => { - + setAreaInfo(flightPlanArea); }, [flightPlanArea]); return ( Date: Thu, 30 Jun 2022 10:22:08 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=EB=8F=84=ED=98=95=EA=B7=B8=EB=A6=AC?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/assets/css/custom.css | 5 + src/components/mapDraw/naver/NaverMap.js | 28 +- .../mapDraw/naver/draw/CircleTest.js | 145 +++++++ .../mapDraw/naver/draw/DrawDistance.js | 186 +++++++++ src/components/mapDraw/naver/draw/DrawMap.js | 65 ++- src/components/mapDraw/naver/draw/DrawPath.js | 72 +--- .../mapDraw/naver/draw/DrawPolygon.js | 75 ++++ src/components/mapDraw/naver/draw/DrawTest.js | 128 ++++++ .../mapDraw/naver/draw/JQueryTest.js | 378 ++++++++++++++++++ src/views/testDraw/main/ControlMainDraw.js | 48 ++- src/views/testDraw/main/test.js | 0 12 files changed, 1050 insertions(+), 82 deletions(-) create mode 100644 src/components/mapDraw/naver/draw/CircleTest.js create mode 100644 src/components/mapDraw/naver/draw/DrawDistance.js create mode 100644 src/components/mapDraw/naver/draw/DrawPolygon.js create mode 100644 src/components/mapDraw/naver/draw/DrawTest.js create mode 100644 src/components/mapDraw/naver/draw/JQueryTest.js create mode 100644 src/views/testDraw/main/test.js diff --git a/package.json b/package.json index b292c85b..de9181fb 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 c6f1fbcd..2f031fa1 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 6b32d000..92e9f8c4 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 00000000..63a0fca4 --- /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 00000000..3eacda0e --- /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 6b0ea4fc..3e6b12ee 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 f8326ed4..5cd123f0 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 00000000..9a83ad64 --- /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 00000000..f5c50723 --- /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 00000000..492c8de7 --- /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 55410aca..ba86481e 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'} + /> +
    • +
+ + {/*
    +
  • + +
    • +
*/} +
  • Date: Fri, 1 Jul 2022 14:46:50 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=EC=A0=9C=EC=9D=B4=EC=BF=BC=EB=A6=AC=20?= =?UTF-8?q?=ED=99=9C=EC=9A=A9=20draw?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/custom.css | 2 +- src/components/mapDraw/naver/NaverMap.js | 46 +- .../mapDraw/naver/draw/CircleTest.js | 145 ------ .../mapDraw/naver/draw/DrawDistance.js | 186 -------- src/components/mapDraw/naver/draw/DrawPath.js | 116 ----- .../mapDraw/naver/draw/DrawPolygon.js | 75 ---- src/components/mapDraw/naver/draw/DrawTest.js | 128 ------ .../mapDraw/naver/draw/JQueryDraw.js | 422 ++++++++++++++++++ .../mapDraw/naver/draw/JQueryTest.js | 378 ---------------- src/views/testDraw/main/ControlMainDraw.js | 37 +- src/views/testDraw/main/test.js | 0 11 files changed, 435 insertions(+), 1100 deletions(-) delete mode 100644 src/components/mapDraw/naver/draw/CircleTest.js delete mode 100644 src/components/mapDraw/naver/draw/DrawDistance.js delete mode 100644 src/components/mapDraw/naver/draw/DrawPath.js delete mode 100644 src/components/mapDraw/naver/draw/DrawPolygon.js delete mode 100644 src/components/mapDraw/naver/draw/DrawTest.js create mode 100644 src/components/mapDraw/naver/draw/JQueryDraw.js delete mode 100644 src/components/mapDraw/naver/draw/JQueryTest.js delete mode 100644 src/views/testDraw/main/test.js diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 2f031fa1..8c9a4f1c 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 92e9f8c4..0562a90f 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 63a0fca4..00000000 --- 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 3eacda0e..00000000 --- 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 5cd123f0..00000000 --- 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 9a83ad64..00000000 --- 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 f5c50723..00000000 --- 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 00000000..2274731b --- /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 492c8de7..00000000 --- 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)) + '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 ba86481e..12ee4a51 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'} - /> -
    • -
*/} + + {/* 네이버 그리기 도구모음 */}
  • {
+ {/* 제이쿼리로 그리기(기능 연결 중) */}
  • {
- {/*
    -
  • - -
    • -
*/} -
  • Date: Mon, 4 Jul 2022 16:12:31 +0900 Subject: [PATCH 6/6] . --- src/assets/css/custom.css | 6 + .../mapDraw/naver/draw/JQueryDraw.js | 118 ++++++++++++++---- src/views/testDraw/main/ControlMainDraw.js | 4 +- 3 files changed, 104 insertions(+), 24 deletions(-) diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 8c9a4f1c..0f44874d 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -251,6 +251,12 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon .measure-control{position:absolute; z-index:100;} +.control-btn{margin-left: 7px; border-bottom: solid 1px #283046; margin-bottom:5px;} +.buffer-input{text-align: center; border-radius: 100px; border: 1px solid #283046; width: 70px; margin-left: 5px;} +.buffer-btn{text-align: center; border-radius: 100px; border: 1px solid #283046; width: 30px; margin-left: 5px;} + + + /*메인-알림*/ .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;} .notice-icon{padding:10px 0;} diff --git a/src/components/mapDraw/naver/draw/JQueryDraw.js b/src/components/mapDraw/naver/draw/JQueryDraw.js index 2274731b..243cd1c4 100644 --- a/src/components/mapDraw/naver/draw/JQueryDraw.js +++ b/src/components/mapDraw/naver/draw/JQueryDraw.js @@ -1,13 +1,17 @@ import $ from 'jquery'; +import { useEffect } from 'react'; +import { useSelector } from 'react-redux'; import '../../../../assets/css/custom.css'; +import { CustomInput } from 'reactstrap'; export const JQueryDraw = props => { const {naver} = props; const {map} = props; - var Measure = function(buttons) { - console.log('Measure 구현 중') + const { drawType } = useSelector(state => state.controlMapReducer); + + var Measure = function(buttons) { this.$btnLine = buttons.line; this.$btnPolygon = buttons.polygon; this.$btnCircle = buttons.circle; @@ -18,8 +22,7 @@ export const JQueryDraw = props => { }; $.extend( - Measure.prototype, - console.log('extend'),{ + Measure.prototype,{ constructor: Measure, setMap: function(map) { @@ -72,7 +75,8 @@ export const JQueryDraw = props => { console.log('startCircle') var map = this.map; this._circleListeners = [ - naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this)) + naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this)), + naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this)) ]; }, @@ -88,8 +92,28 @@ export const JQueryDraw = props => { delete this._guideline; } - if (this._polyline) delete this._polyline; + if (this._polyline) { + console.log(this._polyline.getPath()) + + this._bufferPolygon = new naver.maps.Polygon({ + + }) + + // this._polygon = new naver.maps.Polygon({ + // strokeColor: '#00f', + // strokeOpacity: 0.6, + // strokeWeight: 2, + // fillColor: '#00f', + // fillOpacity: 0.3, + // paths: [coord], + // map: map + // }); + + // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯 + // this._polyline.setMap(null) + delete this._polyline; + } //onfocus()의 반대기능 = blur() this.$btnLine.removeClass('control-on').blur(); @@ -118,8 +142,6 @@ export const JQueryDraw = props => { _finishCircle: function() { console.log('finishCircle') - console.log(this._radius.getDistance(), 'r'); - naver.maps.Event.removeListener(this._circleListeners); delete this._circleListeners; @@ -161,6 +183,8 @@ export const JQueryDraw = props => { var map = this.map, coord = e.coord; + console.log(coord, '클릭좌표1'); + if (!this._polyline) { // 임시로 보여줄 점선 폴리라인을 생성합니다. this._guideline = new naver.maps.Polyline({ @@ -180,12 +204,22 @@ export const JQueryDraw = props => { strokeLineCap: 'round', strokeLineJoin: 'round', strokeColor: '#db4040', - strokeWeight: 8, + strokeWeight: 5, strokeOpacity: 1, path: [coord], map: map }); + this._test = new naver.maps.Polyline({ + // path: [[126.6047916, 37.5237865], [126.6047719, 37.5237832]], + path: [[126.6048449, 37.5237486], [126.6047340, 37.5237299]], + map: map, + strokeweight: 5, + strokeOpacity: 1, + strokeColor: '#db4040' + }) + console.log(this._test.getDistance()); + } else { this._guideline.setPath([e.coord]); this._polyline.getPath().push(coord); @@ -199,6 +233,7 @@ export const JQueryDraw = props => { coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), path = this._guideline.getPath(); + // console.log(coord, '실시간 좌표') if (path.getLength() === 2) { //맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까 path.pop(); @@ -217,9 +252,9 @@ export const JQueryDraw = props => { this._polygon = new naver.maps.Polygon({ strokeColor: '#00f', strokeOpacity: 0.6, - strokeWeight: 5, - fillColor: '#00f', - fillOpacity: 0.3, + strokeWeight: 2, + fillColor: '#0000ff', + fillOpacity: 0.1, paths: [coord], map: map }); @@ -253,8 +288,8 @@ export const JQueryDraw = props => { //가이드 라인 this._radius = new naver.maps.Polyline({ - strokeColor: '#db4040', - strokeWeight: 2, + // strokeColor: '#db4040', + // strokeWeight: 2, strokeStyle: [4, 4], strokeOpacity: 0.6, path: [coord], @@ -264,8 +299,8 @@ export const JQueryDraw = props => { // 임시로 보여줄 원형 this._guidecircle = new naver.maps.Circle({ - strokeColor: '#283046', - strokeWeight: 2, + // strokeColor: '#283046', + // strokeWeight: 2, strokeOpacity: 0.8, strokeStyle: [4, 4], fillColor: '#0000ff', @@ -280,8 +315,8 @@ export const JQueryDraw = props => { // 실제 사용되는 원형 this._circle = new naver.maps.Circle({ - strokeColor: '#283046', - strokeWeight: 2, + // strokeColor: '#283046', + // strokeWeight: 2, strokeOpacity: 0.8, fillColor: '#0000ff', fillOpacity: 0.1, @@ -302,6 +337,8 @@ export const JQueryDraw = props => { var distance = this._radius.getDistance(); this._lastDistance = distance; this._circle.setRadius(this._lastDistance); + + } }, @@ -334,7 +371,6 @@ export const JQueryDraw = props => { _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')); @@ -351,8 +387,10 @@ export const JQueryDraw = props => { //this._mode는 클릭하기 전 값(첫 클릭이면 null) if (btn.hasClass('control-on')) { + console.log('remove') btn.removeClass('control-on'); } else { + console.log('add') btn.addClass('control-on'); } @@ -393,6 +431,11 @@ export const JQueryDraw = props => { } this._finishCircle(); + } else if(mode === 'CIRCLE') { + if(this._circle) { + this._circle.setMap(null); + delete this._circle; + } } } }); @@ -408,13 +451,44 @@ export const JQueryDraw = props => { return( <> +
    • - - - + {/* */} + {/* */} + {/* */} + + + +
      + + {/* */}
    +
    ) diff --git a/src/views/testDraw/main/ControlMainDraw.js b/src/views/testDraw/main/ControlMainDraw.js index 12ee4a51..87d149a9 100644 --- a/src/views/testDraw/main/ControlMainDraw.js +++ b/src/views/testDraw/main/ControlMainDraw.js @@ -111,7 +111,7 @@ const ControlMainDraw = () => {
{/* 제이쿼리로 그리기(기능 연결 중) */} -
    + {/*
    • { value={mapControl.drawType === '' ? 'STOP' : 'IN USE'} />
      • -
    +
*/}