diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js index 725bf3ee..6e34c5c8 100644 --- a/src/containers/flight/OperationApprovalsContainer.js +++ b/src/containers/flight/OperationApprovalsContainer.js @@ -428,6 +428,9 @@ export default function OperationApprovalsContainer({ mode }) { const circle = InitFeature('Polygon', 'CIRCLE'); circle.properties.center = [area.lon, area.lat]; + circle.properties.limitZoneNm = area.limitZoneNm || '-'; + circle.properties.applyNo = area.applyNo; + circle.properties.zoneNo = area.zoneNo; circle.geometry.coordinates = circleCoords; circle.properties = { ...circle.properties, @@ -451,8 +454,46 @@ export default function OperationApprovalsContainer({ mode }) { handlerFitBounds(mapObject, fitZoomPaths, 400, 'POLYGON', 'flight'); if (areaCoordList.length !== 1 || !areaCoordList[0]?.key) { - handlerInfoWindow(areaCoordList); mapObject?.getSource('operationLayer')?.setData(operationLayer); + let dataBlock = null; + mapObject?.on('mousemove', 'polygon-flight', e => { + if (dataBlock) { + dataBlock.remove(); + } + const data = e.features[0].properties; + const lnglat = JSON.parse(data?.center); + + const content = ` +
+
+ ${data?.applyNo} +
+
+
+ 비행구역 ${data?.zoneNo} / 주소- / ${data.limitZoneNm} +
+
+
+ `; + + if (mapObject) { + dataBlock = new mapboxgl.Popup({ + anchor: 'bottom-left', + offset: [20, -20], + closeButton: false, + closeOnClick: false, + closeOnMove: false + }) + .setLngLat({ lng: lnglat[0], lat: lnglat[1] }) + .setHTML(content) + .addTo(mapObject); + } + }); + mapObject?.on('mouseleave', 'polygon-flight', e => { + if (dataBlock) { + dataBlock.remove(); + } + }); } } };