pav
/
pav-fe-kac-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://gitea.palntour.com/pav/pav-fe-kac

pull/2/head
김지은 1 year ago
parent
b483bbacd4 6b10862397
commit
dee4d948e1
3 changed files with 63 additions and 91 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/components/basis/flight/plan/FlightPlanAreaMapBox.js
  2. 135
      src/components/map/mapbox/draw/MapBoxDraw.js
  3. 16
      src/containers/basis/flight/plan/FlightPlanAreaContainer.js

3
src/components/basis/flight/plan/FlightPlanAreaMapBox.js
Unescape View File

@ -161,7 +161,8 @@ export const FlightPlanAreaMapBox = props => {
center: [126.612647, 37.519893], // starting position [lng, lat]
// zoom: !areaCoordList ? 14 : bufferZoom.bufferzoom, // starting zoom
zoom: 15,
antialias: true
antialias: true,
attributionControl: false
});
const language = new MapboxLanguage();

135
src/components/map/mapbox/draw/MapBoxDraw.js
Unescape View File

@ -53,6 +53,7 @@ export const CalculateDistance = (mouse, center) => {
export const MapBoxDraw = props => {
const mapControl = useSelector(state => state.controlMapReducer);
const mapObject = props.mapObject;
const canvas = mapObject.getCanvasContainer();
//비행계획서 작성 완료 후에는 수정 불가일거라서 이거는 임시 보류
const isDone = props.isDone;
@ -64,13 +65,6 @@ export const MapBoxDraw = props => {
desc: ''
});
const canvas = mapObject.getCanvasContainer();
// const [pastPoint, setPoint] = useState([]);
// const [pastPolyline, setPolyline] = useState();
// const [pastBuffer, setBuffer] = useState();
// const [pastPolygon, setPolygon] = useState();
// const [pastCircle, setCircle] = useState();
//도형들이 온전히 그려진 후 변경 될 때 마다 감지
const [isDrawDone, setIsDrawDone] = useState(false);
@ -95,8 +89,6 @@ export const MapBoxDraw = props => {
let point = [];
//꼭짓점(polyline, polygon 사용)
let vertex = InitFeature('MultiPoint', 'vertex');
let dragCircleIdx;
useEffect(() => {
@ -135,9 +127,9 @@ export const MapBoxDraw = props => {
const handlerClearMode = () => {
console.log('clearMode');
removeGeoJson();
finishDraw();
removeGeoJson();
props.handlerInitCoordinates();
};
@ -167,12 +159,6 @@ export const MapBoxDraw = props => {
const removeGeoJson = () => {
console.log('removeGeoJson');
// setPolyline();
// setBuffer();
// setPolygon();
// setCircle();
// setPoint([]);
handlerRemoveMarker();
guideLine.geometry.coordinates = [];
@ -184,13 +170,12 @@ export const MapBoxDraw = props => {
circle.geometry.coordinates = [];
point = [];
vertex.geometry.coordinates = [];
geojson.features = [];
mapObject.getSource('geojson').setData(geojson);
};
const finishDraw = e => {
const finishDraw = () => {
removeListener();
console.log('finish');
@ -200,7 +185,7 @@ export const MapBoxDraw = props => {
if (drawType === 'LINE') {
if (path.length > 1) {
handlerReplaceDuplicate('guideline', '');
handlerSaveAreaInfo(lineString.geometry.coordinates, lineString);
handlerSaveAreaInfo(lineString.geometry.coordinates);
} else {
setAlertModal({
isOpen: true,
@ -209,7 +194,7 @@ export const MapBoxDraw = props => {
});
removeGeoJson();
props.handlerDrawType('RESET');
mapObject.on('click', clickEve);
// mapObject.on('click', clickEve);
}
mapObject.getSource('geojson').setData(geojson);
} else if (drawType === 'POLYGON') {
@ -217,7 +202,7 @@ export const MapBoxDraw = props => {
polygon.geometry.coordinates[0] = path;
handlerReplaceDuplicate('polygon', polygon);
handlerSaveAreaInfo(polygon.geometry.coordinates[0], polygon);
handlerSaveAreaInfo(polygon.geometry.coordinates[0]);
} else {
setAlertModal({
isOpen: true,
@ -226,7 +211,7 @@ export const MapBoxDraw = props => {
});
removeGeoJson();
props.handlerDrawType('RESET');
mapObject.on('click', clickEve);
// mapObject.on('click', clickEve);
}
}
mapObject.getSource('geojson').setData(geojson);
@ -240,9 +225,11 @@ export const MapBoxDraw = props => {
if (drawType === 'CIRCLE') onClickCircle(e);
};
//polyline, polygon 생성
// polyline, polygon 생성
const onClickFeature = (e, obj) => {
const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
//현재 내 좌표가 waypoint레이어의 geojson도형 안에 속해있는지 안해있는지?
//geojson을 반환해주는 듯?
const features = mapObject.queryRenderedFeatures(e.point, {
layers: ['waypoint']
});
@ -261,7 +248,11 @@ export const MapBoxDraw = props => {
geo => geo.properties?.id === 'point'
).length;
const wayPoint = handlerCreatePoint(formatCoord, index);
const wayPoint = handlerCreatePoint(
formatCoord,
index,
mapControl.drawType
);
handlerReplaceDuplicate('Point', wayPoint);
}
@ -288,7 +279,7 @@ export const MapBoxDraw = props => {
mapObject.getSource('geojson').setData(geojson);
};
//polyline 가이드 생성
// polyline 가이드 생성
const onMouseMovePolyline = e => {
const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
if (guideLine.geometry.coordinates.length > 1) {
@ -300,7 +291,7 @@ export const MapBoxDraw = props => {
mapObject.getSource('geojson').setData(geojson);
};
//polygon 가이드 생성
// polygon 가이드 생성
const onMouseMovePolygon = e => {
const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
@ -320,7 +311,7 @@ export const MapBoxDraw = props => {
mapObject.getSource('geojson').setData(geojson);
};
//circle 생성
// circle 생성
const onClickCircle = e => {
console.log('circleClick');
const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
@ -334,7 +325,7 @@ export const MapBoxDraw = props => {
circle.geometry.coordinates = circleCoords;
handlerReplaceDuplicate('circle', circle);
handlerSaveAreaInfo('', circle);
handlerSaveAreaInfo('');
addMileStone(formatCoord, 100);
mapObject.getSource('geojson').setData(geojson);
@ -344,6 +335,7 @@ export const MapBoxDraw = props => {
e.preventDefault();
console.log('down');
//타입 교체만 하면 왜 처음엔 down이 두번 잡힐까...
// console.log(e.features[0].properties.type, '>>down e');
canvas.style.cursor = 'grab';
@ -398,7 +390,7 @@ export const MapBoxDraw = props => {
mapObject.getSource('geojson').setData(geojson);
};
const onMouseUp = e => {
const onMouseUp = () => {
canvas.style.cursor = '';
console.log('up');
@ -408,7 +400,15 @@ export const MapBoxDraw = props => {
mapObject.off('click', clickEve);
setMouseDownEve(false);
const obj = handlerMatchObj(mapControl.drawType);
const type = mapControl.drawType;
const obj =
type === 'LINE'
? lineString
: type === 'POLYGON'
? polygon
: type === 'CIRCLE'
? circle
: undefined;
if (obj) {
const id = obj.properties?.id;
@ -419,9 +419,10 @@ export const MapBoxDraw = props => {
if (id === 'circle') {
mapObject.on('click', clickEve);
handlerSaveAreaInfo('', circle);
handlerSaveAreaInfo('');
} else {
handlerSaveAreaInfo(coord, obj);
// mapObject.on('mousedown', 'waypoint', onMouseDown);
handlerSaveAreaInfo(coord);
}
} else {
// 저장된 좌표 불러왔을 때
@ -432,19 +433,19 @@ export const MapBoxDraw = props => {
areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat]));
if (type === 'LINE') {
handlerSaveAreaInfo(lineString.geometry.coordinates, lineString);
handlerSaveAreaInfo(lineString.geometry.coordinates);
} else if (type === 'POLYGON') {
handlerSaveAreaInfo(polygon.geometry.coordinates[0], polygon);
handlerSaveAreaInfo(polygon.geometry.coordinates[0]);
} else if (type === 'CIRCLE') {
handlerSaveAreaInfo('', circle);
handlerSaveAreaInfo('');
}
}
};
const handlerAreaInfo = path => {
// 도형 정보 변경되면 저장
const handlerSaveAreaInfo = coord => {
console.log('areaInfo');
let bufferZone = 100;
if (polygon.geometry.coordinates.length > 0) bufferZone = 0;
const bufferZone = polygon.geometry.coordinates.length > 0 ? 0 : 100;
const prePath = [];
if (lineString.geometry.coordinates.length > 0) {
@ -456,7 +457,7 @@ export const MapBoxDraw = props => {
}
if (areaInfo.areaType !== 'CIRCLE') {
path.forEach(item => {
coord.forEach(item => {
const p = {
lat: item[1],
lon: item[0]
@ -480,9 +481,10 @@ export const MapBoxDraw = props => {
}
props.handlerCoordinates(areaInfo);
setIsDrawDone(true);
};
// let이라서 지워지는 도형 재 생성
// 확정된 도형 재 생성(let이라서 지워지기 때문에)
const handlerPastDraw = () => {
if (props.areaCoordList) {
console.log('pastDraw');
@ -498,13 +500,11 @@ export const MapBoxDraw = props => {
circle.properties.center = paths[0];
circle.geometry.coordinates = circleCoords;
// setCircle(circle);
geojson.features.push(circle);
} else {
if (areas.areaType === 'LINE') {
lineString.geometry.coordinates = paths;
// setPolyline(lineString);
geojson.features.push(lineString);
// 버퍼 생성
@ -516,21 +516,22 @@ export const MapBoxDraw = props => {
);
bufferPolyline.geometry.coordinates = bufferPaths;
// setBuffer(bufferPolyline);
handlerReplaceDuplicate('buffer', bufferPolyline);
}
} else if (areas.areaType === 'POLYGON') {
polygon.geometry.coordinates = [paths];
// setPolygon(polygon);
geojson.features.push(polygon);
}
// 포인트 생성
paths.forEach((p, i) => handlerCreatePoint(p, i));
paths.forEach((p, i) => handlerCreatePoint(p, i, areas.areaType));
handlerReplaceDuplicate('point', '');
point.forEach(p => geojson.features.push(p));
//once로 하면 꼬이는건 해결되는데 지도를 움직이면 이벤트가 사라짐 -> 왜? onMouseDown이 실행된게 아니잖아?
//on으로 하면 그 반대 현상 -> 이벤트 다 지워줬는데 왜 down이 두번 잡혀??????
//얘만 해결하면 끝인데...
if (!mouseDownEve) {
mapObject.on('mousedown', 'waypoint', onMouseDown);
setMouseDownEve(true);
@ -576,14 +577,13 @@ export const MapBoxDraw = props => {
}
}
const content = handlerGetReplaceContent(distance);
const popup = new props.mapboxgl.Popup({
offset: anchor,
closeButton: false,
closeOnClick: false
})
.setLngLat(lngLat)
.setHTML(content)
.setHTML(handlerGetHtmlContent(distance))
.addTo(mapObject);
};
@ -622,7 +622,7 @@ export const MapBoxDraw = props => {
};
// html Content 반환
const handlerGetReplaceContent = distance => {
const handlerGetHtmlContent = distance => {
const text =
typeof distance === 'number' ? fromMetersToText(distance) : distance;
@ -640,7 +640,7 @@ export const MapBoxDraw = props => {
return text;
};
//중복되는 obj 제거 or 제거 후 새로 생성
// geojson에서 중복되는 obj 제거 or 제거 후 새로 생성
const handlerReplaceDuplicate = (id, obj) => {
geojson.features = geojson.features.filter(
geo => geo.properties?.id !== id
@ -648,42 +648,13 @@ export const MapBoxDraw = props => {
if (obj !== '') geojson.features.push(obj);
};
//도형 완성된 좌표 생성 or 변경 될 때 동작
const handlerSaveAreaInfo = (coord, obj) => {
if (obj.properties?.id === 'polyline') {
// setPolyline(obj);
} else if (obj.properties?.id === 'polygon') {
// setPolygon(obj);
} else if (obj.properties?.id === 'circle') {
// setCircle(obj);
}
if (obj.properties?.id !== 'circle') {
// setPoint(point);
}
handlerAreaInfo(coord);
setIsDrawDone(true);
};
//geojson에서 원하는 Id의 coord만 추출
// geojson에서 원하는 Id의 coord만 추출
const handlerGetGeoJsonCoord = id => {
return geojson.features
.filter(geo => geo.properties?.id === id)
.map(geo => geo.geometry.coordinates);
};
// drawType에 따른 obj 반환
const handlerMatchObj = drawType => {
if (drawType === 'LINE') {
return lineString;
} else if (drawType === 'POLYGON') {
return polygon;
} else if (drawType === 'CIRCLE') {
return circle;
}
};
// circle 360도 좌표 반환
const handlerGetCircleCoord = (center, distance) => {
const options = {
@ -694,14 +665,14 @@ export const MapBoxDraw = props => {
};
// 포인트 생성
const handlerCreatePoint = (coord, index) => {
const handlerCreatePoint = (coord, index, type) => {
const wayPoint = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: coord
},
properties: { id: 'point', index: index }
properties: { id: 'point', index: index, type: type }
};
point.push(wayPoint);

16
src/containers/basis/flight/plan/FlightPlanAreaContainer.js
Unescape View File

@ -39,14 +39,14 @@ const FlightPlanAreaContainer = ({ handleModal, isDone, isDisabled }) => {
<Row>
<Col md={6} lg={6}>
{airArea != null ? (
<FlightPlanAreaMap
airArea={airArea}
handleConfirm={handleConfirm}
isDone={isDone}
isDisabled={isDisabled}
/>
) : // <FlightPlanAreaMapBox isDone={isDone} isDisabled={isDisabled} />
null}
// <FlightPlanAreaMap
// airArea={airArea}
// handleConfirm={handleConfirm}
// isDone={isDone}
// isDisabled={isDisabled}
// />
<FlightPlanAreaMapBox isDone={isDone} isDisabled={isDisabled} />
) : null}
</Col>
<Col md={6} lg={6}>
<FlightPlanAreaDetailContainer

Write Preview
Loading…
Cancel
Save