diff --git a/src/containers/flight/ControlApprovalsContainer.js b/src/containers/flight/ControlApprovalsContainer.js index 6cd02d98..d35dee3c 100644 --- a/src/containers/flight/ControlApprovalsContainer.js +++ b/src/containers/flight/ControlApprovalsContainer.js @@ -336,9 +336,25 @@ export default function ControlApprovalsContainer({ mode }) { }; mapInstance.addLayer(centerPoint); + const reqRadiusCircle = { + id: 'polyline', + type: 'line', + source: 'controlLayer', + layout: { + 'line-cap': 'round', + 'line-join': 'round' + }, + paint: { + 'line-color': '#8a1c05', + 'line-width': 1 + }, + filter: ['in', ['get', 'id'], ['literal', ['LINE', 'outline']]] + }; + mapInstance.addLayer(reqRadiusCircle); + mapInstance.addLayer(flightlayerBuffer('controlLayer')); mapInstance.addLayer(flightlayerPolygon('controlLayer')); - mapInstance.addLayer(flightlayerPolyline('controlLayer')); + // mapInstance.addLayer(flightlayerPolyline('controlLayer')); } dispatch(clientSetIsMapLoading(true)); @@ -366,12 +382,22 @@ export default function ControlApprovalsContainer({ mode }) { const circle = InitFeature('Polygon', 'CIRCLE'); circle.properties.center = [areas.lon, areas.lat]; circle.geometry.coordinates = circleCoords; + controlLayer.features.push(circle); const point = InitFeature('Point', 'POINT'); point.geometry.coordinates = [areas.lon, areas.lat]; controlLayer.features.push(point); - controlLayer.features.push(circle); + // 요청반경 도식화 + if (areas?.reqRadius) { + const reqCoords = handlerGetCircleCoord( + [areas.lon, areas.lat], + areas.reqRadius + ); + const reqCircleLine = InitFeature('LineString', 'LINE'); + reqCircleLine.geometry.coordinates = reqCoords[0]; + controlLayer.features.push(reqCircleLine); + } fitZoomPaths = circleCoords[0]; handlerFitBounds(mapObject, fitZoomPaths, 400, 'CIRCLE', 'flight'); diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js index 5f47fd5e..d9581219 100644 --- a/src/containers/flight/OperationApprovalsContainer.js +++ b/src/containers/flight/OperationApprovalsContainer.js @@ -394,9 +394,25 @@ export default function OperationApprovalsContainer({ mode }) { }; mapInstance.addLayer(centerPoint); + const reqRadiusCircle = { + id: 'polyline', + type: 'line', + source: 'operationLayer', + layout: { + 'line-cap': 'round', + 'line-join': 'round' + }, + paint: { + 'line-color': '#8a1c05', + 'line-width': 1 + }, + filter: ['in', ['get', 'id'], ['literal', ['LINE', 'outline']]] + }; + mapInstance.addLayer(reqRadiusCircle); + mapInstance.addLayer(flightlayerBuffer('operationLayer')); mapInstance.addLayer(flightlayerPolygon('operationLayer')); - mapInstance.addLayer(flightlayerPolyline('operationLayer')); + // mapInstance.addLayer(flightlayerPolyline('operationLayer')); } dispatch(clientSetIsMapLoading(true)); @@ -431,12 +447,22 @@ export default function OperationApprovalsContainer({ mode }) { circle.properties.key = area?.planAreaSno; circle.properties.addr = area.addr; circle.geometry.coordinates = circleCoords; + operationLayer.features.push(circle); const point = InitFeature('Point', 'POINT'); point.geometry.coordinates = [area.lon, area.lat]; operationLayer.features.push(point); - operationLayer.features.push(circle); + // 요청반경 도식화 + if (area?.reqRadius) { + const reqCoords = handlerGetCircleCoord( + [area.lon, area.lat], + area.reqRadius + ); + const reqCircleLine = InitFeature('LineString', 'LINE'); + reqCircleLine.geometry.coordinates = reqCoords[0]; + operationLayer.features.push(reqCircleLine); + } }); const features = turf.featureCollection([]);