[Openlayers] map 배경을 정적이미지로 변경

 

https://openlayers.org/

OpenLayers - Welcome

 

개인 공부를 하면서 지도배경을 정적이미지로 변경하고 싶었다.

 

Openlayers라이브러리는 제공해주는 기능들이 많아서 매력있는 것 같다.

하지만 이해하고 적용하기 까지의 과정이 어렵다.

 

1. 필요한 라이브러리(ol.js 등) 추가한다.

<div id="map"></div>

//아래는 js코드
var extent = [0, 0, 1024, 968]; //화면 영역, 이 부분 수정해서 지도의 이미지 위치 맞추면 됨
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});

var map = new ol.Map({
	layers: [
	 new ol.layer.Image({
	   source: new ol.source.ImageStatic({
	     attributions: '© <a href="https://xkcd.com/license.html">xkcd</a>',
	     url: '원하는 이미지의 경로 적어주기',
	     projection: projection,
	     imageExtent: extent,
	   }),
	 }),
	],
	target: 'map',
	view: new ol.View({
	 projection: projection,
	 center: new ol.extent.getCenter(extent),
	 zoom: 3,
	 maxZoom: 7,
	}),
});

2. 결과

정적이미지가 지도배경으로 들어간 모습을 볼 수 있다.

---

아직 깊게  공부는 해보지 않아서  지도의 좌표를 한국좌표계로 적용하는 방법은 찾아봐야 한다.

일단 클릭한 좌표 값을 알고 싶어서 아래와 같은 코드를 이용해서 확인했다.

map.on('click', function(e) {
    var coordinate = e.coordinate;
    console.log(coordinate);
})

개발자모드(F12)를 눌러 확인해보면 좌표가 찍히는 것을 볼 수 있다.