geoserver에서 데이터를 받을 때 인증 토큰이 없으면 데이터를 못 가져오는 경우가 있다
오늘은 geoserver 인증토큰을 fetch로 보내고 값을 받는 방법을 정리해보겠다
일단나는 필요한 토큰을 받아서 localstorage에 저장을 해놨다
해당 함수를 만들어서 Header에 token값을 넣어준다
중요한점은 key는 Authorization이고 value는 token이다
특히 token 값 앞에 "Bearer "문자열을 추가해줘야한다
function createHeaders() {
let myHeaders = new Headers();
let token = localStorage.getItem('token');
myHeaders.append("Authorization", "Bearer " + token);
return myHeaders;
}
geoserver의 url도 만들어준다
이 때 parameter도 같이 보내야하기때문에 URLSearchParams()를 사용해서 params에 값을 먼저 넣어준다
나는 아래와 같은 parameter들이 필요했기때문에 보내준다
parameter는 geoserver의 url을 참고하면 된다
layers에는 레이어이름, bbox는 extent이기때문에 minx, miny,maxx, maxy값을 넣어줘야한다
srs에는 좌표값을 넣어준다
모든 것이 하나라도 틀리면 아예 안나오고, 나오더라도 레이어가 표출되지 않기때문에 꼭 정확한 값을 넣어줘야한다
let params = new URLSearchParams();
//추후 get capabilities에서 동적으로 가져오는 기능 추가필요
//동적생성 필요한 data : layers, bbox, width, height, srs, dim_grabule
params.append('service', 'WMS');
params.append('version', '1.1.0');
params.append('request', 'GetMap');
params.append('layers', '레이어이름');
params.append('bbox', 'minx,miny,maxx,maxy');
params.append('width', '768');
params.append('height', '738');
params.append('srs', 'EPSG:32630');
params.append('format', 'image/png');
params.append('transparent', true);
// params.append('DIM_GRANULE', '20230528T105621');
params.append('TILED', true);
params.append('exceptions', 'application/vnd.ogc.se_inimage');
geoserverIP나 도메인이름, 작업공간, params를 모두 합쳐 geourl을 만들어준다
let geourl= "https://`geoserverIP`/geoserver/`작업공간`/wms?"+`${params}`;
아래는fetch를 통해 geourl로 헤더에 인증토큰을 보내고 받는 코드이다
response이후에는 데이터를 표출하는 작업을 해주면 된다
fetch(geourl,{
"headers":myHeaders
})
.then((response) =>
// 코드 작성
})
.catch(function(error) {
// 오류 처리
console.error('Error ###:', error);
});
데이터가 잘 오는지 확인하는 방법은 fetch작업 후
개발자모드에서 네트워크를 확인하고 wms..어쩌구를 클릭하면
헤더, 페이로드, 미리보기를 확인할 수 있다
geotiff데이터는 브라우저로 지원이 안되기 때문에 우클릭->새탭에서 이미지 열기로 다운로드-> QGIS로 올려보는 방법으로 데이터를 확인할 수 있다
댓글