이번 포스트에서는 Openlayers 사용 시에, 지도 source 소스로 사용되는 타일 tile, 래스터 raster 데이터를 제공하는 오픈소스 소프트웨어들에 대해 알아보겠습니다.
<자신만의 맵 서버가 있어서 그 맵 서버를 통해서 지도의 소스를 제공하는 경우!!>
1) Geoserver: http://geoserver.org
웹 브라우저, 데스크톱 GIS 등 표준 클라이언트에 다양한 형식의 지도와 데이터를 제공할 수 있는 서버 소프트웨어입니다.
2) Mapnik: http://www.mapnik.org
고품질의 안티앨리어싱 그래픽, 지능형 라벨 배치, 확장 가능한 SVG 심볼화가 제공하는 깨끗하고 부드러운 피쳐 에지를 갖춘 아주 좋은 맵 렌더링을 위한 툴킷입니다. 가장 일반적으로 맵닉은 OpenStreetMap 메인 맵 레이어를 렌더링하는 데 사용됩니다.
3) Map server: http://www.mapserver.org
C로 작성된 오픈 소스 지리 데이터 렌더링 엔진입니다. MapServer는 GIS 데이터 검색 외에도 사용자가 웹 콘텐츠로 이동할 수 있는 지리적 이미지 맵, 즉 지도를 만들 수 있도록 해줍니다. GeoServer와 마찬가지로 오픈 웹 표준을 통해 지도 게재를 허용합니다.
4) Degree: http://www.deegree.org/
Degree는 공간정보 인프라와 지리공간 웹을 위한 오픈소스 소프트웨어다. GeoServer 및 Mapserver와 오픈 웹 표준을 통해 지도를 제공하는 기능을 공유합니다.
5) MapCache
http://mapserver.org/mapcache/, GeoWebCache
http://geowebcache.org 또는 MapProxy http://mapproxy.org.
MapCache는 지도 프록시 응용프로그램으로 주요 목적은 동적 웹 서버를 위한 타일을 만들고, GeoServer, MapServer, Mapnik, Degree 또는 다른 지도 서버를 사용하여 요청된 지도 이미지를 캐싱합니다.
그러면, 이렇게 맵 서버에서 얻은 소스 파일을 어떻게 Openlayers에 적용할까d요?
GeoServer를 예로 들어 보겠습니다.만약에 타일형태가 아닌 WMS 형식으로 이미지로 받아오려면 ol.source.ImageWMS를 사용하면 됩니다.
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8080/geoserver/angpangdi/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
"LAYERS": 'angpangdi:planet_osm_line',
"exceptions": 'application/vnd.ogc.se_inimage',
}
})
});나는 타일로 된 WMS 형식으로 지도를 띄우고 싶다 하시면 ol.source.TileWMS 로 가져오시면 됩니다.
var tiled = new ol.layer.Tile({
visible: false,
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/angpangdi/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
"LAYERS": 'angpangdi:planet_osm_line',
"exceptions": 'application/vnd.ogc.se_inimage',
tilesOrigin: 13539152 + "," + 4162331
}
})
});
전체적으로 Openlayers3로 지도를 띄우는 html 코드를 첨부하겠습니다. (이 경우에도 GeoServer가 소스입니다.)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//localhost:8080/geoserver/openlayers3/ol.css" type="text/css" />
<style>
.ol-zoom {
top: 52px;
}
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
iframe {
width: 100%;
height: 250px;
border: none;
}
</style>
<script src="//localhost:8080/geoserver/openlayers3/ol.js" type="text/javascript"></script>
<title>OpenLayers map page by angpangdi</title>
</head>
<body>
<div id="map">지도</div>
<script type="text/javascript">
// if this is just a coverage or a group of them, disable a few items,
// and default to jpeg format
var format = 'image/png';
var bounds = [13539152, 4162331,
15199717, 5555446.5];
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8080/geoserver/angpangdi/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
"LAYERS": 'angpangdi:planet_osm_line',
"exceptions": 'application/vnd.ogc.se_inimage',
}
})
});
var tiled = new ol.layer.Tile({
visible: false,
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/angpangdi/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
"LAYERS": 'angpangdi:planet_osm_line',
"exceptions": 'application/vnd.ogc.se_inimage',
tilesOrigin: 13539152 + "," + 4162331
}
})
});
var projection = new ol.proj.Projection({
code: 'EPSG:3857',
units: 'm',
global: true
});
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}).extend([mousePositionControl]),
target: 'map',
layers: [
untiled,
tiled
],
view: new ol.View({
projection: projection
})
});
</script>
</body>
</html>위에서 처럼 지도이미지/타일 layer만 평성한다고 되는 게 아니라 view, projection, map 변수가 다 있어야지 지도가 화면에 뜹니다.
다음 포스트에서는 Openlayers로 실습하기에 가장 좋은 Open Street Map 로부터 가장 간단하게 맵을 띄워보는 실습을 하도록 하겠습니다.
(출처: OpenLayers 3 Beginners Guide by Thomas Gratier, Paul Spencer, Erik Hazzard)
'Computer Science > OSM project' 카테고리의 다른 글
| qt로 만든 웹 브라우저에 geoserver로 openlayers 지도 띄워보기 (0) | 2020.07.22 |
|---|---|
| pgAdmin4 설치 시 오류 해결 (0) | 2020.07.17 |
| 가장 많이 쓰는 '무료 GIS 소프트웨어' 8가지 비교 (2) | 2020.07.15 |
