wmsRequest API에서 이미지와 함께 응답헤더 가져오는 방법 (openlayers ImageLayer)

 

저의 경우,

오픈레이어스(openlayers)에서 이미지를 불러와 레이어를 만들어야 했습니다.

이미지를 출력해주는 WMS API에서 이미지와 함께 응답헤더에 특정 값들을 함께 전달해주고 있었어요.

 

오픈레이어스에서 이미지를 레이어로 만드려면, 아래와 같이 layer.Image(ImageStatic)을 사용하면되는데,

layer.Image는 응답헤더를 출력하는 기능을 제공하고 있지 않습니다.

var imageLayer = new ol.layer.Image({
  source: new ol.source.ImageStatic({
	      url: '이미지API URL',
	      crossOrigin: '',
	      imageExtent: bounds,
	      projection: 'EPSG:5179'
	    });,
});

 

따라서, 이미지와 응답헤더를 함께 가져오도록 XMLHttpRequest를 사용합니다.

 

// 이미지 URL
var imageUrl = "";

// XMLHttpRequest를 사용하여 이미지 요청 및 응답 헤더 얻기
var xhr = new XMLHttpRequest();
xhr.open('GET', imageUrl, true);
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    // 응답 헤더 정보 출력
    var headers = xhr.getAllResponseHeaders();
    console.log('응답 헤더:', headers);

    // 이미지 Blob을 지도에 추가
    var blob = xhr.response;
    var imageSource = new ol.source.ImageStatic({
      url: URL.createObjectURL(blob),
      crossOrigin: '',
      imageExtent: bounds,
      projection: 'EPSG:5179'
    });

    // OpenLayers 이미지 레이어 생성
    var imageLayer = new ol.layer.Image({
      source: imageSource,
      opacity: 0.7
    });

    // 지도에 이미지 레이어 추가
    map.addLayer(imageLayer);
  } else {
    console.error('이미지 요청 실패:', xhr.status);
  }
};

xhr.send();

 

 

 

console.log를 통해 응답헤더를 출력해봅니다.

개발자도구에서 응답헤더가 정상적으로 출력되는 것을 확인할 수 있습니다.

 

 

원하는 응답헤더를 추가하고싶다면,

WMS API를 만들었던 자바 소스코드에 아래와 같이 헤더를 추가해주면 됩니다.

response.setHeader("name", value);