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