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