diff --git a/src/components/map/mapbox/draw/LaancDrawControl.js b/src/components/map/mapbox/draw/LaancDrawControl.js
index a1183725..7026d487 100644
--- a/src/components/map/mapbox/draw/LaancDrawControl.js
+++ b/src/components/map/mapbox/draw/LaancDrawControl.js
@@ -12,6 +12,7 @@ export const LaancDrawControl = props => {
const drawObj = props.drawObj;
const mapObject = props.mapObject;
+ const [drawObjId, setDrawObjId] = useState();
const [bufferId, setBufferId] = useState();
const [geojson, setGeoJson] = useState();
@@ -27,7 +28,7 @@ export const LaancDrawControl = props => {
useEffect(() => {
if (mapObject) {
- mapObject.on('draw.create', handlerCreateObj);
+ mapObject.on('draw.create', handlerSetId);
mapObject.on('draw.update', handlerFormatAreaInfo);
mapObject.on('click', handlerOnClick);
@@ -68,11 +69,12 @@ export const LaancDrawControl = props => {
};
// 도형 첫 생성하면 properties.id에 현재 drawType 넣어줌
- const handlerCreateObj = e => {
+ const handlerSetId = e => {
const id = e.features[0].id;
const mode = handlerReturnMode(drawObj.getMode());
if (mode) {
drawObj.setFeatureProperty(id, 'id', mode);
+ setDrawObjId(id);
handlerFormatAreaInfo(e);
}
};
@@ -137,8 +139,6 @@ export const LaancDrawControl = props => {
const handlerPastDraw = () => {
if (props.areaCoordList) {
- console.log(props.areaCoordList[0], '>>>>areaCoordList---');
-
const areas = props.areaCoordList[0];
const paths = [];
areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat]));
@@ -147,8 +147,24 @@ export const LaancDrawControl = props => {
console.log('pastDraw');
const drawGeoJson = drawObj.getAll();
if (areas.areaType === 'CIRCLE') {
+ console.log(paths, '>>>');
+ // handlerCreateDrawObj(
+ // drawObjId,
+ // setDrawObjId,
+ // 'Polygon',
+ // [paths],
+ // 'CIRCLE'
+ // );
} else {
if (areas.areaType === 'LINE') {
+ handlerCreateDrawObj(
+ drawObjId,
+ setDrawObjId,
+ 'LineString',
+ paths,
+ 'LINE'
+ );
+
// 버퍼 생성
if (areas.bufferCoordList) {
const bufferPaths = [];
@@ -157,17 +173,22 @@ export const LaancDrawControl = props => {
bufferPaths.push([bfCoord.lon, bfCoord.lat])
);
- const buffer = drawObj.get(bufferId);
- if (buffer) drawObj.delete(bufferId);
-
- const newBuffer = {
- type: 'LineString',
- coordinates: bufferPaths
- };
- const newBufferId = drawObj.add(newBuffer);
- setBufferId(newBufferId);
+ handlerCreateDrawObj(
+ bufferId,
+ setBufferId,
+ 'LineString',
+ bufferPaths,
+ 'BUFFER'
+ );
}
} else if (areas.areaType === 'POLYGON') {
+ handlerCreateDrawObj(
+ drawObjId,
+ setDrawObjId,
+ 'Polygon',
+ [paths],
+ 'POLYGON'
+ );
}
}
// 현재 그려진 도형 저장
@@ -180,6 +201,26 @@ export const LaancDrawControl = props => {
}
};
+ // 기존에 그려진 도형 지우고 새 도형 생성
+ const handlerCreateDrawObj = (id, setter, type, coord, propertyId) => {
+ const obj = drawObj.get(id);
+ if (obj) drawObj.delete(id);
+
+ const newObj = {
+ type: type,
+ coordinates: coord
+ };
+ const newObjId = drawObj.add(newObj);
+ drawObj.setFeatureProperty(newObjId[0], 'id', propertyId);
+ setter(newObjId[0]);
+
+ if (propertyId !== 'BUFFER') {
+ drawObj.changeMode('direct_select', {
+ featureId: newObjId[0]
+ });
+ }
+ };
+
const handlerRemoveMarker = () => {
const ele = document.getElementsByClassName('mapboxgl-popup');
const eleArr = Array.from(ele);
@@ -198,20 +239,27 @@ export const LaancDrawControl = props => {
};
const handlerCreateAllMarker = coords => {
- for (let i = 0; i < coords.length; i++) {
- if (i === 0) {
- handlerCreateOneMarker([0, -10], coords[i], 'Start');
- } else {
- const lngLat = handlerGetMidPoint(coords[i - 1], coords[i]);
- const text = CalculateDistance(coords[i - 1], coords[i]);
- handlerCreateOneMarker([0, 0], lngLat, text);
+ const areas = props.areaCoordList[0];
+
+ if (areas.areaType !== 'CIRCLE') {
+ for (let i = 0; i < coords.length; i++) {
+ if (i === 0) {
+ handlerCreateOneMarker([0, -10], coords[i], 'Start');
+ } else {
+ const lngLat = handlerGetMidPoint(coords[i - 1], coords[i]);
+ const text = CalculateDistance(coords[i - 1], coords[i]);
+ handlerCreateOneMarker([0, 0], lngLat, text);
+ }
}
+ } else {
+ handlerCreateOneMarker([0, -10], coords[0], areas.bufferZone);
}
};
const drawInit = () => {
drawObj.deleteAll();
handlerRemoveMarker();
+ setDrawObjId();
props.handlerInitCoordinates();
@@ -229,7 +277,7 @@ export const LaancDrawControl = props => {
} else if (mode === 'POLYGON') {
drawObj.changeMode('draw_polygon');
} else if (mode === 'CIRCLE') {
- drawObj.changeMode('draw_circle');
+ drawObj.changeMode('draw_circle', { initialRadiusInKm: 100 / 1000 });
}
};
diff --git a/src/views/laanc/FlightArea.js b/src/views/laanc/FlightArea.js
index 173886ff..25408762 100644
--- a/src/views/laanc/FlightArea.js
+++ b/src/views/laanc/FlightArea.js
@@ -560,6 +560,22 @@ export default function FlightArea({
>
초기화
+
{wheather[0]?.coordList[0].lat != 0 ? (