|
|
@ -109,6 +109,14 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (map) { |
|
|
|
if (map) { |
|
|
|
|
|
|
|
map.on('click', e => { |
|
|
|
|
|
|
|
const features = map |
|
|
|
|
|
|
|
.queryRenderedFeatures(e.point) |
|
|
|
|
|
|
|
.find(feature => feature.source === 'operationLayer'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (features) setSelected(features.properties.key); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
window._mapbox = map; |
|
|
|
window._mapbox = map; |
|
|
|
let mapInstance = mode === 'container' ? map : window.opener._mapbox; |
|
|
|
let mapInstance = mode === 'container' ? map : window.opener._mapbox; |
|
|
|
setMapObject(mapInstance); |
|
|
|
setMapObject(mapInstance); |
|
|
@ -120,7 +128,7 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
if (e.data.type) { |
|
|
|
if (e.data.type) { |
|
|
|
const { type } = e.data; |
|
|
|
const { type } = e.data; |
|
|
|
const { payload } = e.data; |
|
|
|
const { payload } = e.data; |
|
|
|
console.log(payload); |
|
|
|
// console.log(payload);
|
|
|
|
switch (type) { |
|
|
|
switch (type) { |
|
|
|
case 'initalState': |
|
|
|
case 'initalState': |
|
|
|
popupRef.current.postMessage({ |
|
|
|
popupRef.current.postMessage({ |
|
|
@ -298,20 +306,20 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
const handlerMapInit = () => { |
|
|
|
const handlerMapInit = () => { |
|
|
|
let mapInstance = mode === 'container' ? map : window.opener._mapbox; |
|
|
|
let mapInstance = mode === 'container' ? map : window.opener._mapbox; |
|
|
|
|
|
|
|
|
|
|
|
if (mapInstance.getSource('preview')) { |
|
|
|
if (mapInstance.getSource('operationLayer')) { |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
mapInstance.addSource('preview', { |
|
|
|
mapInstance.addSource('operationLayer', { |
|
|
|
type: 'geojson', |
|
|
|
type: 'geojson', |
|
|
|
data: operationLayer |
|
|
|
data: operationLayer |
|
|
|
}); |
|
|
|
}); |
|
|
|
mapInstance.addLayer(flightlayerWayPoint('preview')); |
|
|
|
mapInstance.addLayer(flightlayerWayPoint('operationLayer')); |
|
|
|
mapInstance.addLayer(flightlayerBuffer('preview')); |
|
|
|
mapInstance.addLayer(flightlayerBuffer('operationLayer')); |
|
|
|
mapInstance.addLayer(flightlayerPolygon('preview')); |
|
|
|
mapInstance.addLayer(flightlayerPolygon('operationLayer')); |
|
|
|
mapInstance.addLayer(flightlayerPolyline('preview')); |
|
|
|
mapInstance.addLayer(flightlayerPolyline('operationLayer')); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
dispatch(clientSetIsMapLoading(true)); |
|
|
|
dispatch(clientSetIsMapLoading(true)); |
|
|
|
// const preview = mapInstance.getSource('preview');
|
|
|
|
// const preview = mapInstance.getSource('operationLayer');
|
|
|
|
|
|
|
|
|
|
|
|
// if (preview) setPreviewLayer(preview);
|
|
|
|
// if (preview) setPreviewLayer(preview);
|
|
|
|
|
|
|
|
|
|
|
@ -340,6 +348,10 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
const circle = InitFeature('Polygon', 'CIRCLE'); |
|
|
|
const circle = InitFeature('Polygon', 'CIRCLE'); |
|
|
|
circle.properties.center = [area.lon, area.lat]; |
|
|
|
circle.properties.center = [area.lon, area.lat]; |
|
|
|
circle.geometry.coordinates = circleCoords; |
|
|
|
circle.geometry.coordinates = circleCoords; |
|
|
|
|
|
|
|
circle.properties = { |
|
|
|
|
|
|
|
...circle.properties, |
|
|
|
|
|
|
|
key: area?.planAreaSno |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
operationLayer.features.push(circle); |
|
|
|
operationLayer.features.push(circle); |
|
|
|
}); |
|
|
|
}); |
|
|
@ -355,14 +367,13 @@ export default function OperationApprovalsContainer({ mode }) { |
|
|
|
|
|
|
|
|
|
|
|
if (areaCoordList.length !== 1 || !areaCoordList[0]?.key) { |
|
|
|
if (areaCoordList.length !== 1 || !areaCoordList[0]?.key) { |
|
|
|
handlerInfoWindow(areaCoordList); |
|
|
|
handlerInfoWindow(areaCoordList); |
|
|
|
mapObject?.getSource('preview').setData(operationLayer); |
|
|
|
mapObject?.getSource('operationLayer')?.setData(operationLayer); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 데이터블록 표출 이벤트
|
|
|
|
// 데이터블록 표출 이벤트
|
|
|
|
const handlerInfoWindow = areaList => { |
|
|
|
const handlerInfoWindow = areaList => { |
|
|
|
console.log(areaList, '====areaList'); |
|
|
|
|
|
|
|
if (dataBlocks.length > 0) { |
|
|
|
if (dataBlocks.length > 0) { |
|
|
|
dataBlocks?.map(block => { |
|
|
|
dataBlocks?.map(block => { |
|
|
|
block.remove(); |
|
|
|
block.remove(); |
|
|
|