diff --git a/src/components/map/naver/draw/FlightPlanDraw.js b/src/components/map/naver/draw/FlightPlanDraw.js
index 1958b48..9bcccd7 100644
--- a/src/components/map/naver/draw/FlightPlanDraw.js
+++ b/src/components/map/naver/draw/FlightPlanDraw.js
@@ -487,40 +487,6 @@ export const FlightPlanDraw = props => {
setPolygon(polygon);
setAreaInfo(path);
setFigure(polygon);
-
- // if(pastMarker.length !=0) {
- // //마커 위치 변경
- // pastMarker[index].setPosition(path[index]);
-
- // //마커 content 변경
- // if(index == 0) {
- // //시작 지점 이동
- // pastMarker[index].setIcon({
- // content: '
'+ 'Start' +'
',
- // anchor: new naver.maps.Point(-5, -5)
- // })
- // } else {
- // let isLastIndex;
- // if(pastMarker.length === index+1) {
- // //종료 지점 이동(index 마커만 변경)
- // isLastIndex = 1;
- // } else {
- // //사이 지점 이동(index+1 마커도 변경)
- // isLastIndex = 2;
- // }
-
- // for(let i = index; i < index+isLastIndex; i++) {
- // var proj = map.getProjection(),
- // r = proj.getDistance(pastMarker[i-1].position, pastMarker[i].position);
-
- // let text = fromMetersToText(r);
- // pastMarker[i].setIcon({
- // content: ''+ text +'
',
- // anchor: new naver.maps.Point(-5, -5)
- // })
- // }
- // }
- // }
}
$(document).off('mousemove.measure');
@@ -584,6 +550,18 @@ export const FlightPlanDraw = props => {
}
}
+ const createMarker = (data) => {
+ distanceMarker.push(
+ new naver.maps.Marker({
+ position: data.position,
+ icon: {
+ content: ''+ data.content +'
',
+ anchor: data.anchor
+ }, map: map
+ })
+ )
+ }
+
const handleDetailDraw = () => {
if (props.areaCoordList) {
// console.log('handleDetailDraw')
@@ -668,15 +646,13 @@ export const FlightPlanDraw = props => {
for(let i = 0; i < paths.length; i++) {
if(i == 0) {
- distanceMarker.push(
- new naver.maps.Marker({
- position: paths[i],
- icon: {
- content: ''+ 'Start' +'
',
- anchor: new naver.maps.Point(45, 35)
- }, map: map
- })
- )
+ const data = {};
+ data.position = paths[i];
+ data.color = '#ff0000';
+ data.content = 'Start';
+ data.anchor = new naver.maps.Point(45, 35);
+ createMarker(data);
+
} else {
var proj = map.getProjection(),
r = proj.getDistance(paths[i-1], paths[i]);
@@ -687,16 +663,12 @@ export const FlightPlanDraw = props => {
let dis2 = paths[i]
let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
- distanceMarker.push(
- new naver.maps.Marker({
- // position: paths[i],
- position: midPoint,
- icon: {
- content: ''+ text +'
',
- anchor: new naver.maps.Point(20, 35)
- }, map: map
- })
- )
+ const data = {};
+ data.position = midPoint;
+ data.color = '#737373';
+ data.content = text;
+ data.anchor = new naver.maps.Point(20, 35);
+ createMarker(data);
}
}
setMarker(distanceMarker);
@@ -748,16 +720,13 @@ export const FlightPlanDraw = props => {
for(let i = 0; i < paths.length+1; i++) {
//start
if(i == 0) {
- distanceMarker.push(
- new naver.maps.Marker({
- position: paths[0],
- icon: {
- content: ''+ 'Start' +'
',
- anchor: new naver.maps.Point(45, 35)
- },
- map: map
- })
- )
+ const data = {};
+ data.position = paths[0];
+ data.color = '#ff0000';
+ data.content = 'Start';
+ data.anchor = new naver.maps.Point(45, 35);
+ createMarker(data);
+
//첫좌표이자 마지막 좌표
} else if(i == paths.length) {
var proj = map.getProjection(),
@@ -769,17 +738,12 @@ export const FlightPlanDraw = props => {
let dis2 = paths[i-1]
let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
- distanceMarker.push(
- new naver.maps.Marker({
- // position: paths[0],
- position: midPoint,
- icon: {
- content: ''+ text +'
',
- anchor: new naver.maps.Point(0, 35)
- },
- map: map
- })
- )
+ const data = {};
+ data.position = midPoint;
+ data.color = '#737373';
+ data.content = text;
+ data.anchor = new naver.maps.Point(0, 35);
+ createMarker(data);
//그 외 나머지
} else {
var proj = map.getProjection(),
@@ -791,17 +755,12 @@ export const FlightPlanDraw = props => {
let dis2 = paths[i]
let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
- distanceMarker.push(
- new naver.maps.Marker({
- // position: paths[i],
- position: midPoint,
- icon: {
- content: ''+ text +'
',
- anchor: new naver.maps.Point(20, 35)
- },
- map: map
- })
- )
+ const data = {};
+ data.position = midPoint;
+ data.color = '#737373';
+ data.content = text;
+ anchor: new naver.maps.Point(20, 35)
+ createMarker(data);
}
}
@@ -892,18 +851,7 @@ export const FlightPlanDraw = props => {
//거리 재기
const fromMetersToText = (meters) => {
meters = meters || 0;
-
- var km = 1000,
- text = meters;
-
- text = parseFloat(meters.toFixed(1)) + 'm';
-
-
- // if(meters >= km) {
- // text = parseFloat((meters / km).toFixed(1)) + 'km';
- // } else {
- // text = parseFloat(meters.toFixed(1)) + 'm';
- // }
+ let text = parseFloat(meters.toFixed(1)) + 'm';
return text;
}
diff --git a/src/components/map/naver/draw/FlightPlanDraw_Test.js b/src/components/map/naver/draw/FlightPlanDraw_Test.js
new file mode 100644
index 0000000..1958b48
--- /dev/null
+++ b/src/components/map/naver/draw/FlightPlanDraw_Test.js
@@ -0,0 +1,913 @@
+import $ from 'jquery';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction';
+import { InfoModal } from '../../../modal/InfoModal';
+
+export const FlightPlanDraw = props => {
+ const dispatch = useDispatch();
+ const mapControl = useSelector(state => state.controlMapReducer);
+
+ const [pastPolyline, setPolyline] = useState();
+ const [pastBuffer, setBuffer] = useState();
+ const [pastPolygon, setPolygon] = useState();
+ const [pastCircle, setCircle] = useState([]);
+ const [pastDragCircle, setDragCircle] = useState([]);
+
+ const [pastClickEve, setClickEve] = useState();
+ const [pastMarker, setMarker] = useState([]);
+
+ const [figure, setFigure] = useState();
+
+ const [areaDetail, setAreaDetail] = useState();
+
+ const [alertModal, setAlertModal] = useState({
+ isOpen: false,
+ title: '',
+ desc: ''
+ })
+
+ const naver = props.naver;
+ const map = props.map;
+ let mode = props.mode;
+ let dragCircleSize = props.dragCircleSize;
+
+ let areaInfo;
+ let lastDistance;
+
+ let polyline;
+ let guideline;
+ let bufferPolygon;
+
+ let polygon;
+
+ let circle;
+ let radiusline;
+
+ let Eve = {
+ clickEve: '',
+ mousedownEve: '',
+ rightclickEve: ''
+ }
+
+ let dragCircle = [];
+ let dragCircleEve = [];
+
+ let distanceMarker = [];
+
+ const handleBufferList = () => {
+ dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail));
+ }
+
+ useEffect(() => {
+ drawInit();
+ }, [mapControl.drawType])
+
+ useEffect(() => {
+ handleDetailDraw();
+ }, [props.areaCoordList])
+
+ useEffect(() => {
+ if(figure) {
+ props.handleConfirm(props.areaCoordList);
+ setAreaDetail(props.areaCoordList);
+ }
+ }, [figure])
+
+ useEffect(() => {
+ if(pastPolyline) {
+ handleBufferList();
+ }
+ }, [areaDetail])
+
+ const drawInit = () => {
+ if (mapControl.drawType === 'LINE') {
+ onClickButton('LINE');
+ } else if (mapControl.drawType === 'CIRCLE') {
+ onClickButton('CIRCLE');
+ } else if (mapControl.drawType === 'POLYGON') {
+ onClickButton('POLYGON');
+ } else if (mapControl.drawType === 'RESET') {
+ onClickReset('RESET')
+ }
+ }
+
+ const onClickButton = (newMode) => {
+ //console.log('onClickButton');
+
+ clearMode(mode);
+
+ if (mode === newMode) {
+ mode = null;
+ return;
+ }
+
+ // mode = newMode;
+
+ startMode(newMode);
+ }
+
+ const clearMode = (mode) => {
+ //console.log('clearMode')
+
+ // if(!mode) return;
+
+ if (pastPolyline) {
+ // console.log('clear polyline ', pastPolyline)
+ pastPolyline.setMap(null);
+ pastDragCircle.forEach(c => c.setMap(null));
+ pastBuffer.setMap(null);
+ setPolyline();
+ setDragCircle([]);
+ setBuffer();
+ }
+ if (pastCircle.length != 0) {
+ //console.log('clear circle ', pastCircle)
+ pastCircle.forEach(prev => prev.setMap(null))
+ naver.maps.Event.removeListener(pastClickEve);
+
+ setCircle([]);
+ }
+ if (pastPolygon) {
+ // console.log('clear polygon ', pastPolygon)
+ pastPolygon.setMap(null);
+ pastDragCircle.forEach(c => c.setMap(null));
+
+ setPolygon();
+ setDragCircle([]);
+ }
+ if (pastMarker.length != 0) {
+ // console.log('clear marker ', pastMarker)
+ pastMarker.forEach(m => m.setMap(null))
+ setMarker([]);
+ }
+
+ finishDraw();
+ props.handleInitCoordinates();
+ }
+
+ const startMode = (mode) => {
+ // console.log('startMode')
+
+ if (!mode) return;
+
+ if(pastClickEve) {
+ naver.maps.Event.removeListener(pastClickEve);
+ }
+ if (mode === 'LINE') {
+ Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) });
+ setClickEve(Eve.clickEve);
+ } else if (mode === 'POLYGON') {
+ Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) });
+ setClickEve(Eve.clickEve);
+ } else if (mode === 'CIRCLE') {
+ Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) });
+ setClickEve(Eve.clickEve);
+ }
+ }
+
+ const removeListener = () => {
+ // console.log('removeListener')
+
+ naver.maps.Event.removeListener(Eve.clickEve);
+ naver.maps.Event.removeListener(pastClickEve);
+ setClickEve();
+
+ naver.maps.Event.removeListener(Eve.mousedownEve);
+ naver.maps.Event.removeListener(Eve.rightclickEve);
+ if (!circle) $(document).off('mousemove.measure');
+ }
+
+ const finishDraw = () => {
+ //console.log('finishDraw')
+ removeListener();
+
+ if (polyline) {
+ if (guideline) {
+ guideline.setMap(null);
+ guideline = '';
+ }
+
+ let polypaths = polyline.getPath()._array;
+
+ setMarker(distanceMarker)
+ distanceMarker.forEach(c => c.setMap(null))
+
+ if (polypaths.length >= 2) {
+ setPolyline(polyline);
+ setAreaInfo(polypaths);
+ } else {
+ setAlertModal({
+ isOpen: true,
+ title: '좌표 최소 개수',
+ desc: '좌표를 두 개 점으로 이어주세요.'
+ })
+
+ polyline.setMap(null);
+ polyline = '';
+ }
+
+ setFigure(polyline)
+
+ } else if (polygon) {
+ let path = polygon.getPath();
+ path.pop();
+
+ let polygonpaths = polygon.getPath()._array;
+
+ //마지막 path와 시작점을 이어주는 라인 생성
+ lastDistance = guideline.getDistance();
+ guideline.getPath().push(polygonpaths[0]);
+ var distance = guideline.getDistance();
+ // addMileStone(polygonpaths[0], fromMetersToText(distance - lastDistance));
+
+ setMarker(distanceMarker);
+ distanceMarker.forEach(c => c.setMap(null))
+
+ if(polygonpaths.length >= 3) {
+ setPolygon(polygon);
+ setAreaInfo(polygonpaths);
+ } else {
+ setAlertModal({
+ isOpen: true,
+ title: '좌표 최소 개수',
+ desc: '좌표를 세 개 점으로 이어주세요.'
+ })
+ polygon.setMap(null)
+ polygon = '';
+ }
+
+ setFigure(polygon)
+ }
+ }
+
+ const onClickPolyline = (e) => {
+ //console.log('onClickPolyline')
+ var coord = e.coord;
+
+ if (!polyline) {
+ //가이드라인
+ guideline = new naver.maps.Polyline({
+ strokeColor: '#283046',
+ strokeWeight: 2,
+ strokeOpacity: 0.3,
+ path: [coord],
+ map: map
+ });
+ // lastDistance = guideline.getDistance();
+
+ //실제 사용되는 라인
+ polyline = new naver.maps.Polyline({
+ strokeLineCap: 'round',
+ strokeLineJoin: 'round',
+ strokeColor: '#283046',
+ // strokeColor: '#ff0000',
+ strokeWeight: 1,
+ strokeOpacity: 1,
+ path: [coord],
+ map: map
+ });
+
+ Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
+ $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); });
+
+ lastDistance = polyline.getDistance();
+ addMileStone(coord, 'Start')
+ } else {
+ guideline.setPath([e.coord]);
+ polyline.getPath().push(coord);
+
+ var distance = polyline.getDistance();
+ // addMileStone(coord, fromMetersToText(distance - lastDistance));
+ addMileStone(polyline.getPath()._array, fromMetersToText(distance - lastDistance));
+ lastDistance = distance;
+ }
+ }
+
+ const onMouseMovePolyline = (e) => {
+ // console.log('onMouseMovePolyline')
+ var 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 onClickPolygon = (e) => {
+ // console.log('onClickPolygon')
+ var coord = e.coord;
+ // let guide;
+
+ if (!polygon) {
+ polygon = new naver.maps.Polygon({
+ strokeColor: '#283046',
+ strokeOpacity: 1,
+ fillColor: '#7367F0',
+ fillOpacity: 0.1,
+ paths: [coord],
+ map: map
+ });
+
+ //거리재기를 위한 가이드
+ guideline = new naver.maps.Polyline({
+ path: [coord],
+ map: map
+ });
+ guideline.setVisible(false);
+
+ Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
+ $(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) });
+
+ lastDistance = guideline.getDistance();
+ addMileStone(coord, 'Start')
+ } else {
+ polygon.getPath().push(coord);
+ guideline.getPath().push(coord);
+
+ // console.log(polygon.getPath()._array, 'polygon')
+ // console.log(guideline.getPath()._array.length, 'guide')
+ // console.log(polygon.getPath()._array.length)
+
+ var distance = guideline.getDistance();
+ // addMileStone(coord, fromMetersToText(distance - lastDistance));
+ addMileStone(guideline.getPath()._array, fromMetersToText(distance - lastDistance));
+ lastDistance = distance;
+ }
+ }
+
+ const onMouseMovePolygon = (e) => {
+ //console.log('onMouseMovePolygon')
+ if (!polygon) return;
+
+ var 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 onClickCircle = (e) => {
+ // console.log('onClickCircle')
+ var coord = e.coord;
+
+ if(!circle) {
+ radiusline = new naver.maps.Polyline({
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.6,
+ path: [coord],
+ // map: map
+ })
+ lastDistance = radiusline.getDistance();
+
+ circle = new naver.maps.Circle({
+ strokeColor: '#283046',
+ strokeOpacity: 1,
+ fillColor: '#7367F0',
+ fillOpacity: 0.1,
+ center: coord,
+ radius: 100,
+ map: map,
+ clickable: true
+ })
+
+ Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
+
+ addMileStone(coord, fromMetersToText(100));
+ } else {
+ circle.setCenter(coord);
+ circle.setRadius(100);
+ distanceMarker.setPosition(coord)
+ }
+ setCircle(prev => ([...prev, circle]))
+ setAreaInfo('');
+ setMarker(distanceMarker);
+ setFigure(circle.center);
+ }
+
+ const onMouseDownDrag = (index) => {
+ // console.log('onMouseDownDrag')
+
+ map.setOptions({
+ draggable: false,
+ pinchZoom: false,
+ scrollWheel: false,
+ keyboardShortcuts: false,
+ disableDoubleTapZoom: true,
+ disableDoubleClickZoom: true,
+ disableTwoFingerTapZoom: true
+ })
+
+ if(circle) {
+ removeListener();
+ }
+
+ $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) });
+ $(document).on('mouseup.measure', function () { onMouseUpDrag(index) });
+ }
+
+ const onMouseMoveDrag = (e, index) => {
+ //console.log('onMouseMoveDrag')
+
+ var proj = map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY));
+
+ if (polyline) {
+ var polypaths = polyline.getPath()._array;
+
+ let movepath = [];
+ for (let i = 0; i < polypaths.length; i++) {
+ let path;
+ if (i === index) {
+ path = coord;
+ } else {
+ path = polypaths[i]
+ }
+ movepath.push(path);
+ }
+
+ polyline.setPath(movepath);
+
+ } else if (polygon) {
+ var polygonpaths = polygon.getPath()._array;
+
+ let movepath = [];
+ for (let i = 0; i < polygonpaths.length; i++) {
+ let path;
+ if (i === index) {
+ path = coord;
+ } else {
+ path = polygonpaths[i]
+ }
+ movepath.push(path);
+ }
+ polygon.setPaths(movepath)
+
+ } else if (circle) {
+ var center = circle.getCenter(),
+ r = proj.getDistance(coord, center);
+
+ circle.setRadius(r);
+ }
+
+ if (!circle) {
+ dragCircle[index].setCenter(coord);
+ }
+ }
+
+ const onMouseUpDrag = (index) => {
+ // console.log('onMouseUpDrag')
+
+ map.setOptions({
+ draggable: true,
+ pinchZoom: true,
+ scrollWheel: true,
+ keyboardShortcuts: true,
+ disableDoubleTapZoom: false,
+ disableDoubleClickZoom: false,
+ disableTwoFingerTapZoom: false
+ })
+
+ if (polyline) {
+ var path = polyline.getPath()._array;
+ setPolyline(polyline);
+ setAreaInfo(path);
+ setFigure(polyline);
+ }
+
+ if (polygon) {
+ var path = polygon.getPath()._array;
+ setPolygon(polygon);
+ setAreaInfo(path);
+ setFigure(polygon);
+
+ // if(pastMarker.length !=0) {
+ // //마커 위치 변경
+ // pastMarker[index].setPosition(path[index]);
+
+ // //마커 content 변경
+ // if(index == 0) {
+ // //시작 지점 이동
+ // pastMarker[index].setIcon({
+ // content: ''+ 'Start' +'
',
+ // anchor: new naver.maps.Point(-5, -5)
+ // })
+ // } else {
+ // let isLastIndex;
+ // if(pastMarker.length === index+1) {
+ // //종료 지점 이동(index 마커만 변경)
+ // isLastIndex = 1;
+ // } else {
+ // //사이 지점 이동(index+1 마커도 변경)
+ // isLastIndex = 2;
+ // }
+
+ // for(let i = index; i < index+isLastIndex; i++) {
+ // var proj = map.getProjection(),
+ // r = proj.getDistance(pastMarker[i-1].position, pastMarker[i].position);
+
+ // let text = fromMetersToText(r);
+ // pastMarker[i].setIcon({
+ // content: ''+ text +'
',
+ // anchor: new naver.maps.Point(-5, -5)
+ // })
+ // }
+ // }
+ // }
+ }
+
+ $(document).off('mousemove.measure');
+ $(document).off('mouseup.measure');
+
+ if (circle) {
+ Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })
+ setClickEve(Eve.clickEve);
+
+ setCircle(prev => ([...prev, circle]))
+ setAreaInfo('');
+ setFigure(circle)
+ }
+ }
+
+ const setAreaInfo = (path) => {
+ let bufferZone = 100;
+ if(polygon) bufferZone = 0;
+
+ areaInfo = {
+ coordinates: [],
+ bufferZone: bufferZone,
+ };
+
+ let prePath = [];
+ if (path) {
+ path.forEach((item) => {
+ const p = {
+ lat: item.y,
+ lon: item.x
+ }
+
+ prePath.push(p);
+ })
+ // path.forEach(prev=> prePath.push([prev.x, prev.y]))
+ }
+
+ if (polyline) {
+ areaInfo.coordinates = prePath;
+ areaInfo.areaType = 'LINE';
+ } else if (polygon) {
+ areaInfo.coordinates = prePath;
+ areaInfo.areaType = 'POLYGON';
+ } else if (circle) {
+ const point = {
+ lat: circle.getCenter().y,
+ lon: circle.getCenter().x
+ }
+
+ areaInfo.coordinates.push(point);
+ areaInfo.bufferZone = circle.getRadius();
+ areaInfo.areaType = 'CIRCLE';
+ }
+ props.handleCoordinates(areaInfo);
+ }
+
+ const onClickReset = () => {
+ // console.log('onClickRest - ', mapControl.drawType);
+ if (mapControl.drawType === 'RESET') {
+ clearMode('RESET');
+ }
+ }
+
+ const handleDetailDraw = () => {
+ if (props.areaCoordList) {
+ // console.log('handleDetailDraw')
+
+ const areas = props.areaCoordList[0];
+
+ const paths = [];
+ areas.coordList.forEach((coord) => {
+ const path = new naver.maps.LatLng(coord.lat, coord.lon)
+
+ paths.push(path);
+ });
+
+ if (areas.areaType && areas.areaType === 'LINE') {
+ //polyline 생성
+ if(pastPolyline) {
+ pastPolyline.setMap(null);
+ pastDragCircle.forEach(c => c.setMap(null));
+ }
+ polyline = new naver.maps.Polyline({
+ strokeLineCap: 'round',
+ strokeLineJoin: 'round',
+ strokeColor: '#283046',
+ strokeWeight: 1,
+ strokeOpacity: 1,
+ path: paths,
+ map: map
+ });
+
+ setPolyline(polyline)
+
+ //dragCircle 생성
+ for(let i = 0; i < paths.length; i++) {
+ dragCircle.push(
+ new naver.maps.Circle({
+ strokestrokeOpacity: 1,
+ strokeColor: '#000000',
+ fillColor: '#ffffff',
+ fillOpacity: 1,
+ center: paths[i],
+ radius: 17,
+ // radius: dragCircleSize,
+ map: map,
+ clickable: true
+ })
+ )
+ dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
+
+ }
+
+ setDragCircle(dragCircle);
+
+ //bufferline 생성
+ if (areas.bufferCoordList) {
+ const bufferPaths = [];
+
+ areas.bufferCoordList.forEach((bfCoord) => {
+ const path = new naver.maps.LatLng(bfCoord.lat, bfCoord.lon);
+
+ bufferPaths.push(path);
+ });
+ // console.log('buffer test : ',areas.bufferCoordList);
+
+ if(pastBuffer) {
+ pastBuffer.setMap(null);
+ }
+
+ bufferPolygon = new naver.maps.Polyline({
+ strokeColor: '#283046',
+ strokeOpacity: 1,
+ strokeStyle: [2, 3],
+ path: bufferPaths,
+ map: map
+ });
+ setBuffer(bufferPolygon);
+ }
+
+ //marker 생성
+ if(pastMarker) {
+ pastMarker.forEach(c => c.setMap(null));
+ }
+
+ for(let i = 0; i < paths.length; i++) {
+ if(i == 0) {
+ distanceMarker.push(
+ new naver.maps.Marker({
+ position: paths[i],
+ icon: {
+ content: ''+ 'Start' +'
',
+ anchor: new naver.maps.Point(45, 35)
+ }, map: map
+ })
+ )
+ } else {
+ var proj = map.getProjection(),
+ r = proj.getDistance(paths[i-1], paths[i]);
+
+ let text = fromMetersToText(r);
+
+ let dis1 = paths[i-1]
+ let dis2 = paths[i]
+ let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
+
+ distanceMarker.push(
+ new naver.maps.Marker({
+ // position: paths[i],
+ position: midPoint,
+ icon: {
+ content: ''+ text +'
',
+ anchor: new naver.maps.Point(20, 35)
+ }, map: map
+ })
+ )
+ }
+ }
+ setMarker(distanceMarker);
+ }
+
+ if (areas.areaType && areas.areaType === 'POLYGON') {
+ //polygon 생성
+ if(pastPolygon) {
+ pastPolygon.setMap(null);
+ pastDragCircle.forEach(c => c.setMap(null));
+ }
+ polygon = new naver.maps.Polygon({
+ strokeColor: '#283046',
+ strokeOpacity: 1,
+ fillColor: '#7367F0',
+ fillOpacity: 0.1,
+ paths: paths,
+ map: map
+ });
+
+ setPolygon(polygon);
+
+ //dragCircle 생성
+ for(let i = 0; i < paths.length; i++) {
+ dragCircle.push(
+ new naver.maps.Circle({
+ strokestrokeOpacity: 1,
+ strokeColor: '#000000',
+ fillColor: '#ffffff',
+ fillOpacity: 1,
+ center: paths[i],
+ radius: 15,
+ // radius: dragCircleSize,
+ map: map,
+ clickable: true
+ })
+ )
+ dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
+ }
+
+ setDragCircle(dragCircle);
+
+
+ //marker 생성
+ if(pastMarker) {
+ pastMarker.forEach(c => c.setMap(null))
+ }
+
+ for(let i = 0; i < paths.length+1; i++) {
+ //start
+ if(i == 0) {
+ distanceMarker.push(
+ new naver.maps.Marker({
+ position: paths[0],
+ icon: {
+ content: ''+ 'Start' +'
',
+ anchor: new naver.maps.Point(45, 35)
+ },
+ map: map
+ })
+ )
+ //첫좌표이자 마지막 좌표
+ } else if(i == paths.length) {
+ var proj = map.getProjection(),
+ r = proj.getDistance(paths[0], paths[i-1]);
+
+ let text = fromMetersToText(r);
+
+ let dis1 = paths[0]
+ let dis2 = paths[i-1]
+ let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
+
+ distanceMarker.push(
+ new naver.maps.Marker({
+ // position: paths[0],
+ position: midPoint,
+ icon: {
+ content: ''+ text +'
',
+ anchor: new naver.maps.Point(0, 35)
+ },
+ map: map
+ })
+ )
+ //그 외 나머지
+ } else {
+ var proj = map.getProjection(),
+ r = proj.getDistance(paths[i-1], paths[i]);
+
+ let text = fromMetersToText(r);
+
+ let dis1 = paths[i-1]
+ let dis2 = paths[i]
+ let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
+
+ distanceMarker.push(
+ new naver.maps.Marker({
+ // position: paths[i],
+ position: midPoint,
+ icon: {
+ content: ''+ text +'
',
+ anchor: new naver.maps.Point(20, 35)
+ },
+ map: map
+ })
+ )
+ }
+ }
+
+ setMarker(distanceMarker);
+ }
+
+
+ if (areas.areaType && areas.areaType === 'CIRCLE') {
+ //circle 생성
+ if(pastCircle) {
+ pastCircle.forEach(prev => prev.setMap(null));
+ }
+
+ circle = new naver.maps.Circle({
+ strokeColor: '#283046',
+ strokeOpacity: 1,
+ // fillColor: '#ff0000',
+ fillColor: '#7367F0',
+ fillOpacity: 0.1,
+ center: paths[0],
+ radius: areas.bufferZone,
+ map: map,
+ clickable: true
+ });
+ Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
+
+ setCircle([circle]);
+
+ //marker 생성
+ if(pastMarker) {
+ pastMarker.forEach(c => c.setMap(null));
+ }
+
+ let text = fromMetersToText(areas.bufferZone);
+ distanceMarker = new naver.maps.Marker({
+ position: paths[0],
+ icon: {
+ content: ''+ text +'
',
+ anchor: new naver.maps.Point(-5, -5)
+ },
+ map: map
+ })
+ setMarker([distanceMarker]);
+ }
+ }
+ }
+
+ //div로 보여주기
+ const addMileStone = (coord, text) => {
+ let content;
+ let midPoint;
+ let anchor;
+ if(text == 'Start') {
+ content = ''+ text +'
'
+ midPoint = coord
+ anchor = new naver.maps.Point(45, 35)
+ } else {
+ content = ''+ text +'
'
+ let dis1 = coord[coord.length-2];
+ let dis2 = coord[coord.length-1];
+ if(circle) {
+ midPoint = coord
+ } else {
+ midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
+ }
+ anchor = new naver.maps.Point(20, 35)
+ }
+
+ var marker = new naver.maps.Marker({
+ position: midPoint,
+ icon: {
+ content: content,
+ anchor: anchor
+ },
+ // map: map
+ });
+ // marker.setVisible(false)
+
+
+ if(circle) {
+ distanceMarker = marker;
+ } else {
+ marker.setMap(map);
+ distanceMarker.push(marker);
+ }
+ }
+
+ //거리 재기
+ const fromMetersToText = (meters) => {
+ meters = meters || 0;
+
+ var km = 1000,
+ text = meters;
+
+ text = parseFloat(meters.toFixed(1)) + 'm';
+
+
+ // if(meters >= km) {
+ // text = parseFloat((meters / km).toFixed(1)) + 'km';
+ // } else {
+ // text = parseFloat(meters.toFixed(1)) + 'm';
+ // }
+ return text;
+ }
+
+ return(
+
+ )
+};
\ No newline at end of file