[OpenLayers] 지도 확대 축소시 겹치는 text 안보이게 하기 - Declutter

Label Decluttering

openlayers에서 지도를 축소시키면 지역명(text)이 밀집된 지역은 겹치게 된다.

이때 declutter 옵션을 사용하면 확대, 축소시 자동으로 표출되는 글자를 조절해주는 편리한 옵션이다.

축소시 글자가 겹치게 되면 사라진다

 

사용법은 declutter 옵션을 적용할 레이어에 속성값을 true로 설정해 주면 된다.

const vectorLayer = new VectorLayer({
  background: 'white',
  source: new VectorSource({
    url: 'https://openlayers.org/data/vector/us-states.json',
    format: new GeoJSON(),
  }),
  style: function (feature) {
    const label = feature.get('name').split(' ').join('\n');
    labelStyle.getText().setText(label);
    return style;
  },
  declutter: true,
});

 

참조

Openlayers 공식문서 - Vector Label Decluttering
https://openlayers.org/en/latest/examples/vector-label-decluttering.html