[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)을 가져와 출력합니다.

이제, 특정 위치의 속성 정보를 가져오는 방법을 알게 되었습니다. 이를 활용하여 다양한 작업을 수행할 수 있습니다. 예를 들어, 클릭한 위치에 해당하는 정보를 팝업이나 사이드 바에 표시하는 등의 기능을 구현할 수 있습니다.

참고 자료: