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

지도 유형 수정

master
김장현 2 months ago
parent
408657a42a
commit
5f7f987452
4 changed files with 113 additions and 100 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. 146
      src/components/map/mapbox/MapBoxMap.js
  2. 4
      src/containers/flight/ControlApprovalsContainer.js
  3. 4
      src/containers/flight/OperationApprovalsContainer.js
  4. 21
      src/utility/hooks/useMapType.ts

146
src/components/map/mapbox/MapBoxMap.js
Unescape View File

@ -104,9 +104,7 @@ export default function MapBoxMap() {
// 지도 초기 셋팅
useLayoutEffect(() => {
if (mapState.mapType === 'TERRAIN' || mapState.mapType === 'SATELLITE') {
mapBoxMapInit();
}
}, [mapState.mapType]);
// 공역 표출 정보에 따른 공역 변경
@ -353,7 +351,7 @@ 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',
@ -364,59 +362,15 @@ export default function MapBoxMap() {
// 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();
}
// 지형 높이 표시
// map.addLayer({
// id: 'contour-labels',
// type: 'symbol',
// source: {
// type: 'vector',
// url: 'mapbox://mapbox.mapbox-terrain-v2'
// },
// 'source-layer': 'contour',
// layout: {
// visibility: 'visible',
// 'symbol-placement': 'line',
// 'text-field': ['concat', ['to-string', ['get', 'ele']], 'm']
// },
// paint: {
// 'icon-color': '#877b59',
// 'icon-halo-width': 1,
// 'text-color': '#877b59',
// 'text-halo-width': 1
// }
// });
// map.addLayer({
// id: 'sky',
// type: 'sky',
// paint: {
// 'sky-type': 'atmosphere',
// 'sky-atmosphere-sun': [0.0, 90.0],
// 'sky-atmosphere-sun-intensity': 15
// }
// });
// 지형 3d end
// 등고선 start
// map.addLayer({
// id: 'contours',
// type: 'line',
// source: {
// type: 'vector',
// url: 'mapbox://mapbox.mapbox-terrain-v2'
// },
// 'source-layer': 'contour',
// layout: {
// visibility: 'visible',
// 'line-join': 'round',
// 'line-cap': 'round'
// },
// paint: {
// 'line-color': '#877b59',
// 'line-width': 1
// }
// });
// 등고선 end
// 3d building
map.addLayer(
{
id: 'add-3d-buildings',
@ -454,13 +408,13 @@ export default function MapBoxMap() {
},
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 = {
@ -479,6 +433,86 @@ export default function MapBoxMap() {
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({
// id: 'contour-labels',
// type: 'symbol',
// source: {
// type: 'vector',
// url: 'mapbox://mapbox.mapbox-terrain-v2'
// },
// 'source-layer': 'contour',
// layout: {
// visibility: 'visible',
// 'symbol-placement': 'line',
// 'text-field': ['concat', ['to-string', ['get', 'ele']], 'm']
// },
// paint: {
// 'icon-color': '#877b59',
// 'icon-halo-width': 1,
// 'text-color': '#877b59',
// 'text-halo-width': 1
// }
// });
// map.addLayer({
// id: 'sky',
// type: 'sky',
// paint: {
// 'sky-type': 'atmosphere',
// 'sky-atmosphere-sun': [0.0, 90.0],
// 'sky-atmosphere-sun-intensity': 15
// }
// });
// 지형 3d end
// 등고선 start
// map.addLayer({
// id: 'contours',
// type: 'line',
// source: {
// type: 'vector',
// url: 'mapbox://mapbox.mapbox-terrain-v2'
// },
// 'source-layer': 'contour',
// layout: {
// visibility: 'visible',
// 'line-join': 'round',
// 'line-cap': 'round'
// },
// paint: {
// 'line-color': '#877b59',
// 'line-width': 1
// }
// });
// 등고선 end
// 3d building
// 공역 색상 및 공역 표출 정보에 따른 노출
handlerCreateAirSpace(map);

4
src/containers/flight/ControlApprovalsContainer.js
Unescape View File

@ -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);

4
src/containers/flight/OperationApprovalsContainer.js
Unescape View File

@ -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);

21
src/utility/hooks/useMapType.ts
Unescape View File

@ -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);

Write Preview
Loading…
Cancel
Save