From 5f7f987452068d5c8ae71c30db5eecf9b199e659 Mon Sep 17 00:00:00 2001 From: kimjh2369 Date: Wed, 10 Jul 2024 17:03:08 +0900 Subject: [PATCH] =?UTF-8?q?=EC=A7=80=EB=8F=84=20=EC=9C=A0=ED=98=95=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map/mapbox/MapBoxMap.js | 184 +++++++++++------- .../flight/ControlApprovalsContainer.js | 4 +- .../flight/OperationApprovalsContainer.js | 4 +- src/utility/hooks/useMapType.ts | 21 -- 4 files changed, 113 insertions(+), 100 deletions(-) diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index 57239d8c..3f11aa50 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/src/components/map/mapbox/MapBoxMap.js @@ -104,9 +104,7 @@ export default function MapBoxMap() { // 지도 초기 셋팅 useLayoutEffect(() => { - if (mapState.mapType === 'TERRAIN' || mapState.mapType === 'SATELLITE') { - mapBoxMapInit(); - } + mapBoxMapInit(); }, [mapState.mapType]); // 공역 표출 정보에 따른 공역 변경 @@ -353,17 +351,115 @@ export default function MapBoxMap() { const labelLayerId = layers.find( layer => layer.type === 'symbol' && layer.layout['text-field'] ).id; + if (mapState.mapType !== '2D') { + // 지형 3d start + map.addSource('mapbox-dem', { + type: 'raster-dem', + url: 'mapbox://mapbox.mapbox-terrain-dem-v1' + // tileSize: 512, + // maxZoom: 14, + // pitch: 0, // Set pitch to 0 for a 2D view + // bearing: 0 // Set bearing to 0 for a north-up view + }); + map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 }); + if (mapState.mapType === 'NORMAL') { + mapState.map.setTerrain(); + mapState.map.setMaxPitch(85); + mapState.map.dragRotate.enable(); + } else { + map.setMaxPitch(85); + map.dragRotate.enable(); + } - // 지형 3d start - map.addSource('mapbox-dem', { - type: 'raster-dem', - url: 'mapbox://mapbox.mapbox-terrain-dem-v1' - // tileSize: 512, - // maxZoom: 14, - // pitch: 0, // Set pitch to 0 for a 2D view - // bearing: 0 // Set bearing to 0 for a north-up view - }); - map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 }); + map.addLayer( + { + id: 'add-3d-buildings', + source: 'composite', + 'source-layer': 'building', + filter: ['==', 'extrude', 'true'], + type: 'fill-extrusion', + minzoom: 15, + paint: { + 'fill-extrusion-color': '#fff', + + // Use an 'interpolate' expression to + // add a smooth transition effect to + // the buildings as the user zooms in. + 'fill-extrusion-height': [ + 'interpolate', + ['linear'], + ['zoom'], + 15, + 0, + 15.05, + ['get', 'height'] + ], + 'fill-extrusion-base': [ + 'interpolate', + ['linear'], + ['zoom'], + 15, + 0, + 15.05, + ['get', 'min_height'] + ], + 'fill-extrusion-opacity': 0.3 + } + }, + labelLayerId + ); + // 김포 3d 공역 + map.addLayer({ + id: 'route', + type: 'custom', + renderingMode: '3d', + onAdd: function () { + console.log(mapState.mapType); + for (let i = 0; i < gimPo.features.length; i++) { + let line; + const options = { + path: gimPo.features[i].geometry.coordinates + }; + let lineGeometry = options.path; + line = tb.line({ + geometry: lineGeometry, + width: gimPo.features[i].properties['stroke-width'], + color: gimPo.features[i].properties.stroke + }); + tb.add(line); + } + }, + render: function () { + tb.update(); + } + }); + } else { + map.setTerrain(); + map.setMaxPitch(0); + map.setBearing(0); + map.dragRotate.disable(); + gimPo.features.map((i, idx) => { + map.addSource(`lineRoute${idx}`, { + type: 'geojson', + data: { + ...i + } + }); + map.addLayer({ + id: `lineRoute${idx}`, + type: 'line', + source: `lineRoute${idx}`, + layout: { + 'line-join': 'round', + 'line-cap': 'round' + }, + paint: { + 'line-color': i.properties.stroke, + 'line-width': i.properties['stroke-width'] + } + }); + }); + } // 지형 높이 표시 // map.addLayer({ @@ -417,68 +513,6 @@ export default function MapBoxMap() { // }); // 등고선 end // 3d building - map.addLayer( - { - id: 'add-3d-buildings', - source: 'composite', - 'source-layer': 'building', - filter: ['==', 'extrude', 'true'], - type: 'fill-extrusion', - minzoom: 15, - paint: { - 'fill-extrusion-color': '#fff', - - // Use an 'interpolate' expression to - // add a smooth transition effect to - // the buildings as the user zooms in. - 'fill-extrusion-height': [ - 'interpolate', - ['linear'], - ['zoom'], - 15, - 0, - 15.05, - ['get', 'height'] - ], - 'fill-extrusion-base': [ - 'interpolate', - ['linear'], - ['zoom'], - 15, - 0, - 15.05, - ['get', 'min_height'] - ], - 'fill-extrusion-opacity': 0.3 - } - }, - labelLayerId - ); - - // 김포 3d 공역 - map.addLayer({ - id: 'route', - type: 'custom', - renderingMode: '3d', - onAdd: function () { - for (let i = 0; i < gimPo.features.length; i++) { - let line; - const options = { - path: gimPo.features[i].geometry.coordinates - }; - let lineGeometry = options.path; - line = tb.line({ - geometry: lineGeometry, - width: gimPo.features[i].properties['stroke-width'], - color: gimPo.features[i].properties.stroke - }); - tb.add(line); - } - }, - render: function () { - tb.update(); - } - }); // 공역 색상 및 공역 표출 정보에 따른 노출 handlerCreateAirSpace(map); diff --git a/src/containers/flight/ControlApprovalsContainer.js b/src/containers/flight/ControlApprovalsContainer.js index 7e5bbddb..2b92ef50 100644 --- a/src/containers/flight/ControlApprovalsContainer.js +++ b/src/containers/flight/ControlApprovalsContainer.js @@ -46,7 +46,7 @@ export default function ControlApprovalsContainer({ mode }) { const [filter, setFilter] = useState(''); // 지도 const [mapObject, setMapObject] = useState(); - const [mapType, setMapType] = useMapType(); + const [setMapType] = useMapType(); const { areaCoordList, isOpenModal } = useSelector(state => state.laancState); const [startDate, setStartDate] = useState(dayjs().format('YYYY-MM-DD')); @@ -63,7 +63,7 @@ export default function ControlApprovalsContainer({ mode }) { // 미니맵 레이어 const [previewLayer, setPreviewLayer] = useState(); - const map = useSelector(state => state.mapState.map); + const { map, mapType } = useSelector(state => state.mapState); // popup const [isPopup, setIsPopup] = useState(false); diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js index d3c021c9..50a69df5 100644 --- a/src/containers/flight/OperationApprovalsContainer.js +++ b/src/containers/flight/OperationApprovalsContainer.js @@ -47,7 +47,7 @@ export default function OperationApprovalsContainer({ mode }) { const [filter, setFilter] = useState(''); // 지도 const [mapObject, setMapObject] = useState(); - const [mapType, setMapType] = useMapType(); + const [setMapType] = useMapType(); const { areaCoordList, isOpenModal } = useSelector(state => state.laancState); const [startDate, setStartDate] = useState(dayjs().format('YYYY-MM-DD')); @@ -64,7 +64,7 @@ export default function OperationApprovalsContainer({ mode }) { // 미니맵 레이어 const [previewLayer, setPreviewLayer] = useState(); - const map = useSelector(state => state.mapState.map); + const { map, mapType } = useSelector(state => state.mapState); // popup const [isPopup, setIsPopup] = useState(false); diff --git a/src/utility/hooks/useMapType.ts b/src/utility/hooks/useMapType.ts index 1c9b47e8..59499f76 100644 --- a/src/utility/hooks/useMapType.ts +++ b/src/utility/hooks/useMapType.ts @@ -13,29 +13,8 @@ const useMapType = () => { const handlerMapType = (type: mapType) => { if (type === 'TERRAIN') { mapState.map.setStyle('mapbox://styles/mapbox/streets-v12'); - mapState.map.setTerrain({ - source: 'mapbox-dem', - exaggeration: 1 - }); - mapState.map.setMaxPitch(85); - mapState.map.dragRotate.enable(); - } else if (type === 'NORMAL') { - mapState.map.setTerrain(); - mapState.map.setMaxPitch(85); - mapState.map.dragRotate.enable(); - } else if (type === '2D') { - mapState.map.setTerrain(); - mapState.map.setMaxPitch(0); - mapState.map.setBearing(0); - mapState.map.dragRotate.disable(); } else if (type === 'SATELLITE') { mapState.map.setStyle('mapbox://styles/mapbox/satellite-streets-v12'); - mapState.map.setTerrain({ - source: 'mapbox-dem', - exaggeration: 1 - }); - mapState.map.setMaxPitch(85); - mapState.map.dragRotate.enable(); } dispatch(clientMapTypeChange(type)); // setMapType(type);