[Openlayers] ol.style.icon image사이즈 조절방법

지난 포스팅에 이어서

[openlayers] Feature에 style적용하는 방법 + (ol.style.icon)

ol.style.icon사용시 사용되는 이미지의 크기를 줄여서 올리는 방법을 포스팅 해보도록 하겠습니다.
우선 지도상에 이미지를 사용할경우 ol.style.icon을 사용하여 이미지 스타일을 생성합니다.

 image: new ol.style.Icon ({
          anchor : [0.5, 0.5], 
          src : imgUrl,
          size : [imgWidth, imgHeight],
          scale : 1
        }) ,

크기가 200x200인 이미지를 지도상에 100x100으로 보이려면 어떻게 해야할까요?

소스만 보면 Icon 속성 중 size만 [100,100] 으로 줄이면 될 것 같지만 size를 줄일경우 아래 사진과 같이 100x100으로 잘린 부분만 보여지게 됩니다.

그러면 두번째로 200px -> 100px로 절반크기로 줄여야하니 scale : 0.5 로 설정한다면?

가능은 하나 이미지의 크기가 200px이 아닌 300px, 400px, 500px로 제각각 달라질경우 scale:0.5로는 개별적으로 scale을 다 수정해야 합니다.

---

아래 예제는 이미지를 서버에서 불러왔을때 base64로 인코딩된 문자열 이미지를 받았다는 가정하에  지도상에 뿌려질 이미지의 크기를 동일하게 100px로 보여지게 하는 방법의 예제입니다.

base64로 인코딩된 이미지문자열

위와 같이 하나의 이미지를 서버에서 불러왔을때 string으로 된 이미지가 있다고 가정합니다.

이때 지도상에 100px로 이미지를 뿌리려면 우리는 이미지의 width와 height를 얻어야합니다.
그러나 문자열로 되어있는 경우에는 이미지의 width, height를 얻을 수 없습니다.

1.  빈이미지를 생성하고 base64로 인코딩된 문자열 이미지를 빈이미지 src에 세팅합니다.

// 1 . 빈이미지 생성
var imgComp= new Image();

//2. base64로 인코딩된 이미지 string
var imgUrl = 'data: image/png;base64, iVBOE...중략';

//3. 이미지 url set
imgComp.src = imgUrl;

예시 사진

빈 이미지객체에 src set했을경우

src에 이미지url을 세팅하고 나면 크롬 개발자도구를 열어 이미지의 크기를 확인하실 수 있습니다.

일반적으로는 img.width 와 img.height를 사용하기도 하지만 이미지 객체에 임의로 width, height등의 스타일을 설정했을경우 값이 바뀌기 때문에 img.naturalWidth와 img.naturalHeight를 사용합니다.

2. Feature 하나를 생성하고 feature Properties에 만들어 두었던 img와 imgUrl을 넣어줍니다.

//4. Feature생성
var ft = new ol.Feature ({
            id: 'feature2',
            geometry: new ol.geom.Point (ol.proj.transform([127, 37], 'EPSG: 4326','EPSG:3857')）
}) ;
//5. Feature Property에 img태그와 imgUrl set
ft.setProperties ({img: imgComp, imgUrl:imgUrl})

3. Layer를 생성

//6. Layer 생성
var layer = new ol.layer.VectorImage ({
  id : 'layer2',
  source : new ol.source.Vector ({}), 
  style : function (feature){
    //VectorImage Style지정
    var prop = feature getProperties ();
    styleobj = {
        image: new ol.style.Icon({
            anchor : [0.5, 0.5],
            src : prop.imgUrl,
            size : [prop.img.naturalwidth, prop.img.naturalHeight]
        }),
        zIndex: 500
    };
    //100: 지도상에서 보여질 이미지 크기(100px)
    calc = 100 / prop.img.naturalWidth; 
    styleobj. image.setScale(calc);

    //set rendering Style
    var renderStyle = new ol.style.Style(styleobj);
    return renderStyle; //style return
  }
});
//7. layer에 5번에서 만들어놨던 Feature add
layer.getSource().addFeature (ft) ;

//8. map addLayer
map.addLayer (layer);

이 때 중요한것은 우리가 2번에서 property에 넣어두었던 이미지 객체 입니다.
1번에서 이미지객체에 src를 넣어 이미지를 생성했을때 우리는 img.naturalWidth와 img.naturalHeight 값을 알아낼 수 있었는데, 이걸 그대로 2번 프로퍼티에 넣어둔 이미지객체의 naturalWidth와 naturalHeight값을
ol.style.Icon에 있는 size에 배열로 넣어줍니다.

소스참고사진- size

그러고 나서 scale을 계산해서 넣어야 합니다.
지도상에서 보여질 크기 / 이미지크기

소스참고사진-scale

마지막으로 만들어두었던 Feature를 Layer에 추가하며 map에 해당 Layer를 추가하면 이미지 크기가 조절된 채로 지도상에 나타납니다.

지도상에 이미지 Feature가 축소되어 표시됨

위와 같이 ol.style.icon사용시 사용되는 이미지의 크기를 줄여서 올릴 수 있습니다.