diff --git a/src/components/map/mapbox/feature/FeatureAirZone.js b/src/components/map/mapbox/feature/FeatureAirZone.js index 9f256c42..3cf029ca 100644 --- a/src/components/map/mapbox/feature/FeatureAirZone.js +++ b/src/components/map/mapbox/feature/FeatureAirZone.js @@ -109,24 +109,27 @@ export const FeatureAirZone = props => { } }); - props.map.on('click', e => { - // 클릭한 지점의 피처들을 얻어옵니다. - const features = props.map.queryRenderedFeatures(e.point, { - layers: ['add-3d-buildings'] // 빌딩 레이어의 ID를 지정합니다. - }); + const buildingsLayer = props.map.getLayer('add-3d-buildings'); + if (buildingsLayer) { + props.map.on('click', e => { + // 클릭한 지점의 피처들을 얻어옵니다. + const features = props.map.queryRenderedFeatures(e.point, { + layers: ['add-3d-buildings'] // 빌딩 레이어의 ID를 지정합니다. + }); - // 빌딩 피처가 있는 경우 - if (features.length > 0) { - // 첫 번째 빌딩 피처의 높이 값을 얻어옵니다. - const height = features[0].properties.height; + // 빌딩 피처가 있는 경우 + if (features.length > 0) { + // 첫 번째 빌딩 피처의 높이 값을 얻어옵니다. + const height = features[0].properties.height; - // 팝업을 생성하고 지도에 추가합니다. - new props.mapboxgl.Popup() - .setLngLat(e.lngLat) - .setHTML(`Building height: ${height}m`) - .addTo(props.map); - } - }); + // 팝업을 생성하고 지도에 추가합니다. + new props.mapboxgl.Popup() + .setLngLat(e.lngLat) + .setHTML(`Building height: ${height}m`) + .addTo(props.map); + } + }); + } }; // 공역 생성 함수