Mapbox는 강력한 지도 서비스를 제공하는 플랫폼입니다. 이를 활용하여 원하는 지리적 범위 내에 있는 데이터를 필터링하는 방법에 대해 알아보겠습니다.
1. Mapbox 기본 설정하기
먼저, Mapbox를 사용하기 위해 기본 설정을 해야 합니다. 다음은 Mapbox API 토큰을 사용하여 기본 맵을 생성하는 예제입니다.
var mapboxgl = require('mapbox-gl');
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [longitude, latitude],
zoom: zoomLevel
});
여기서 YOUR_MAPBOX_ACCESS_TOKEN 부분에는 자신의 Mapbox API 토큰을 넣어주어야 합니다. 또한, longitude, latitude, zoomLevel은 맵을 기본적으로 보여줄 위치와 줌 레벨을 나타내는 값들입니다.
2. 데이터 필터링하기
특정 범위의 데이터를 필터링하기 위해서는 Mapbox의 queryRenderedFeatures 메서드를 사용할 수 있습니다. 이 메서드는 현재 화면에 렌더링된 특성(Feature)들 중 특정 조건을 만족하는 특성들을 반환합니다.
예를 들어, 원하는 범위의 경계 상자(bounding box)를 정의하고 해당 영역에 있는 특성들을 필터링하려면 다음과 같이 코드를 작성할 수 있습니다.
map.on('load', function() {
map.on('moveend', function() {
var bounds = map.getBounds();
var features = map.queryRenderedFeatures({ layers: ['your-layer-name'], filter: ['all', ['>', 'property', 10], ['<', 'property', 20]] });
// 필터링된 특성들에 대한 추가 작업 수행
// ...
});
});
여기서 your-layer-name은 데이터를 표시하고자 하는 레이어의 이름입니다. filter 부분에서는 'property'을 자신이 원하는 속성으로 변경하고, 10과 20은 해당 속성의 최소 및 최대 값을 나타냅니다.
3. 결과 확인하기
위의 코드를 실행하면 지도가 로드되고, 이동하거나 줌 인/아웃 할 때마다 해당 범위 내의 특성들을 필터링하여 추가 작업을 수행할 수 있습니다.
이제 자신이 원하는 작업을 위해 필터링된 특성들에 대해 원하는 작업을 수행하면 됩니다.
마무리
위의 예제를 통해 자바스크립트를 활용하여 Mapbox 지도에서 특정 범위의 데이터를 필터링하는 방법에 대해 알아보았습니다. Mapbox는 다양한 기능과 API를 제공하므로 필요에 따라 자세한 문서를 참조하면 더 많은 기능을 활용할 수 있습니다.