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. 184
      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

184
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();
}
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);

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