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

*버전: openlayers6 기준 입니다.

1. ol.style

지도상에 특정 도형을 그릴때 우리는 Feature라는 객체를 사용했습니다.

[Openlayers] 점, 선, 면 Feature 그리기

이때 Feature에는 색상이나 두께 또는 z-index등의 Style을 입힐 수 있는데, 이때 style을 지정하는 방법엔크게 두가지가 있습니다.

1) new ol.style. Style 생성

new ol. layer. Vector ({
  source : new ol. source.Vector(),
  style : new ol.style.Style({
    //스타일 생성
  })
})

2) Function 사용

new ol.layer.Vector ({
  source : new ol.source.Vector(),
  style : function (feature){
      let style = {
        //스타일생성
      }；
      return style;
    };
  });
});

이렇게 function을 만들어서 style을 return해도 됩니다.

2. ol.style.icon

이번 포스팅은 openlayers에서 vector로 만들어진 Feature에 특정 이미지를 넣고싶을때 사용하는 ol.style.icon에 대해 설명해보도록 하겠습니다.

지난시간에는 ol.style.Fill(면), ol.style.Stroke(선), 이.style Circle(도형:원) 등을 이용해 점, 선, 면 Feature를 생성했었습니다.

Circle, Fill, Stroke

이번엔 일반 도형이 아닌 특정이미지를 넣는
ol.style.icon을 사용하겠습니다.
new ol.style.Icon을 선언하고 속성들을 지정할 수 있습니다.

new ol.layer.Vector ({
  source : new ol.source.Vector(),
  style : function (feature){
      let style = {
        image: new ol.style.Icon ({
          anchor : [0.5, 0.5], 
          src : imgUrl,
          size : [imgWidth, imgHeight],
          scale : 1
        }) ,
        zIndex: 500
      }；
      return style;
    };
  });
});

*icon에 자주 사용되는 속성들
- anchor : 표시될 icon의 위치
- img : img element
- src : img url
- scale : img 화면상에서 보이는 규모 (default : 1)
- size : [width, height] 이미지 크기
- imgSize : SVGimg일경우 사용되는 이미지 크기 (src없을때 사용)

이외에 ol.style.icon에 사용되는 속성은
아래 openlayers docs에서 확인하실 수 있습니다.
https://openlayers.org/en/v6.15.1/apidoc/module-ol_style_Icon-Icon.html

다음 포스팅에는 ol.style.icon에서 icon사이즈를 줄여서 지도상에서 띄우는 방법을 적어보도록 하겠습니다.