diff --git a/src/components/map/naver/draw/FlightPlanDraw.js b/src/components/map/naver/draw/FlightPlanDraw.js
index 7d5a967..9056860 100644
--- a/src/components/map/naver/draw/FlightPlanDraw.js
+++ b/src/components/map/naver/draw/FlightPlanDraw.js
@@ -69,7 +69,6 @@ export const FlightPlanDraw = props => {
console.log(">>>>>>>>>>>>>>>>>>>>")
handleBufferList();
}
-
}, [areaDetail])
const drawInit = () => {
@@ -130,7 +129,8 @@ export const FlightPlanDraw = props => {
}
if (pastMarker.length != 0) {
console.log('clear marker ', pastMarker)
- pastMarker.forEach(m => m.setMap(null));
+ pastMarker.forEach(m => m.setMap(null))
+ setMarker([]);
}
finishDraw();
@@ -181,11 +181,14 @@ export const FlightPlanDraw = props => {
let polypaths = polyline.getPath()._array;
+ setMarker(distanceMarker)
+ distanceMarker.forEach(c => c.setMap(null))
+
if (polypaths.length >= 2) {
setPolyline(polyline);
setAreaInfo(polypaths);
} else {
- polyline.setMap(null);
+ // polyline.setMap(null);
polyline = '';
}
@@ -198,6 +201,15 @@ export const FlightPlanDraw = props => {
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))
+
setPolygon(polygon);
setAreaInfo(polygonpaths);
@@ -219,7 +231,7 @@ export const FlightPlanDraw = props => {
path: [coord],
map: map
});
- lastDistance = guideline.getDistance();
+ // lastDistance = guideline.getDistance();
//실제 사용되는 라인
polyline = new naver.maps.Polyline({
@@ -227,7 +239,7 @@ export const FlightPlanDraw = props => {
strokeLineJoin: 'round',
// strokeColor: '#283046',
strokeColor: '#ff0000',
- strokeWeight: 3,
+ // strokeWeight: 3,
strokeOpacity: 1,
path: [coord],
map: map
@@ -264,6 +276,7 @@ export const FlightPlanDraw = props => {
const onClickPolygon = (e) => {
console.log('onClickPolygon')
var coord = e.coord;
+ // let guide;
if (!polygon) {
polygon = new naver.maps.Polygon({
@@ -275,10 +288,25 @@ export const FlightPlanDraw = props => {
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);
+
+ var distance = guideline.getDistance();
+ addMileStone(coord, fromMetersToText(distance - lastDistance));
+ lastDistance = distance;
}
}
@@ -306,7 +334,7 @@ export const FlightPlanDraw = props => {
strokeStyle: [4, 4],
strokeOpacity: 0.6,
path: [coord],
- map: map
+ // map: map
})
lastDistance = radiusline.getDistance();
@@ -317,18 +345,22 @@ export const FlightPlanDraw = props => {
fillOpacity: 0.1,
center: coord,
radius: 100,
- // map: map,
+ 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('');
- setFigure(circle.center)
+ setMarker(distanceMarker);
+ setFigure(circle.center);
}
const onMouseDownDrag = (index) => {
@@ -349,7 +381,7 @@ export const FlightPlanDraw = props => {
}
$(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) });
- $(document).on('mouseup.measure', function () { onMouseUpDrag() });
+ $(document).on('mouseup.measure', function () { onMouseUpDrag(index) });
}
const onMouseMoveDrag = (e, index) => {
@@ -390,16 +422,9 @@ export const FlightPlanDraw = props => {
polygon.setPaths(movepath)
} else if (circle) {
- // var circlepath = radiusline.getPath(),
- // center = circle.getCenter(),
- // r = proj.getDistance(coord, center);
var center = circle.getCenter(),
r = proj.getDistance(coord, center);
- // if (circlepath.getLength() === 2) {
- // circlepath.pop();
- // }
- // circlepath.push(coord);
circle.setRadius(r);
}
@@ -408,7 +433,7 @@ export const FlightPlanDraw = props => {
}
}
- const onMouseUpDrag = () => {
+ const onMouseUpDrag = (index) => {
console.log('onMouseUpDrag')
map.setOptions({
@@ -433,6 +458,40 @@ 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');
@@ -495,7 +554,7 @@ export const FlightPlanDraw = props => {
const handleDetailDraw = () => {
if (props.areaCoordList) {
- // console.log('handleDetailDraw')
+ console.log('handleDetailDraw')
const areas = props.areaCoordList[0];
@@ -516,7 +575,7 @@ export const FlightPlanDraw = props => {
strokeLineCap: 'round',
strokeLineJoin: 'round',
strokeColor: '#283046',
- strokeWeight: 3,
+ strokeWeight: 1,
strokeOpacity: 1,
path: paths,
map: map
@@ -543,6 +602,7 @@ export const FlightPlanDraw = props => {
setDragCircle(dragCircle);
+ //bufferline 생성
if (areas.bufferCoordList) {
const bufferPaths = [];
@@ -557,19 +617,50 @@ export const FlightPlanDraw = props => {
pastBuffer.setMap(null);
}
- // console.log(bufferPaths)
- //bufferline 생성
bufferPolygon = new naver.maps.Polyline({
strokeColor: '#283046',
strokeOpacity: 1,
- // fillColor: '#7367F0',
- // fillOpacity: 0.1,
+ strokeStyle: [2, 3],
path: bufferPaths,
map: map
});
- // console.log(bufferPolygon);
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(-5, -5)
+ }, map: map
+ })
+ )
+ } else {
+ var proj = map.getProjection(),
+ r = proj.getDistance(paths[i-1], paths[i]);
+
+ let text = fromMetersToText(r);
+
+ distanceMarker.push(
+ new naver.maps.Marker({
+ position: paths[i],
+ icon: {
+ content: ''+ text +'
',
+ anchor: new naver.maps.Point(-5, -5)
+ }, map: map
+ })
+ )
+ }
+ }
+ setMarker(distanceMarker);
}
if (areas.areaType && areas.areaType === 'POLYGON') {
@@ -607,19 +698,70 @@ export const FlightPlanDraw = props => {
}
setDragCircle(dragCircle);
+
+
+ //marker 생성
+ if(pastMarker) {
+ pastMarker.forEach(c => c.setMap(null))
+ }
+
+ for(let i = 0; i < paths.length+1; i++) {
+ if(i == 0) {
+ distanceMarker.push(
+ new naver.maps.Marker({
+ position: paths[i],
+ icon: {
+ content: ''+ 'Start' +'
',
+ anchor: new naver.maps.Point(-5, -5)
+ },
+ map: map
+ })
+ )
+ } else if(i == paths.length) {
+ var proj = map.getProjection(),
+ r = proj.getDistance(paths[0], paths[i-1]);
+
+ let text = fromMetersToText(r);
+
+ distanceMarker.push(
+ new naver.maps.Marker({
+ position: paths[0],
+ icon: {
+ content: ''+ text +'
',
+ 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);
+
+ distanceMarker.push(
+ new naver.maps.Marker({
+ position: paths[i],
+ icon: {
+ content: ''+ text +'
',
+ anchor: new naver.maps.Point(-5, -5)
+ },
+ map: map
+ })
+ )
+ }
+ }
+
+ setMarker(distanceMarker);
}
+
if (areas.areaType && areas.areaType === 'CIRCLE') {
//circle 생성
if(pastCircle) {
pastCircle.forEach(prev => prev.setMap(null));
}
- // radiusline = new naver.maps.Polyline({
- // strokeStyle: [4, 4],
- // strokeOpacity: 0.6,
- // path: [coord],
- // map: map
- // })
+
circle = new naver.maps.Circle({
strokeColor: '#283046',
strokeOpacity: 1,
@@ -634,41 +776,55 @@ export const FlightPlanDraw = props => {
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]);
}
}
}
- const addMileStone = (coord, text, css) => {
- if(distanceMarker) distanceMarker = [];
-
+ //div로 보여주기
+ const addMileStone = (coord, text) => {
let content;
if(text == 'Start') {
content = ''+ text +'
'
} else {
- content = ''+ text +'
'
+ content = ''+ text +'
'
}
- var _ms = new naver.maps.Marker({
+ var marker = new naver.maps.Marker({
position: coord,
icon: {
content: content,
anchor: new naver.maps.Point(-5, -5)
},
- map: map
+ // map: map
});
+ // marker.setVisible(false)
- var msElement = $(_ms.getElement());
-
- if(css) {
- msElement.css(css);
+
+ if(circle) {
+ distanceMarker = marker;
} else {
- msElement.css('font-size', '13px');
+ marker.setMap(map);
+ distanceMarker.push(marker);
}
-
- distanceMarker.push(_ms);
- setMarker(prev => ([...prev, _ms]))
}
+ //거리 재기
const fromMetersToText = (meters) => {
meters = meters || 0;