pav
/
pav-fe-kac-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

네이버 api - drawing

pull/2/head
junh_eee 2 years ago
parent
a9debf1e9d
commit
9080ab0a2e
6 changed files with 164 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      public/index.html
  2. 6
      src/assets/css/custom.css
  3. 48
      src/components/mapDraw/naver/NaverMap.js
  4. 73
      src/components/mapDraw/naver/draw/DrawMap.js
  5. 79
      src/components/mapDraw/naver/draw/DrawPath.js
  6. 18
      src/views/testDraw/main/ControlMainDraw.js

3
public/index.html
Unescape View File

@ -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.

6
src/assets/css/custom.css
Unescape View File

@ -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;}

48
src/components/mapDraw/naver/NaverMap.js
Unescape View File

@ -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.445949, 126.673868),
zoom: 13,
center: new naver.maps.LatLng(37.520357, 126.610166),
zoom: 16,
zoomControl: true,
mapTypeId: naver.maps.MapTypeId.HYBRID,
// mapTypeId: naver.maps.MapTypeId.HYBRID,
zoomControlOptions: {
position: naver.maps.Position.TOP_LEFT,
style: naver.maps.ZoomControlStyle.SMALL
}
};
// 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);
// });
const map = new naver.maps.Map('map', mapOptions);
setMapObject(map);
};
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}

73
src/components/mapDraw/naver/draw/DrawMap.js
Unescape View File

@ -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;
};

79
src/components/mapDraw/naver/draw/DrawPath.js
Unescape View File

@ -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) {
const keyboardEvent = e.keyboardEvent,
keyCode = keyboardEvent.keyCode || keyboardEvent.which;
// 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, escDown]));
// const ESC = 27;
// if(keyCode === ESC) {
// keyboardEvent.preventDefault();
// // removeLayers();
// }
// });
// 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',
strokeWeight: 2,
strokeOpacity: 1,
strokeColor: '#283046',
strokeWeight: 1,
strokeOpacity: 0.8,
fillColor: '#0000ff',
fillOpacity: 0.35,
radius: 1000,
fillOpacity: 0.2,
radius: 150,
clickable: false,
map: map
});

18
src/views/testDraw/main/ControlMainDraw.js
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save