오픈레이어스 다크모드 적용

프로젝트에서 지도의 다크모드가 필요하다는 요구사항이 있는 경우들이 있어 내가 적용한 타일을 다크모드에 맞게 바꿔야하는 경우가 있다. 이럴 경우에는 Canvas에 filter를 걸어서 처리하면 된다.

1. 생성한 지도 전체에 filter를 거는 경우

const map = new ol.Map({
    target: 'map',
    layers: [
          new ol.layer.Tile({
              source: new ol.source.OSM()
          })
    ],
    view: new ol.View({
      	center: ol.proj.fromLonLat([128.940775, 35.97005278]),
        zoom: 13 
    })
  });

map.on('postcompose',function(e){
    document.querySelector('canvas').style.filter="invert(90%)";
});

위의 소스처럼 지도 전체에 filter로 반전을 줘서 다크모드 지도를 표출할 수 있다. 지도 위에 마커, 폴리라인등이 표출되어 있다면 해당 데이터도 모두 반전 처리되는 문제가 발생한다. 폴리라인의 경우에는 반전을 주기 전에 기존의 표출되던 색깔을 보색으로 변경 후 반전처리하면 문제없을 수 있지만 마커의 경우에는 처리하기 까다롭고 보색으로 변경하는 작업도 비효율적인 작업이기 때문에 아래와 같이 처리하는 것이 좋다.

2. Tile을 생성할 때 filter를 주고 Tile이 생성된 후에 filter을 제거하는 경우

const tile = new ol.layer.Tile({
	source: new ol.source.OSM()
})
    
tile.on('prerender', (evt) => {
	if (evt.context) {
    	const context = evt.context;
    	context.filter = 'grayscale(80%) invert(100%)';
    	context.globalCompositeOperation = 'source-over';
  	}
});

tile.on('postrender', (evt) => {
  	if (evt.context) {
    	const context = evt.context;
    	context.filter = 'none';
  	}
});

const map = new ol.Map({
    target: 'map',
    layers: [
		tile
    ],
    view: new ol.View({
      	center: ol.proj.fromLonLat([128.940775, 35.97005278]),
        zoom: 13 
    })
  });

tile을 지도를 생성하기 전에 생성하고 tile 이벤트를 활용하여 tile을 생성할 때 filter를 주고 tile이 생성된 후에 filter을 제거하면 다크모드로 전환한 tile을 얻을 수 있다. 그 후에 지도를 생성할 때 다크모드로 전환된 tile을 넣어주면 다크모드가 적용된 배경지도를 넣을 수 있다.

ol 관련 확장라이브러리 참고 사이트

• https://viglino.github.io/ol-ext/index.html

Github

• 라이브러리 파일 : https://github.com/bm1201/Library-Archive/tree/main/오픈레이어스(Openlayers)%20라이브러리
• 예시소스 : https://github.com/bm1201/openLayers-test/tree/main