네이버 api - drawing

public/index.html

@@ -15,8 +15,9 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <script
       type="text/javascript"
-      src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=5md90yszqj&submodules=geocoder""
+      src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=5md90yszqj&submodules=geocoder,drawing"
     ></script>
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/assets/css/custom.css

@@ -72,6 +72,7 @@ html body .content.pal-content{min-height:100vh;}
 html body .content.pal-content .content-wrapper{min-height:100vh;}
 button{border:0;background:transparent;}
 
+
 /*레이아웃*/
 .pal-container{background:#ddd;height:100vh;position:relative;}
 .map{width:calc(100% - 80px);position:absolute;right:0;}
@@ -242,6 +243,11 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
 .left-menu-nav li button svg{color:#f4f4f4;}
 .left-menu-nav li button svg path{fill:#f4f4f4;}
 
+/* fligth path draw */
+.left-menu-nav li .circle{background-color: #283046; font-size:0.9rem; color: white; width:70px; border: 0px;}
+.left-menu-nav li .line{background-color: #283046; font-size:0.9rem; color: white; width:70px; border: 0px;}
+.left-menu-nav li .none{background-color: #283046; font-size:0.9rem; color: white; width:70px; border: 0px;}
+
 /*메인-알림*/
 .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;}

src/components/mapDraw/naver/NaverMap.js

@@ -11,13 +11,14 @@ import { DrawPath } from './draw/DrawPath';
 import { DrawTest0 } from './draw/DrawTest0';
 import { DrawTest1 } from './draw/DrawTest1';
 import { DrawTest2 } from './draw/DrawTest2';
+import { DrawMap } from './draw/DrawMap';
 
 import geoJson from '../geojson/airArea.json';
 import SensorZone from "./sensor/SensorZone";
 
 export const NaverCustomMap = () => {
   const naver = window.naver;
-  let map;
+  // let map;
 
   const [isMapLoad, setIsMapLoad] = useState(false);
   const [mapObject, setMapObject] = useState(null);
@@ -29,14 +30,12 @@ export const NaverCustomMap = () => {
   useEffect(() => {
     NaverMapInit();
     // console.log(map);
-
     // console.log(features);
-
     // setIsMapLoad(true);
   }, []);
 
   useEffect(() => {
-    // console.log('==============11111==================', mapObject);
+    console.log('==============11111==================', mapObject);
   }, [mapObject]);
 
   const removeArrMarkers = arrData => {
@@ -45,27 +44,18 @@ export const NaverCustomMap = () => {
 
   const NaverMapInit = () => {
     const mapOptions = {
-      // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
+      center: new naver.maps.LatLng(37.520357, 126.610166),
-      center: new naver.maps.LatLng(37.445949, 126.673868),
+      zoom: 16,
-      zoom: 13,
       zoomControl: true,
-      mapTypeId: naver.maps.MapTypeId.HYBRID,
+      // mapTypeId: naver.maps.MapTypeId.HYBRID,
       zoomControlOptions: {
         position: naver.maps.Position.TOP_LEFT,
 
         style: naver.maps.ZoomControlStyle.SMALL
       }
     };
-
+    const map = new naver.maps.Map('map', mapOptions);
-    // map = ;
+    setMapObject(map);
-    setMapObject(new naver.maps.Map('map', mapOptions));
-    // naver.maps.Event.addListener(map, 'click', function (e) {
-    //   console.log(e);
-    // });
-
-    // naver.maps.Event.addListener(map, 'idle', function (e) {
-    //   console.log(e);
-    // });
   };
 
   return (
@@ -73,30 +63,10 @@ export const NaverCustomMap = () => {
       <div id='map' style={{ width: '100%', height: '100vh' }}></div>
       {mapObject != null ? (
         <>
-          {/* <DronMarker
-            map={mapObject}
-            naver={naver}
-            arrMarkers={arrMarkers}
-            removeArrMarkers={removeArrMarkers}
-            test={test}
-          /> */}
-
           <NaverMapControl map={mapObject} />
-
-          {/* <DronHistory
-            map={mapObject}
-            naver={naver}
-            arrPolyline={arrPolyline}
-          /> */}
-
           <FeatureAirZone map={mapObject} naver={naver} features={features} />
-          {/* <NaverMapSearch map={mapObject} naver={naver} /> */}
-          {/* <SensorZone map={mapObject} naver={naver} /> */}
-
-          {/* <DrawLine map={mapObject} naver={naver} /> */}
-          {/* <DrawTest2 map={mapObject} naver={naver} /> */}
-          {/* <DrawTest map={mapObject} naver={naver} /> */}
           <DrawPath map={mapObject} naver={naver} />
+          <DrawMap map={mapObject} naver={naver} />
 
         </>
       ) : null}

src/components/mapDraw/naver/draw/DrawMap.js

@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react";
+import { BiCaretLeftCircle } from "react-icons/bi";
+import { useSelector } from "react-redux";
+
+export const DrawMap = props => {
+  const {naver} = props;
+  const {map} = props;
+
+  useEffect(() => {
+    drawSetting();
+    // debugger;
+    console.log("draw create")
+  }, []);
+
+  const drawSetting = () => {
+    // debugger;
+    console.log(map)
+
+    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
+      },
+      controlPointOptions: {
+          anchorPointOptions: {
+              radius: 5,
+              fillColor: '#ff0000',
+              strokeColor: '#0000ff',
+              strokeWeight: 2
+          },
+          midPointOptions: {
+              radius: 4,
+              fillColor: '#ff0000',
+              strokeColor: '#0000ff',
+              strokeWeight: 2,
+              fillOpacity: 0.5
+          }
+      },
+      rectangleOptions: {
+          fillColor: '#ff0000',
+          fillOpacity: 0.3,
+          strokeWeight: 2,
+          strokeColor: '#ff0000'
+      },
+      ellipseOptions: {
+          fillColor: '#ff25dc',
+          fillOpacity: 0.3,
+          strokeWeight: 2,
+          strokeColor: '#ff25dc'
+      },
+      polylineOptions: { // 화살표 아이콘 계열 옵션은 무시됩니다.
+          strokeColor: '#222',
+          strokeWeight: 2
+      },
+      polygonOptions: {
+          fillColor: '#ffc300',
+          fillOpacity: 0.3,
+          strokeWeight: 2,
+          strokeColor:'#ffc300'
+      }
+    });
+    drawingManager.setMap(map);
+  }
+
+  return null;
+};
+

src/components/mapDraw/naver/draw/DrawPath.js

@@ -9,12 +9,15 @@ export const DrawPath = props => {
 
   let linePath = ([]);
   let circleCenter = '';
-  // let events = ([]);
-  const [eventGroup, setEventGroup] = useState([]);
 
+  const [eventGroup, setEventGroup] = useState([]);
   const [polylines, setPolylines] = useState([]);
   const [circleLayers, setCircleLayers] = useState([]);
 
+  useEffect(() => {
+    // drawSetting();
+  }, []);
+
   useEffect(() => {
     init();
   }, [drawType]);
@@ -26,15 +29,35 @@ export const DrawPath = props => {
     moveCircle();
   }, [circleLayers]);
 
-  
-
   const init = () => {
     removeEvent();
     removeLayers();
   }
 
+  const drawSetting = () => {
+    debugger;
+    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();
   }
@@ -54,6 +77,7 @@ export const DrawPath = props => {
 
   const addEvent = () => {
     let addClick = naver.maps.Event.addListener(map, 'click', function(e) {
+      // debugger;
       if(drawType) {
         linePath.push(e.coord);
         circleCenter = e.coord;
@@ -63,17 +87,34 @@ export const DrawPath = props => {
       }
     });
 
-    let escDown = naver.maps.Event.addListener(map, 'keydown', function(e) {
+    // let escDown = naver.maps.Event.addListener(map, 'keydown', function(e) {
-      const keyboardEvent = e.keyboardEvent,
+    //   const keyboardEvent = e.keyboardEvent,
-      keyCode = keyboardEvent.keyCode || keyboardEvent.which;
+    //   keyCode = keyboardEvent.keyCode || keyboardEvent.which;
-
+
-      const ESC = 27;
+    //   const ESC = 27;
-      if(keyCode === ESC) {
+    //   if(keyCode === ESC) {
-        keyboardEvent.preventDefault();
+    //     keyboardEvent.preventDefault();
-        // removeLayers();
+    //     // removeLayers();
-      }
+    //   }
-    });
+    // });
-    setEventGroup(prev => ([...prev, addClick, escDown]));
+
+    // 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);
+
+    setEventGroup(prev => ([...prev, addClick]));
+    // setEventGroup(prev => ([...prev, addClick, drawingManager]));
   }
 
   const startDraw = () => {
@@ -101,12 +142,12 @@ export const DrawPath = props => {
   const createCircle = () => {
     const circle = new naver.maps.Circle({
       center: circleCenter,
-      strokeColor: '#ff0000',
+      strokeColor: '#283046',
-      strokeWeight: 2,
+      strokeWeight: 1,
-      strokeOpacity: 1,
+      strokeOpacity: 0.8,
       fillColor: '#0000ff',
-      fillOpacity: 0.35,
+      fillOpacity: 0.2,
-      radius: 1000,
+      radius: 150,
       clickable: false,
       map: map
     });

src/views/testDraw/main/ControlMainDraw.js

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import '../../../assets/css/custom.css';
 import logo from '../../../assets/images/pal_logo.png';
 
-import { Sun, Map, Bell } from 'react-feather';
+import { Sun, Map, Bell, Check } from 'react-feather';
 
 import { AiOutlinePoweroff } from 'react-icons/ai';
 
@@ -24,7 +24,8 @@ import {
   ButtonGroup,
   Button,
   Badge,
-  CustomInput
+  CustomInput,
+  Input, Label, InputGroup
 } from 'reactstrap'
 
 import {
@@ -99,20 +100,27 @@ const ControlMainDraw = () => {
         <ul className='left-menu-nav'>
           <li>
             <CustomInput
+              id='circle'
               type='button'
+              className='circle'
               onClick={e => handlerDrawType('CIRCLE')}
-              value='CIRCLE'
+              value={mapControl.drawType === 'CIRCLE' ? 'check' : 'CIRCLE'}
             />
             <CustomInput
+              id='line'
               type='button'
+              className='line'
               onClick={e => handlerDrawType('LINE')}
-              value='LINE'
+              value={mapControl.drawType === 'LINE' ? 'check' : 'LINE'}
             /><br/>
             <CustomInput
+              id='none'
               type='button'
+              className='none'
               onClick={e => handlerDrawType('')}
-              value='X'
+              value={mapControl.drawType === '' ? 'check' : 'X'}
             />
+    
           </li>
         </ul>