|
|
@ -104,9 +104,7 @@ export default function MapBoxMap() { |
|
|
|
|
|
|
|
|
|
|
|
// 지도 초기 셋팅
|
|
|
|
// 지도 초기 셋팅
|
|
|
|
useLayoutEffect(() => { |
|
|
|
useLayoutEffect(() => { |
|
|
|
if (mapState.mapType === 'TERRAIN' || mapState.mapType === 'SATELLITE') { |
|
|
|
|
|
|
|
mapBoxMapInit(); |
|
|
|
mapBoxMapInit(); |
|
|
|
} |
|
|
|
|
|
|
|
}, [mapState.mapType]); |
|
|
|
}, [mapState.mapType]); |
|
|
|
|
|
|
|
|
|
|
|
// 공역 표출 정보에 따른 공역 변경
|
|
|
|
// 공역 표출 정보에 따른 공역 변경
|
|
|
@ -353,7 +351,7 @@ export default function MapBoxMap() { |
|
|
|
const labelLayerId = layers.find( |
|
|
|
const labelLayerId = layers.find( |
|
|
|
layer => layer.type === 'symbol' && layer.layout['text-field'] |
|
|
|
layer => layer.type === 'symbol' && layer.layout['text-field'] |
|
|
|
).id; |
|
|
|
).id; |
|
|
|
|
|
|
|
if (mapState.mapType !== '2D') { |
|
|
|
// 지형 3d start
|
|
|
|
// 지형 3d start
|
|
|
|
map.addSource('mapbox-dem', { |
|
|
|
map.addSource('mapbox-dem', { |
|
|
|
type: 'raster-dem', |
|
|
|
type: 'raster-dem', |
|
|
@ -364,59 +362,15 @@ export default function MapBoxMap() { |
|
|
|
// bearing: 0 // Set bearing to 0 for a north-up view
|
|
|
|
// bearing: 0 // Set bearing to 0 for a north-up view
|
|
|
|
}); |
|
|
|
}); |
|
|
|
map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 }); |
|
|
|
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( |
|
|
|
map.addLayer( |
|
|
|
{ |
|
|
|
{ |
|
|
|
id: 'add-3d-buildings', |
|
|
|
id: 'add-3d-buildings', |
|
|
@ -454,13 +408,13 @@ export default function MapBoxMap() { |
|
|
|
}, |
|
|
|
}, |
|
|
|
labelLayerId |
|
|
|
labelLayerId |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
// 김포 3d 공역
|
|
|
|
// 김포 3d 공역
|
|
|
|
map.addLayer({ |
|
|
|
map.addLayer({ |
|
|
|
id: 'route', |
|
|
|
id: 'route', |
|
|
|
type: 'custom', |
|
|
|
type: 'custom', |
|
|
|
renderingMode: '3d', |
|
|
|
renderingMode: '3d', |
|
|
|
onAdd: function () { |
|
|
|
onAdd: function () { |
|
|
|
|
|
|
|
console.log(mapState.mapType); |
|
|
|
for (let i = 0; i < gimPo.features.length; i++) { |
|
|
|
for (let i = 0; i < gimPo.features.length; i++) { |
|
|
|
let line; |
|
|
|
let line; |
|
|
|
const options = { |
|
|
|
const options = { |
|
|
@ -479,6 +433,86 @@ export default function MapBoxMap() { |
|
|
|
tb.update(); |
|
|
|
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); |
|
|
|
handlerCreateAirSpace(map); |
|
|
|