[javascript] Mapbox지도에서 특정 위치의 속성 정보 가져오기
먼저, 지도에서 특정 위치를 클릭하거나 마우스 오버하는 이벤트를 감지해야 합니다. 이를 위해 Mapbox GL JS의 click
또는 mousemove
이벤트를 활용할 수 있습니다.
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point);
if (features.length) {
var feature = features[0];
var properties = feature.properties;
console.log(properties);
}
});
위의 코드에서 map
은 Mapbox 지도 객체를 나타냅니다. click
이벤트가 발생하면, queryRenderedFeatures
메서드를 사용하여 해당 위치의 특징(feature)들을 가져옵니다. 가져온 특징들 중 첫 번째 특징의 속성(properties)을 가져와 출력합니다.
이제, 특정 위치의 속성 정보를 가져오는 방법을 알게 되었습니다. 이를 활용하여 다양한 작업을 수행할 수 있습니다. 예를 들어, 클릭한 위치에 해당하는 정보를 팝업이나 사이드 바에 표시하는 등의 기능을 구현할 수 있습니다.
참고 자료: