[OpenLayers] Static Image 사용 방법

OpenLayers 사용하여 OSM(OpenStreetMap)으로 지도를 가시화하는 것이 아닌 Static Image를 Layer Source로 사용하여 이미지를 가시화하는 예제입니다.

OpenLayers 3 버전을 사용하였습니다.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Static Map Example</title>

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css"
/>
<style>
.map {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script>
<script src="main.js"></script>
</body>
</html>

Script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// main.js

// 지도 정보
const mapInfo = {
map: null,
extent: null,
projection: null,
setProjection: function (w, h) {
this.extent = [0, 0, w, h];
this.projection = new ol.proj.Projection({
code: 'pixel',
units: 'pixels',
extent: this.extent,
});
},
init: function (imageName) {
const view = new ol.View({
projection: this.projection,
center: ol.extent.getCenter(this.extent),
zoom: 2,
maxZoom: 8,
});

const imageLayer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'images/' + imageName,
imageSize: [this.extent[2], this.extent[3]],
projection: this.projection,
imageExtent: this.extent,
}),
});

this.map = new ol.Map({
target: 'map',
layers: [imageLayer],
view: view,
});

this.zoomFit();
},
zoomFit: function () {
this.map.getView().fit(this.extent, { duration: 200 });
},
};

// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function () {
const width = 500;
const height = 500;
const imageName = 'image.png';

mapInfo.setProjection(width, height);
mapInfo.init(imageName);
});

OpenLayers 활용 라이브러리입니다.

  • ol.proj.Projection
  • ol.View
  • ol.layer.Image
  • ol.source.ImageStatic
  • ol.Map

결과

Static Image 가 지정한 크기의 지도 중앙에 가시화됩니다.

참고

Share