diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js
index 64d466e..57bc64e 100644
--- a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js
+++ b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js
@@ -10,7 +10,7 @@ import {
Button
} from 'reactstrap';
-const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, handleBufferList, data }) => {
+const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, handleBufferList, data ,mapControl}) => {
const coordList = data ? data[0].coordList : null;
@@ -91,6 +91,8 @@ const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, handl
id='bufferZone'
name='bufferZone'
bsSize='sm'
+ readOnly={coordList[0].lat && (data[0].areaType && data[0].areaType != ("POLYGON")) ? false : true }
+
placeholder='반경'
value={data ? data[0].bufferZone : ''}
onChange={(e) => {
@@ -107,6 +109,7 @@ const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, handl
className='mr-1'
color='primary'
size='sm'
+ disabled={coordList[0].lat && (data[0].areaType && data[0].areaType != ("POLYGON")) ? false : true }
onClick={() => handleBufferList()}
>
적용
diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js
index 52681a8..59539f0 100644
--- a/src/components/basis/flight/plan/FlightPlanAreaMap.js
+++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js
@@ -3,17 +3,12 @@ import {
Card,
CardBody,
Button,
- Row,
- Label,
- Input,
- Col,
- FormGroup
} from 'reactstrap';
import { useDispatch, useSelector } from 'react-redux';
import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction';
import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone';
import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions';
-import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest';
+import { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw';
import { initFlight, initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel';
import { AREA_COORDINATE_LIST_SAVE } from '../../../../modules/basis/flight/actions/basisFlightAction';
@@ -29,7 +24,7 @@ const FlightPlanAreaMap = (props) => {
const [mode, setMode] = useState();
const [mapAreaCoordList, setMapAreaCoordList] = useState(initFlightBas.initDetail.areaList);
- useEffect(() => {
+ useEffect(() => {
NaverMapInit();
}, []);
@@ -41,12 +36,10 @@ const FlightPlanAreaMap = (props) => {
ModeInit();
}, [mapControl.drawType]);
- useEffect(() => {
+ useEffect(() => {
setMapAreaCoordList(areaCoordList)
}, [areaCoordList]);
- const [areaDetail, setAreaDetail] = useState(initFlightBas.initDetail.areaList);
-
const ModeInit = () => {
setMode(mapControl.drawType)
@@ -73,23 +66,22 @@ const FlightPlanAreaMap = (props) => {
dispatch(drawTypeChangeAction(val));
};
- const handleBufferList = () => {
- dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail));
- }
+ // const handleBufferList = () => {
+ // dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail));
+ // }
const handleInitCoordinates = () => {
- const init = initFlightBas.initDetail.areaList.concat();
- dispatch(AREA_COORDINATE_LIST_SAVE(init))
+ const init = initFlightBas.initDetail.areaList.concat();
+ dispatch(AREA_COORDINATE_LIST_SAVE(init))
}
-
- const handleCoordinates = (areaInfo) => {
+
+ const handleCoordinates = (areaInfo) => {
const initAreaList = initFlightBas.initDetail.areaList.concat()
const coordList = [];
// radius = 10;
areaInfo.coordinates.forEach((c, i) => {
const coord = Object.assign({}, initFlightBas['coord']);
-
coord.lat = c.lat;
coord.lon = c.lon;
@@ -125,23 +117,24 @@ const FlightPlanAreaMap = (props) => {
- {isMapLoad ?
: null}
-
props.handleConfirm(mapAreaCoordList)}
>
확인
-
+ */}
{
- const {naver} = props;
- const {map} = props;
-
+ const dispatch = useDispatch();
+ const mapControl = useSelector(state => state.controlMapReducer);
+
+ const { areaCoordList, detail } = useSelector(state => state.flightState);
+ const [areaDetail, setAreaDetail] = useState(initFlightBas.initDetail.areaList);
+
+ 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 naver = props.naver;
+ const map = props.map;
+ let mode = props.mode;
+
+ 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(() => {
+ props.handleConfirm(props.areaCoordList);
+ // handleBufferList();
+
+ console.log(props.areaCoordList, '>>>>>>areaCoordList')
+ }, [figure])
+
+ 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')
+ }
+ }
- var Measure = function(buttons) {
- this.$btnLine = buttons.line;
- this.$btnPolygon = buttons.polygon;
- this.$btnCircle = buttons.circle;
- this.$btnRectangle = buttons.rectangle;
+ const onClickButton = (newMode) => {
+ console.log('onClickButton');
- this._mode = null;
+ clearMode(mode);
- this._bindDOMEvents();
- };
+ if (mode === newMode) {
+ mode = null;
+ return;
+ }
- $.extend(
- Measure.prototype,{
- constructor: Measure,
+ // mode = newMode;
- setMap: function(map) {
- console.log('setMap')
- if (this.map) {
- this._unbindMap(this.map);
- }
+ startMode(newMode);
+ }
- this.map = map;
+ const clearMode = (mode) => {
+ console.log('clearMode')
- 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();
- } if (mode === 'rectangle') {
- this._startRectangle();
- }
- },
-
- _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)),
- naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this))
- ];
- },
-
- _startRectangle: function() {
- console.log('startRectangle')
- var map = this.map;
- this._rectangleListeners = [
- naver.maps.Event.addListener(map, 'click', this._onClickRectangle.bind(this)),
- naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.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(!mode) return;
- if (this._polyline) {
- // console.log(this._polyline.getPath()._array, 'path')
- let polypaths = this._polyline.getPath()._array;
-
- //파싱
- let polypathJSON = new Array();
- for(let i = 0; i< polypaths.length; i++) {
-
- //파싱
- let obj = new Object();
+ 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);
- obj.x = '' + polypaths[i]._lng + '';
- obj.y = '' + polypaths[i]._lat + '';
+ setCircle([]);
+ }
+ if (pastPolygon) {
+ console.log('clear polygon ', pastPolygon)
+ pastPolygon.setMap(null);
+ pastDragCircle.forEach(c => c.setMap(null));
- obj = JSON.stringify(obj);
- polypathJSON.push(JSON.parse(obj));
- }
- console.log(polypathJSON, 'json polyline path')
+ setPolygon();
+ setDragCircle([]);
+ }
+ if (pastMarker.length != 0) {
+ console.log('clear marker ', pastMarker)
+ pastMarker.forEach(m => m.setMap(null));
+ }
+ finishDraw();
+ props.handleInitCoordinates();
+ }
- //버퍼 생성에 필요한 coordinates 배열 변환
- let lineStringPaths = [];
- for(let i = 0; i < this._polyline.getPath().length; i++) {
- lineStringPaths.push([this._polyline.getPath()._array[i].x, this._polyline.getPath()._array[i].y]);
- }
- console.log(lineStringPaths, 'polyline path')
-
- //버퍼 생성을 위한 line 객체
- const originalGeojson = {
- type: "FeatureCollection",
- features: [
- {
- type: "Feature",
- properties: {},
- geometry: {
- type: "LineString",
- coordinates: lineStringPaths
- }
- }
- ]
- };
- console.log(originalGeojson)
-
- //버퍼 객체
- const bufferObj = buffer(originalGeojson, 50, {units:'meters'});
-
- //버퍼 라인 생성
- let bufferPath = bufferObj.features[0].geometry.coordinates[0];
- console.log(bufferPath, 'buffer path')
-
- this.bufferPolyline = new naver.maps.Polyline({
- strokeColor: '#ff0000',
- strokeWeight: 2,
- strokeStyle: [4, 4],
- strokeOpacity: 0.6,
- path : bufferPath,
- map: map
- });
+ const startMode = (mode) => {
+ console.log('startMode')
- // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯
- // this._polyline.setMap(null)
- delete this._polyline;
+ 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') {
+ setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }))
+ }
+ }
+
+ const removeListener = () => {
+ console.log('removeListener')
+
+ naver.maps.Event.removeListener(Eve.clickEve);
+ naver.maps.Event.removeListener(pastClickEve);
+ 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 = '';
}
- //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();
+ let polypaths = polyline.getPath()._array;
- delete this._polygon;
+ if (polypaths.length >= 2) {
+ setPolyline(polyline);
+ setAreaInfo(polypaths);
+ } else {
+ polyline.setMap(null);
+ polyline = '';
}
- this.$btnPolygon.removeClass('control-on').blur();
+ polyline.setMap(null)
+ setFigure(polyline)
- this._mode = null;
- },
+ } else if (polygon) {
+ let path = polygon.getPath();
+ path.pop();
- _finishCircle: function() {
- console.log('finishCircle')
+ let polygonpaths = polygon.getPath()._array;
- naver.maps.Event.removeListener(this._circleListeners);
- delete this._circleListeners;
+ setPolygon(polygon);
+ setAreaInfo(polygonpaths);
- $(document).off('mousemove.measure');
+ polygon.setMap(null)
+ 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: 3,
+ strokeOpacity: 1,
+ path: [coord],
+ map: map
+ });
- 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;
- }
+ Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
+ $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); });
- this.$btnCircle.removeClass('control-on').blur();
+ lastDistance = polyline.getDistance();
+ addMileStone(coord, 'Start')
+ } else {
+ guideline.setPath([e.coord]);
+ polyline.getPath().push(coord);
- // delete this._lastDistance;
- this._mode = null;
- },
+ var distance = polyline.getDistance();
+ addMileStone(coord, fromMetersToText(distance - lastDistance));
+ lastDistance = distance;
+ }
+ }
- _finishRectangle: function() {
- console.log('finishRectangle')
+ const onMouseMovePolyline = (e) => {
+ console.log('onMouseMovePolyline')
+ var proj = map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ path = guideline.getPath();
- naver.maps.Event.removeListener(this._rectangleListeners);
- delete this._rectangleListeners;
+ if (path.getLength() === 2) {
+ path.pop();
+ }
- $(document).off('mousemove.measure');
+ path.push(coord);
+ }
+
+ const onClickPolygon = (e) => {
+ console.log('onClickPolygon')
+ var coord = e.coord;
+
+ if (!polygon) {
+ polygon = new naver.maps.Polygon({
+ strokeColor: '#283046',
+ strokeOpacity: 1,
+ fillColor: '#7367F0',
+ fillOpacity: 0.1,
+ paths: [coord],
+ map: map
+ });
- if(this._rectangle) {
- this._guiderectangle.setMap(null);
- delete this._guiderectangle;
- }
+ Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
+ $(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) });
+ } else {
+ polygon.getPath().push(coord);
+ }
+ }
- this.$btnRectangle.removeClass('control-on').blur();
+ const onMouseMovePolygon = (e) => {
+ console.log('onMouseMovePolygon')
+ if (!polygon) return;
- this._mode = null;
- },
+ var proj = map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ path = polygon.getPath();
- finishMode: function(mode) {
- console.log('finishMode')
- if (!mode) return;
+ if (path.getLength() >= 2) {
+ path.pop();
+ }
- if (mode === 'line') {
- this._finishDistance();
- } if (mode === 'polygon') {
- this._finishArea();
- } if (mode === 'circle') {
- this._finishCircle();
- } if (mode === 'rectangle') {
- this._finishRectangle();
+ 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); })
+ } else {
+ circle.setCenter(coord);
+ circle.setRadius(100);
+ }
+ // setCircle(circle);
+ setCircle(prev => ([...prev, circle]))
+ setAreaInfo('');
+ setFigure(circle)
+ }
+
+ const onMouseDownDrag = (index) => {
+ console.log('onMouseDownDrag')
+
+ map.setOptions({
+ draggable: false,
+ pinchZoom: false,
+ scrollWheel: false,
+ keyboardShortcuts: false,
+ disableDoubleTapZoom: true,
+ disableDoubleClickZoom: true,
+ disableTwoFingerTapZoom: true
+ })
+
+ $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) });
+ $(document).on('mouseup.measure', function () { onMouseUpDrag() });
+ }
+
+ 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);
}
- },
- _fromMetersToText: function(meters) {
- meters = meters || 0;
+ polyline.setPath(movepath);
- var km = 1000,
- text = meters;
+ } else if (polygon) {
+ var polygonpaths = polygon.getPath()._array;
- if(meters >= km) {
- text = parseFloat((meters / km).toFixed(1)) + 'km';
- } else {
- text = parseFloat(meters.toFixed(1)) + 'm';
+ 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 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);
+ }
- return text;
- },
+ if (!circle) {
+ dragCircle[index].setCenter(coord);
+ }
+ }
+
+ const onMouseUpDrag = () => {
+ 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);
+ }
- _addMileStone: function(coord, text, css) {
- if(!this._ms) this._ms = [];
+ if (polygon) {
+ var path = polygon.getPath()._array;
+ setPolygon(polygon);
+ setAreaInfo(path);
+ setFigure(polygon);
+ }
- let content;
- if(text == 'Start') {
- content = ''+ text +'
'
- } else {
- content = ''+ text +'
'
- }
+ $(document).off('mousemove.measure');
+ $(document).off('mouseup.measure');
- var ms = new naver.maps.Marker({
- position: coord,
- icon: {
- content: content,
- anchor: new naver.maps.Point(-5, -5)
- },
- map: this.map
- });
+ if (circle) {
+ setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }))
+ setCircle(prev => ([...prev, circle]))
+ setAreaInfo('');
+ setFigure(circle)
+ }
+ }
+
+ const setAreaInfo = (path) => {
+ areaInfo = {
+ coordinates: [],
+ bufferZone: 100,
+ };
+
+ let prePath = [];
+ if (path) {
+ path.forEach((item) => {
+ const p = {
+ lat: item.y,
+ lon: item.x
+ }
- var msElement = $(ms.getElement());
+ prePath.push(p);
+ })
+ // path.forEach(prev=> prePath.push([prev.x, prev.y]))
+ }
- if(css) {
- msElement.css(css);
- } else {
- msElement.css('font-size', '13px');
+ 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
}
- this._ms.push(ms);
- },
+ areaInfo.coordinates.push(point);
+ areaInfo.bufferZone = circle.getRadius();
+ areaInfo.areaType = 'CIRCLE';
+ }
+ // console.log(areaInfo, 'areaInfo')
+ props.handleCoordinates(areaInfo);
+ }
+
+ const onClickReset = () => {
+ console.log('onClickRest - ', mapControl.drawType);
+ if (mapControl.drawType === 'RESET') {
+ clearMode('RESET');
+ }
+ }
- _onClickDistance: function(e) {
- console.log('onClickDistance')
- var map = this.map,
- coord = e.coord;
+ const handleDetailDraw = () => {
+ if (props.areaCoordList) {
+ console.log('handleDetailDraw')
- if (!this._polyline) {
- // 임시로 보여줄 점선 폴리라인을 생성합니다.
- this._guideline = new naver.maps.Polyline({
- strokeColor: '#0000ff',
- strokeWeight: 3,
- strokeStyle: [4, 4],
- strokeOpacity: 0.2,
- path: [coord],
- map: map
- });
+ const areas = props.areaCoordList[0];
- // this._lastDistance = this._guideline.getDistance();
+ const paths = []; //coordList의 위경도 값 담길 배열
+ areas.coordList.forEach((coord) => {
+ const path = new naver.maps.LatLng(coord.lat, coord.lon)
- $(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this));
- this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.bind(this)));
+ paths.push(path);
+ });
- // 실제 거리재기에 사용되는 폴리라인을 생성합니다.
- this._polyline = new naver.maps.Polyline({
+ 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: '#0000ff',
+ strokeColor: '#283046',
strokeWeight: 3,
- strokeOpacity: 0.6,
- path: [coord],
+ strokeOpacity: 1,
+ path: paths,
map: map
});
- this._lastDistance = this._polyline.getDistance();
- this._addMileStone(coord, 'Start');
-
- } else {
- this._guideline.setPath([e.coord]);
- this._polyline.getPath().push(coord);
+ 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: 15,
+ map: map,
+ clickable: true
+ })
+ )
+ dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
+ }
- var distance = this._polyline.getDistance();
- this._addMileStone(coord, this._fromMetersToText(distance - this._lastDistance));
- this._lastDistance = distance;
- }
- },
-
- _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();
+ setDragCircle(dragCircle);
+
+ 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);
+ }
+
+ // console.log(bufferPaths)
+ //bufferline 생성
+ bufferPolygon = new naver.maps.Polyline({
+ strokeColor: '#283046',
+ strokeOpacity: 1,
+ // fillColor: '#7367F0',
+ // fillOpacity: 0.1,
+ path: bufferPaths,
+ map: map
+ });
+ // console.log(bufferPolygon);
+ setBuffer(bufferPolygon);
+ }
}
- // [기존 클릭 좌표, 실시간 좌표]
- 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({
- strokeOpacity: 0.8,
- fillColor: '#0000ff',
+ 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: [coord],
+ paths: paths,
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();
+ 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,
+ map: map,
+ clickable: true
+ })
+ )
+ dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
+ }
- if (path.getLength() >= 2) {
- path.pop();
+ setDragCircle(dragCircle);
}
- 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({
- strokeStyle: [4, 4],
- strokeOpacity: 0.6,
- path: [coord],
- map: map
- });
- this._lastDistance = this._radius.getDistance();
-
- // 임시로 보여줄 원형
- this._guidecircle = new naver.maps.Circle({
- 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({
- 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();
+ if (areas.areaType && areas.areaType === 'CIRCLE') {
+ //circle 생성
+ if(pastCircle) {
+ pastCircle.forEach(prev => prev.setMap(null));
+ }
+ // if(circle) {
+ // console.log(circle, '>>>circle')
+ // circle.setMap(null);
// }
-
- // 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);
- },
-
- _onClickRectangle: function(e) {
- console.log('onClickRectangle')
- var map = this.map,
- coord = e.coord;
-
- this.max_x = 0;
- this.max_y = 0;
-
-
- if(!this._rectangle) {
- //min = 고정값
- this.fixed = coord;
- this.min = [this.fixed.x, this.fixed.y];
- this.max = [this.max_x, this.max_y];
- this.boundscoord = [this.min[0], this.min[1], this.min[0], this.min[1]];
-
- // 임시로 보여줄 사각형
- this._guiderectangle = new naver.maps.Rectangle({
- strokeStyle: [4, 4],
- strokeOpacity: 0.6,
- bounds: this.boundscoord,
- map: map
- });
-
- $(document).on('mousemove.measure', this._onMouseMoveRectangle.bind(this));
- this._rectangleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this)));
-
- //실제 사용되는 사각형
- this._rectangle = new naver.maps.Rectangle({
- strokeOpacity: 0.8,
- fillColor: '#0000ff',
+ // radiusline = new naver.maps.Polyline({
+ // strokeStyle: [4, 4],
+ // strokeOpacity: 0.6,
+ // path: [coord],
+ // map: map
+ // })
+ circle = new naver.maps.Circle({
+ strokeColor: '#283046',
+ strokeOpacity: 1,
+ // fillColor: '#ff0000',
+ fillColor: '#7367F0',
fillOpacity: 0.1,
- bounds: this.boundscoord,
- map: map
+ center: paths[0],
+ radius: areas.bufferZone,
+ map: map,
+ clickable: true
});
+ Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
- } else {
- this.max = [coord.x, coord.y];
- this.boundscoord = [this.min[0], this.min[1], this.max[0], this.max[1]];
- this._rectangle.setBounds(this.boundscoord);
- }
- },
-
- _onMouseMoveRectangle: function(e) {
- console.log('onMouseMoveRectangle')
- if(!this._rectangle) return;
-
- var map = this.map,
- proj = this.map.getProjection(),
- coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
- bounds = this._guiderectangle.getBounds(),
- max = [coord.x, coord.y];
-
- this.boundscoord = [this.min[0], this.min[1],max[0], max[1]];
- this._guiderectangle.setBounds(this.boundscoord);
- },
-
- _bindMap: function(map) {
- console.log('bindMap')
- },
-
- _unbindMap: function() {
- console.log('unbindMap')
- this.unbindAll();
- },
-
- _bindDOMEvents: function() {
- console.log('bindDOMEvents')
- 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'));
- this.$btnRectangle.on('click.measure', this._onClickButton.bind(this, 'rectangle'));
-
- },
-
- _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')) {
- console.log('remove')
- btn.removeClass('control-on');
- } else {
- console.log('add')
- 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();
- } else if (mode === 'rectangle') {
- if(this._rectangle) {
- this._rectangle.setMap(null);
- delete this._rectangle;
- }
+ setCircle([circle]);
}
}
- });
-
- // id랑 매치시켜서 옵션 지정함
- var measures = new Measure({
- line: $('#line'),
- polygon: $('#polygon'),
- circle: $('#circle'),
- rectangle: $('#rectangle')
- });
-
- measures.setMap(map);
-
- return(
- <>
-
- >
- )
-}
\ No newline at end of file
+ }
+
+ const addMileStone = (coord, text, css) => {
+ if(distanceMarker) distanceMarker = [];
+
+ let content;
+ if(text == 'Start') {
+ content = ''+ text +'
'
+ } else {
+ content = ''+ text +'
'
+ }
+
+ var _ms = new naver.maps.Marker({
+ position: coord,
+ icon: {
+ content: content,
+ anchor: new naver.maps.Point(-5, -5)
+ },
+ map: map
+ });
+
+ var msElement = $(_ms.getElement());
+
+ if(css) {
+ msElement.css(css);
+ } else {
+ msElement.css('font-size', '13px');
+ }
+
+ distanceMarker.push(_ms);
+ setMarker(prev => ([...prev, _ms]))
+ }
+
+ const fromMetersToText = (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;
+ }
+
+ return null;
+};
\ No newline at end of file
diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js
deleted file mode 100644
index da4df93..0000000
--- a/src/components/map/naver/draw/FlightPlanDrawTest.js
+++ /dev/null
@@ -1,676 +0,0 @@
-import $ from 'jquery';
-import { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-export const FlightPlanDrawTest = props => {
- const mapControl = useSelector(state => state.controlMapReducer);
-
- const [pastPolyline, setPolyline] = useState();
- const [pastBuffer, setBuffer] = useState();
-
- const [pastPolygon, setPolygon] = useState();
-
- // const [pastCircle, setCircle] = useState();
- const [pastCircle, setCircle] = useState([]);
- const [pastEve, setEve] = useState();
-
- const [pastDragCircle, setDragCircle] = useState([]);
-
- const [pastMarker, setMarker] = useState([]);
-
- const naver = props.naver;
- const map = props.map;
- let mode = props.mode;
-
- 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 check;
-
- let distanceMarker = [];
-
- useEffect(() => {
- drawInit();
- }, [mapControl.drawType])
-
- useEffect(() => {
- handleDetailDrwa();
- }, [props.areaCoordList])
-
- const drawInit = () => {
- console.log(mapControl.drawType);
- 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) {
- console.log('clear circle ', pastCircle)
- pastCircle.forEach(prev => prev.setMap(null))
- naver.maps.Event.removeListener(pastEve);
-
- // setCircle();
- setCircle([]);
- }
- if (pastPolygon) {
- console.log('clear polygon ', pastPolygon)
- pastPolygon.setMap(null);
- pastDragCircle.forEach(c => c.setMap(null));
-
- setPolygon();
- setDragCircle([]);
- }
- if (pastMarker) {
- console.log('clear marker ', pastMarker)
- pastMarker.forEach(m => m.setMap(null));
- }
-
- finishDraw();
- props.handleInitCoordinates();
- }
-
- const startMode = (mode) => {
- console.log('startMode')
-
- if (!mode) return;
-
- if (mode === 'LINE') {
- Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) });
- } else if (mode === 'POLYGON') {
- Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) });
- } else if (mode === 'CIRCLE') {
- setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }))
- }
- }
-
- const removeListener = () => {
- console.log('removeListener')
-
- naver.maps.Event.removeListener(Eve.clickEve);
- naver.maps.Event.removeListener(Eve.mousedownEve);
- naver.maps.Event.removeListener(Eve.rightclickEve);
- if (!circle) $(document).off('mousemove.measure');
- // if(pastCircle) naver.maps.Event.removeListener(pastEve);
- naver.maps.Event.removeListener(pastEve);
- }
-
- const finishDraw = () => {
- console.log('finishDraw')
- removeListener();
-
- if (polyline) {
- if (guideline) {
- guideline.setMap(null);
- guideline = '';
- }
-
- let polypaths = polyline.getPath()._array;
-
- if (polypaths.length >= 2) {
- setPolyline(polyline);
- setAreaInfo(polypaths);
- } else {
- polyline.setMap(null);
- polyline = '';
- }
-
- polyline.setMap(null)
- } else if (polygon) {
- let path = polygon.getPath();
- path.pop();
-
- let polygonpaths = polygon.getPath()._array;
-
- setPolygon(polygon);
- setAreaInfo(polygonpaths);
-
- polygon.setMap(null)
- }
- }
-
- const onClickPolyline = (e) => {
- console.log('onClickPolyline')
- var coord = e.coord;
-
- // if (!check) {
- 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: 3,
- 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));
- 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;
-
- if (!polygon) {
- polygon = new naver.maps.Polygon({
- strokeColor: '#283046',
- strokeOpacity: 1,
- fillColor: '#7367F0',
- fillOpacity: 0.1,
- paths: [coord],
- map: map
- });
-
- Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
- $(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) });
- } else {
- polygon.getPath().push(coord);
- }
- }
-
- 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); })
- } else {
- circle.setCenter(coord);
- circle.setRadius(100);
- }
- // setCircle(circle);
- setCircle(prev => ([...prev, circle]))
- setAreaInfo('');
- }
-
- const onMouseDownDrag = (index) => {
- console.log('onMouseDownDrag')
-
- if (circle) {
- naver.maps.Event.removeListener(Eve.clickEve);
- }
-
- map.setOptions({
- draggable: false,
- pinchZoom: false,
- scrollWheel: false,
- keyboardShortcuts: false,
- disableDoubleTapZoom: true,
- disableDoubleClickZoom: true,
- disableTwoFingerTapZoom: true
- })
-
- $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) });
- $(document).on('mouseup.measure', function () { onMouseUpDrag() });
- }
-
- const onMouseMoveDrag = (e, index) => {
- console.log('onMouseMoveDrag')
-
- check = true;
-
- 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 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);
- }
-
- if (!circle) {
- dragCircle[index].setCenter(coord);
- }
- }
-
- const onMouseUpDrag = () => {
- 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);
- props.handleBufferList();
- }
-
- if (polygon) {
- var path = polygon.getPath()._array;
- setPolygon(polygon);
- setAreaInfo(path);
- }
-
- $(document).off('mousemove.measure');
- $(document).off('mouseup.measure');
-
- if (circle) {
- // Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); })
- setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }))
- // setCircle(circle);
- setCircle(prev => ([...prev, circle]))
- setAreaInfo('');
- }
-
- check = false;
- }
-
- const setAreaInfo = (path) => {
- areaInfo = {
- coordinates: [],
- bufferZone: 0,
- };
-
- 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);
- // console.log(areaInfo, 'areaInfo')
- }
-
- const onClickReset = () => {
- console.log('onClickRest - ', mapControl.drawType);
- if (mapControl.drawType === 'RESET') {
- clearMode('RESET');
- }
- }
-
- const handleDetailDrwa = () => {
- if (props.areaCoordList) {
- console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
-
- 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: 3,
- 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: 15,
- map: map,
- clickable: true
- })
- )
- dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
- }
-
- setDragCircle(dragCircle);
-
- 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);
- }
-
- // console.log(bufferPaths)
- //bufferline 생성
- bufferPolygon = new naver.maps.Polyline({
- strokeColor: '#283046',
- strokeOpacity: 1,
- // fillColor: '#7367F0',
- // fillOpacity: 0.1,
- path: bufferPaths,
- map: map
- });
- // console.log(bufferPolygon);
- setBuffer(bufferPolygon);
- }
- }
-
- 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,
- map: map,
- clickable: true
- })
- )
- dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
- }
-
- setDragCircle(dragCircle);
- }
-
- if (areas.areaType && areas.areaType === 'CIRCLE') {
- //circle 생성
- if(pastCircle) {
- // pastCircle.setMap(null);
- console.log(pastCircle)
- pastCircle.forEach(prev => prev.setMap(null));
- }
- if(circle) {
- circle.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,
- // 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]);
- }
- }
- }
-
- const addMileStone = (coord, text, css) => {
- if(distanceMarker) distanceMarker = [];
-
- let content;
- if(text == 'Start') {
- content = ''+ text +'
'
- } else {
- content = ''+ text +'
'
- }
-
- var _ms = new naver.maps.Marker({
- position: coord,
- icon: {
- content: content,
- anchor: new naver.maps.Point(-5, -5)
- },
- map: map
- });
-
- var msElement = $(_ms.getElement());
-
- if(css) {
- msElement.css(css);
- } else {
- msElement.css('font-size', '13px');
- }
-
- distanceMarker.push(_ms);
- setMarker(prev => ([...prev, _ms]))
- }
-
- const fromMetersToText = (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;
- }
-
- return (
- <>
- >
- );
-};
\ No newline at end of file
diff --git a/src/components/map/naver/draw/FlightPlanDraw_JQuery.js b/src/components/map/naver/draw/FlightPlanDraw_JQuery.js
new file mode 100644
index 0000000..e193de5
--- /dev/null
+++ b/src/components/map/naver/draw/FlightPlanDraw_JQuery.js
@@ -0,0 +1,652 @@
+import $ from 'jquery';
+import '../../../../assets/css/custom.css';
+import { CustomInput } from 'reactstrap';
+
+import buffer from '@turf/buffer'
+
+export const FlightPlanDraw = props => {
+ const {naver} = props;
+ const {map} = props;
+
+
+ var Measure = function(buttons) {
+ this.$btnLine = buttons.line;
+ this.$btnPolygon = buttons.polygon;
+ this.$btnCircle = buttons.circle;
+ this.$btnRectangle = buttons.rectangle;
+
+ this._mode = null;
+
+ this._bindDOMEvents();
+ };
+
+ $.extend(
+ Measure.prototype,{
+ 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();
+ } if (mode === 'rectangle') {
+ this._startRectangle();
+ }
+ },
+
+ _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)),
+ naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this))
+ ];
+ },
+
+ _startRectangle: function() {
+ console.log('startRectangle')
+ var map = this.map;
+ this._rectangleListeners = [
+ naver.maps.Event.addListener(map, 'click', this._onClickRectangle.bind(this)),
+ naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.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) {
+ // console.log(this._polyline.getPath()._array, 'path')
+ let polypaths = this._polyline.getPath()._array;
+
+ //파싱
+ let polypathJSON = new Array();
+ for(let i = 0; i< polypaths.length; i++) {
+
+ //파싱
+ let obj = new Object();
+
+ obj.x = '' + polypaths[i]._lng + '';
+ obj.y = '' + polypaths[i]._lat + '';
+
+ obj = JSON.stringify(obj);
+ polypathJSON.push(JSON.parse(obj));
+ }
+ console.log(polypathJSON, 'json polyline path')
+
+
+ //버퍼 생성에 필요한 coordinates 배열 변환
+ let lineStringPaths = [];
+ for(let i = 0; i < this._polyline.getPath().length; i++) {
+ lineStringPaths.push([this._polyline.getPath()._array[i].x, this._polyline.getPath()._array[i].y]);
+ }
+ console.log(lineStringPaths, 'polyline path')
+
+ //버퍼 생성을 위한 line 객체
+ const originalGeojson = {
+ type: "FeatureCollection",
+ features: [
+ {
+ type: "Feature",
+ properties: {},
+ geometry: {
+ type: "LineString",
+ coordinates: lineStringPaths
+ }
+ }
+ ]
+ };
+ console.log(originalGeojson)
+
+ //버퍼 객체
+ const bufferObj = buffer(originalGeojson, 50, {units:'meters'});
+
+ //버퍼 라인 생성
+ let bufferPath = bufferObj.features[0].geometry.coordinates[0];
+ console.log(bufferPath, 'buffer path')
+
+ this.bufferPolyline = new naver.maps.Polyline({
+ strokeColor: '#ff0000',
+ strokeWeight: 2,
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.6,
+ path : bufferPath,
+ map: map
+ });
+
+ // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯
+ // this._polyline.setMap(null)
+ 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')
+
+ 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;
+ },
+
+ _finishRectangle: function() {
+ console.log('finishRectangle')
+
+ naver.maps.Event.removeListener(this._rectangleListeners);
+ delete this._rectangleListeners;
+
+ $(document).off('mousemove.measure');
+
+ if(this._rectangle) {
+ this._guiderectangle.setMap(null);
+ delete this._guiderectangle;
+ }
+
+ this.$btnRectangle.removeClass('control-on').blur();
+
+ 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();
+ } if (mode === 'rectangle') {
+ this._finishRectangle();
+ }
+ },
+
+ _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;
+ },
+
+ _addMileStone: function(coord, text, css) {
+ if(!this._ms) this._ms = [];
+
+ let content;
+ if(text == 'Start') {
+ content = ''+ text +'
'
+ } else {
+ content = ''+ text +'
'
+ }
+
+ var ms = new naver.maps.Marker({
+ position: coord,
+ icon: {
+ content: content,
+ anchor: new naver.maps.Point(-5, -5)
+ },
+ map: this.map
+ });
+
+ var msElement = $(ms.getElement());
+
+ if(css) {
+ msElement.css(css);
+ } else {
+ msElement.css('font-size', '13px');
+ }
+
+ this._ms.push(ms);
+ },
+
+ _onClickDistance: function(e) {
+ console.log('onClickDistance')
+ var map = this.map,
+ coord = e.coord;
+
+ if (!this._polyline) {
+ // 임시로 보여줄 점선 폴리라인을 생성합니다.
+ this._guideline = new naver.maps.Polyline({
+ strokeColor: '#0000ff',
+ strokeWeight: 3,
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.2,
+ path: [coord],
+ map: map
+ });
+
+ // this._lastDistance = this._guideline.getDistance();
+
+ $(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: '#0000ff',
+ strokeWeight: 3,
+ strokeOpacity: 0.6,
+ path: [coord],
+ map: map
+ });
+
+ this._lastDistance = this._polyline.getDistance();
+ this._addMileStone(coord, 'Start');
+
+ } 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) {
+ 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({
+ strokeOpacity: 0.8,
+ fillColor: '#0000ff',
+ fillOpacity: 0.1,
+ 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({
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.6,
+ path: [coord],
+ map: map
+ });
+ this._lastDistance = this._radius.getDistance();
+
+ // 임시로 보여줄 원형
+ this._guidecircle = new naver.maps.Circle({
+ 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({
+ 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);
+ },
+
+ _onClickRectangle: function(e) {
+ console.log('onClickRectangle')
+ var map = this.map,
+ coord = e.coord;
+
+ this.max_x = 0;
+ this.max_y = 0;
+
+
+ if(!this._rectangle) {
+ //min = 고정값
+ this.fixed = coord;
+ this.min = [this.fixed.x, this.fixed.y];
+ this.max = [this.max_x, this.max_y];
+ this.boundscoord = [this.min[0], this.min[1], this.min[0], this.min[1]];
+
+ // 임시로 보여줄 사각형
+ this._guiderectangle = new naver.maps.Rectangle({
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.6,
+ bounds: this.boundscoord,
+ map: map
+ });
+
+ $(document).on('mousemove.measure', this._onMouseMoveRectangle.bind(this));
+ this._rectangleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this)));
+
+ //실제 사용되는 사각형
+ this._rectangle = new naver.maps.Rectangle({
+ strokeOpacity: 0.8,
+ fillColor: '#0000ff',
+ fillOpacity: 0.1,
+ bounds: this.boundscoord,
+ map: map
+ });
+
+ } else {
+ this.max = [coord.x, coord.y];
+ this.boundscoord = [this.min[0], this.min[1], this.max[0], this.max[1]];
+ this._rectangle.setBounds(this.boundscoord);
+ }
+ },
+
+ _onMouseMoveRectangle: function(e) {
+ console.log('onMouseMoveRectangle')
+ if(!this._rectangle) return;
+
+ var map = this.map,
+ proj = this.map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ bounds = this._guiderectangle.getBounds(),
+ max = [coord.x, coord.y];
+
+ this.boundscoord = [this.min[0], this.min[1],max[0], max[1]];
+ this._guiderectangle.setBounds(this.boundscoord);
+ },
+
+ _bindMap: function(map) {
+ console.log('bindMap')
+ },
+
+ _unbindMap: function() {
+ console.log('unbindMap')
+ this.unbindAll();
+ },
+
+ _bindDOMEvents: function() {
+ console.log('bindDOMEvents')
+ 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'));
+ this.$btnRectangle.on('click.measure', this._onClickButton.bind(this, 'rectangle'));
+
+ },
+
+ _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')) {
+ console.log('remove')
+ btn.removeClass('control-on');
+ } else {
+ console.log('add')
+ 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();
+ } else if (mode === 'rectangle') {
+ if(this._rectangle) {
+ this._rectangle.setMap(null);
+ delete this._rectangle;
+ }
+ }
+ }
+ });
+
+ // id랑 매치시켜서 옵션 지정함
+ var measures = new Measure({
+ line: $('#line'),
+ polygon: $('#polygon'),
+ circle: $('#circle'),
+ rectangle: $('#rectangle')
+ });
+
+ measures.setMap(map);
+
+ return(
+ <>
+
+ >
+ )
+}
\ No newline at end of file
diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
index 3ae27cb..fe746bd 100644
--- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
+++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
@@ -16,11 +16,21 @@ const FlightPlanAreaContainer = ({handleModal}) => {
const { publicAreaList} = useSelector(state => state.flightState);
const [airArea, setAirArea] = useState(null);
+ useEffect(() => {
+ dispatch(drawTypeChangeAction(''));
+ getAirAreaList();
+ }, []);
+
+ useEffect(() => {
+ setAirArea(publicAreaList);
+ }, [publicAreaList])
+
+
const getAirAreaList = () => {
dispatch(Actions.PUBLIC_AREA_LIST.request());
}
- const handleConfirm = (areaList) => {
+ const handleConfirm = (areaList) => {
if(areaList === undefined) {
alert('영역을 설정해주세요.')
return false;
@@ -29,16 +39,6 @@ const FlightPlanAreaContainer = ({handleModal}) => {
dispatch(Actions.AREA_COORDINATE_LIST_SAVE(areaList))
}
- useEffect(() => {
- dispatch(drawTypeChangeAction(''));
- getAirAreaList();
- }, []);
-
- useEffect(() => {
- setAirArea(publicAreaList);
- }, [publicAreaList])
-
-
return (
diff --git a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js
index c6e5443..d88ba92 100644
--- a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js
+++ b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js
@@ -8,6 +8,7 @@ import {initFlightBas} from '../../../../modules/basis/flight/models/basisFlight
const FlightPlanAreaDetailContainer = ({ handleModal }) => {
const dispatch = useDispatch();
+ const mapControl = useSelector(state => state.controlMapReducer);
const { areaCoordList, detail } = useSelector(state => state.flightState);
const [areaDetail, setAreaDetail] = useState(initFlightBas.initDetail.areaList);
@@ -76,6 +77,7 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => {
handleBufferList={handleBufferList}
areaCoordList={areaCoordList}
data={areaDetail}
+ mapControl={mapControl}
/>