diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js
index 0d72e22..64d466e 100644
--- a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js
+++ b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js
@@ -9,11 +9,6 @@ import {
Row,
Button
} from 'reactstrap';
-import { useDispatch, useSelector } from 'react-redux';
-import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone';
-import { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw';
-import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions';
-import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest';
const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, handleBufferList, data }) => {
diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js
index 11ccd96..30c14d5 100644
--- a/src/components/basis/flight/plan/FlightPlanAreaMap.js
+++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js
@@ -10,6 +10,7 @@ import {
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';
@@ -20,7 +21,6 @@ const FlightPlanAreaMap = (props) => {
const dispatch = useDispatch();
const naver = window.naver;
const airArea = props.airArea;
-
const mapControl = useSelector(state => state.controlMapReducer);
const { areaCoordList } = useSelector(state => state.flightState);
@@ -45,6 +45,9 @@ const FlightPlanAreaMap = (props) => {
setMapAreaCoordList(areaCoordList)
}, [areaCoordList]);
+ const [areaDetail, setAreaDetail] = useState(initFlightBas.initDetail.areaList);
+
+
const ModeInit = () => {
setMode(mapControl.drawType)
}
@@ -68,11 +71,11 @@ const FlightPlanAreaMap = (props) => {
const handlerDrawType = val => {
dispatch(drawTypeChangeAction(val));
- };
-
- const handlerDrawCheck = val => {
- dispatch(drawCheckAction(val));
- };
+ };
+
+ const handleBufferList = () => {
+ dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail));
+ }
const handleInitCoordinates = () => {
const init = initFlightBas.initDetail.areaList.concat();
@@ -128,7 +131,8 @@ const FlightPlanAreaMap = (props) => {
mode={mode}
areaCoordList={mapAreaCoordList}
handleCoordinates={handleCoordinates}
- handleInitCoordinates={handleInitCoordinates}
+ handleInitCoordinates={handleInitCoordinates}
+ handleBufferList={handleBufferList}
/> : null}
{
>
초기화
- {/*
- 적용
- */}
-
diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js
index 5a48971..6a59029 100644
--- a/src/components/map/naver/draw/FlightPlanDrawTest.js
+++ b/src/components/map/naver/draw/FlightPlanDrawTest.js
@@ -1,37 +1,25 @@
import $ from 'jquery';
-import buffer from '@turf/buffer'
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
-import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
-
-import GeoJSONReader from 'jsts/org/locationtech/jts/io/GeoJSONReader';
-import GeometryFactory from 'jsts/org/locationtech/jts/geom/GeometryFactory';
-import { BufferOp } from 'jsts/org/locationtech/jts/operation/buffer';
-import { DistanceOp } from 'jsts/org/locationtech/jts/operation/distance/DistanceOp';
-
-import JSTSWKTReader from 'jsts/org/locationtech/jts/io/WKTReader';
-import GeoJSONWriter from 'jsts/org/locationtech/jts/io/GeoJSONWriter';
-import JSTSBufferOp from 'jsts/org/locationtech/jts/operation/buffer/BufferOp'
-import JSTSBufferParameter from 'jsts/org/locationtech/jts/operation/buffer/BufferParameters';
export const FlightPlanDrawTest = props => {
- const dispatch = useDispatch();
const mapControl = useSelector(state => state.controlMapReducer);
- const draw = useSelector(state => state.basisFlightDrawReducer);
const [pastPolyline, setPolyline] = useState();
const [pastBuffer, setBuffer] = useState();
const [pastPolygon, setPolygon] = useState();
- const [pastCircle, setCircle] = 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;
- const openModal = props.openModal;
let mode = props.mode;
let areaInfo;
@@ -39,7 +27,7 @@ export const FlightPlanDrawTest = props => {
let polyline;
let guideline;
- let bufferPolyline;
+ let bufferPolygon;
let polygon;
@@ -57,6 +45,8 @@ export const FlightPlanDrawTest = props => {
let check;
+ let distanceMarker = [];
+
useEffect(() => {
drawInit();
}, [mapControl.drawType])
@@ -65,20 +55,6 @@ export const FlightPlanDrawTest = props => {
handleDetailDrwa();
}, [props.areaCoordList])
- const zoomChange = () => {
- let change;
- if (change) {
- naver.maps.Event.removeListener(change);
- } else {
- change = naver.maps.Event.addListener(map, 'zoom_changed', function () {
- if (dragCircle) {
- // dragCircle.forEach(prev => prev.setRadius(map._mapOptions.zoom + 5));
- // dragCircle.forEach(prev => prev.setRadius(prev.getRadius() * 1.25));
- }
- })
- }
- }
-
const drawInit = () => {
console.log(mapControl.drawType);
if (mapControl.drawType === 'LINE') {
@@ -95,8 +71,6 @@ export const FlightPlanDrawTest = props => {
const onClickButton = (newMode) => {
console.log('onClickButton');
- zoomChange();
-
clearMode(mode);
if (mode === newMode) {
@@ -114,62 +88,38 @@ export const FlightPlanDrawTest = props => {
// if(!mode) return;
- // clear mode는 전체를 다 초기화 하는게 맞지 않을까..? 무조건 drawType이 변할때마다 초기화해주기로..
if (pastPolyline) {
- console.log('clrea polyline ', 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('clrea circle ', pastCircle)
- pastCircle.setMap(null);
+ console.log('clear circle ', pastCircle)
+ pastCircle.forEach(prev => prev.setMap(null))
naver.maps.Event.removeListener(pastEve);
- setCircle();
+ // setCircle();
+ setCircle([]);
}
if (pastPolygon) {
- console.log('clrea polygon ', 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();
-
- // if(mode === 'LINE' && pastPolyline) {
- // pastPolyline.setMap(null);
- // pastDragCircle.forEach(c => c.setMap(null));
-
- // setPolyline({});
- // setDragCircle([]);
- // }
-
- // if(mode === 'POLYGON' && pastPolygon) {
- // pastPolygon.setMap(null);
- // pastDragCircle.forEach(c => c.setMap(null));
-
- // setPolygon({});
- // setDragCircle([]);
- // }
-
- // if(mode === 'CIRCLE' && pastCircle) {
- // pastCircle.setMap(null);
- // naver.maps.Event.removeListener(pastEve);
-
- // setCircle({});
- // }
-
- // if(mode === 'RESET') {
- // if(pastPolyline) pastPolyline.setMap(null);
- // if(pastCircle) pastCircle.setMap(null);
- // if(pastPolygon) pastPolygon.setMap(null);
- // }
+ props.handleInitCoordinates();
}
const startMode = (mode) => {
@@ -200,66 +150,34 @@ export const FlightPlanDrawTest = props => {
const finishDraw = () => {
console.log('finishDraw')
removeListener();
- if (polyline) {
- let polypaths = polyline.getPath()._array;
+ if (polyline) {
if (guideline) {
guideline.setMap(null);
guideline = '';
}
- if (polypaths.length >= 2) {
- //꼭짓점 circle 생성
- for (let index = 0; index < polypaths.length; index++) {
- dragCircle.push(
- new naver.maps.Circle({
- strokeOpacity: 1,
- strokeColor: '#000000',
- fillColor: '#ffffff',
- fillOpacity: 1,
- center: polypaths[index],
- radius: 10,
- map: map,
- clickable: true
- })
- )
+ let polypaths = polyline.getPath()._array;
- dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) }))
- }
- setDragCircle(dragCircle);
+ 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;
- //꼭짓점 circle 생성
- for (let index = 0; index < polygonpaths.length; index++) {
- dragCircle.push(
- new naver.maps.Circle({
- strokeOpacity: 1,
- strokeColor: '#000000',
- fillColor: '#ffffff',
- fillOpacity: 1,
- center: polygonpaths[index],
- radius: 10,
- map: map,
- clickable: true
- })
- )
- dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) }))
- }
- setDragCircle(dragCircle);
+
setPolygon(polygon);
- setAreaInfo(polygonpaths, '');
+ setAreaInfo(polygonpaths);
+
+ polygon.setMap(null)
}
}
@@ -267,7 +185,7 @@ export const FlightPlanDrawTest = props => {
console.log('onClickPolyline')
var coord = e.coord;
- if (!check) {
+ // if (!check) {
if (!polyline) {
//가이드라인
guideline = new naver.maps.Polyline({
@@ -277,13 +195,14 @@ export const FlightPlanDrawTest = props => {
path: [coord],
map: map
});
- // lastDistance = guideline.getDistance();
+ lastDistance = guideline.getDistance();
//실제 사용되는 라인
polyline = new naver.maps.Polyline({
strokeLineCap: 'round',
strokeLineJoin: 'round',
- strokeColor: '#283046',
+ // strokeColor: '#283046',
+ strokeColor: '#ff0000',
strokeWeight: 3,
strokeOpacity: 1,
path: [coord],
@@ -294,16 +213,16 @@ export const FlightPlanDrawTest = props => {
$(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); });
lastDistance = polyline.getDistance();
- // this._addMileStone(coord, 'Start');
+ addMileStone(coord, 'Start')
} else {
guideline.setPath([e.coord]);
polyline.getPath().push(coord);
var distance = polyline.getDistance();
- // addMileStone(coord, this._fromMetersToText(distance - this._lastDistance));
+ addMileStone(coord, fromMetersToText(distance - lastDistance));
lastDistance = distance;
}
- }
+ // }
}
const onMouseMovePolyline = (e) => {
@@ -359,40 +278,34 @@ export const FlightPlanDrawTest = props => {
console.log('onClickCircle')
var coord = e.coord;
- if (!check) {
- 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
- });
+ if(!circle) {
+ radiusline = new naver.maps.Polyline({
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.6,
+ path: [coord],
+ map: map
+ })
+ lastDistance = radiusline.getDistance();
- Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
- } else {
- circle.setRadius(100);
- circle.setCenter(coord);
+ circle = new naver.maps.Circle({
+ strokeColor: '#283046',
+ strokeOpacity: 1,
+ fillColor: '#7367F0',
+ fillOpacity: 0.1,
+ center: coord,
+ radius: 100,
+ // map: map,
+ clickable: true
+ })
- radiusline.setPath([coord])
- }
- setCircle(circle);
- setAreaInfo('', '');
+ 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) => {
@@ -456,14 +369,16 @@ export const FlightPlanDrawTest = props => {
polygon.setPaths(movepath)
} else if (circle) {
- var circlepath = radiusline.getPath(),
- center = circle.getCenter(),
+ // 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);
+ // if (circlepath.getLength() === 2) {
+ // circlepath.pop();
+ // }
+ // circlepath.push(coord);
circle.setRadius(r);
}
@@ -486,14 +401,16 @@ export const FlightPlanDrawTest = props => {
})
if (polyline) {
- bufferPolyline.setMap(null);
- // bufferMove();
+ var path = polyline.getPath()._array;
+ setPolyline(polyline);
+ setAreaInfo(path);
+ props.handleBufferList();
}
if (polygon) {
var path = polygon.getPath()._array;
setPolygon(polygon);
- // setAreaInfo(path, '');
+ setAreaInfo(path);
}
$(document).off('mousemove.measure');
@@ -502,14 +419,15 @@ export const FlightPlanDrawTest = props => {
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);
- setAreaInfo('', '');
+ // setCircle(circle);
+ setCircle(prev => ([...prev, circle]))
+ setAreaInfo('');
}
check = false;
}
- const setAreaInfo = (path, bufferpath) => {
+ const setAreaInfo = (path) => {
areaInfo = {
coordinates: [],
bufferZone: 0,
@@ -548,142 +466,6 @@ export const FlightPlanDrawTest = props => {
// console.log(areaInfo, 'areaInfo')
}
- const bufferTest = () => {
- let pol = polyline.getPath()._array; //latlng point 다 준건가?
-
- let lineStringPaths = [];
- for (let i = 0; i < pol.length; i++) {
- // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToEPSG3857(pol[i]))
- // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToNaver(pol[i]))
- // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToTM128(pol[i]))
- // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToUTMK(pol[i]))
-
- // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToLatLng(naver.maps.Point(pol[i].x, pol[i].y)))
- // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToNaver(naver.maps.Point(pol[i].x, pol[i].y)))
- // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToTM128(naver.maps.Point(pol[i].x, pol[i].y)))
- // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToUTMK(naver.maps.Point(pol[i].x, pol[i].y)))
-
-
-
- lineStringPaths.push([pol[i].x, pol[i].y]);
- }
- // console.log(map.getProjection().getProjectionName());
- // console.log(map.getProjection())
- // console.log(map.getPrimitiveProjection())
-
- // console.log(lineStringPaths)
-
- //옆에 화면에 라이브러리 활용해서 제발 성공하자..
- let bufferRadius = 100;
- const wkt = 'LINESTRING (126.6061581 37.5218642, 126.6061581 37.518052)'
- let coords = {
- "type": "LineString",
- "coordinates": lineStringPaths
- };
- const bufferCenter = new JSTSWKTReader().read(wkt)
- const bufferResult = JSTSBufferOp.bufferOp(
- bufferCenter,
- bufferRadius
- )
-
- const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult)
-
- // bufferPolyline = new naver.maps.Polyline({
- // strokeColor: '#ff0000',
- // strokeColor: '#283046',
- // strokeWeight: 2,
- // strokeStyle: [4, 4],
- // strokeOpacity: 1,
- // path : bufferPaths,
- // // path: [
-
- // // ],
- // map: map
- // });
- }
-
- const bufferMove = () => {
- console.log('bufferMove')
-
- //버퍼 생성에 필요한 coordinates 배열 변환
- let pol = polyline.getPath()._array;
-
- let lineStringPaths = [];
- for (let i = 0; i < polyline.getPath().length; i++) {
- lineStringPaths.push([pol[i].x, pol[i].y]);
- }
- console.log(lineStringPaths, 'polyline path')
-
- // //버퍼 생성을 위한 line 객체
- // const originalGeojson = {
- // type: "FeatureCollection",
- // features: [
- // {
- // type: "Feature",
- // properties: {},
- // geometry: {
- // type: "LineString",
- // coordinates: lineStringPaths
- // }
- // }
- // ]
- // };
- // // console.log(originalGeojson, 'Feature type Object')
-
- // //버퍼 객체
- // const bufferObj = buffer(originalGeojson, 50, {units:'meters'});
-
- // //버퍼 라인 생성
- // let bufferPath = bufferObj.features[0].geometry.coordinates[0];
- // // console.log(bufferPath, 'buffer path')
-
- // bufferPolyline = new naver.maps.Polyline({
- // // strokeColor: '#ff0000',
- // strokeColor: '#283046',
- // strokeWeight: 2,
- // strokeStyle: [4, 4],
- // strokeOpacity: 1,
- // path : bufferPath,
- // map: map
- // });
-
- //------------------------
-
- let coords = {
- "type": "LineString",
- "coordinates": lineStringPaths
- };
-
- const reader = new GeoJSONReader();
- const writer = new GeoJSONWriter();
-
- const distance = (100 * 0.001) / 111.12; //100미터
- const line = reader.read(coords);
- const buffer = BufferOp.bufferOp(line, distance, 0, 3);
-
- let bufferpath = buffer._shell._points._coordinates;
-
- let bufferPaths = [];
- for (let i = 0; i < bufferpath.length; i++) {
- bufferPaths.push([bufferpath[i].x, bufferpath[i].y]);
- }
- console.log(bufferPaths, 'bufferPaths')
-
- bufferPolyline = new naver.maps.Polyline({
- strokeColor: '#ff0000',
- strokeColor: '#283046',
- strokeWeight: 2,
- strokeStyle: [4, 4],
- strokeOpacity: 1,
- path: bufferPaths,
- map: map
- });
- // setAreaInfo(polyline.getPath()._array, bufferPath);
- setAreaInfo(polyline.getPath()._array, bufferPaths);
- setPolyline(polyline);
- setBuffer(bufferPolyline)
- }
-
const onClickReset = () => {
console.log('onClickRest - ', mapControl.drawType);
if (mapControl.drawType === 'RESET') {
@@ -692,8 +474,10 @@ export const FlightPlanDrawTest = props => {
}
const handleDetailDrwa = () => {
+ if (props.areaCoordList) {
+ console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
+
- if (props.areaCoordList) {
const areas = props.areaCoordList[0];
const paths = [];
@@ -705,6 +489,11 @@ export const FlightPlanDrawTest = props => {
});
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',
@@ -717,6 +506,25 @@ export const FlightPlanDrawTest = props => {
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 = [];
@@ -727,25 +535,31 @@ export const FlightPlanDrawTest = props => {
});
console.log('buffer test : ',areas.bufferCoordList);
- if(pastPolygon) {
- pastPolygon.setMap(null);
+ if(pastBuffer) {
+ pastBuffer.setMap(null);
}
- polygon = new naver.maps.Polygon({
+ // console.log(bufferPaths)
+ //bufferline 생성
+ bufferPolygon = new naver.maps.Polyline({
strokeColor: '#283046',
strokeOpacity: 1,
- fillColor: '#7367F0',
- fillOpacity: 0.1,
- paths: bufferPaths,
+ // fillColor: '#7367F0',
+ // fillOpacity: 0.1,
+ path: bufferPaths,
map: map
});
- console.log(polygon);
-
- setPolygon(polygon);
+ // 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,
@@ -756,12 +570,47 @@ export const FlightPlanDrawTest = props => {
});
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],
@@ -769,12 +618,58 @@ export const FlightPlanDrawTest = props => {
map: map,
clickable: true
});
+ Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
- setCircle(circle);
+ 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 (
<>
>