매번 네이버, 구글맵 연동을 하다가 얼마전 오픈레이어스를 활용해서 지도작업을 해야되는 경우가 있었습니다.
한글지원도 잘 되고, 지형도 잘 표현하면서 나름 괜찮았던 gis 작업 이었습니다.
처음 오픈레이어스를 만났을 때는 관공서 관련된 프로젝트였는데..열지도, 지역구 그리기, 마커표시 및 이름표시 등 이러한 내용의 작업을 해야 하였습니다.
물론 네이버나 다음 및 구글 지도가 훨씬 더 이쁘고 기능도 강력하지만..
일정량 이상 사용시 유료되는게 단점이 있으며 순수 내부망으로 구축된 곳에서는 사용 할 수가 없습니다.
그런데, 오픈레이어스의 장점은...네트워크가 되지 않아도 지형정보만 제공되어지는 서버가 존재 한 다면, 해당 정보를 통해 기능구현이 가능한 점 입니다.
저 또한 지형정보를 가진 업체와 일을 해보니..뭔가 내부망에서는 참 쓸만하네~ 라는 생각이 무척 들었습니다.
* 해당 지형정보 서버는 내부망에 설치되어 있었지요.
* 공식 주소
OpenLayers - Welcome
OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open So
openlayers.org
그런데..이게 버전이 4 이상 올라가면 ES6문법으로 변경이 되었습니다.
전부 Class를 활용한 방식으로 바뀌어서 처음에는 당황스러웠습니다.
아래 기능구현은 3버전으로 하였었지만 4버전을 보는 순간..익스플로러의 시대가 저물었다는 느낌을 다시한번 받았습니다. 물론 바벨의 도움을 받으면 동작 가능하도록 만들수는 있겠지요.
아래 소스코드는 시군구를 표현할 때 사용한 소스코드 샘플 입니다.
<!DOCTYPE html>
<html>
<head>
<title>시군구표현</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
$.ajax({
url: 'SIGUNGU.json', //시군구 geo.json, 필자는 Node.js를 활용해서 .shp형식 파일을 컨버팅하였다.
type: 'post',
contentType: 'application/x-www-form-urlencoded;charset=utf8',
success: function (dat) {
var format = new ol.format.GeoJSON({ //선 표시
featureProjection:"EPSG:3857"
});
var vectorSource = new ol.source.Vector({ //선표시 벡터 적용
features:format.readFeatures(dat)
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 2
})
})
});
//지도사진이 있는 객체, 해당 내부에 존재하는 url을 활용해서 사진을 받아온다.
//해당 데이터는 여러 형식으로 변경 가능하다
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var currentZoomLevel = 11;
const schladming =[127.18771061903684, 38.29537836038208];
const schladmingWebMercator = ol.proj.fromLonLat(schladming);
var map = new ol.Map({
layers: [osmLayer,vectorLayer],
target: 'map',
view: new ol.View({
center: schladmingWebMercator,
zoom: 9
})
});
}
});
</script>
</body>
</html>'OpenLayers(오픈레이어스)' 카테고리의 다른 글
| Openlayers view Animation (오픈레이어스 애니메이션, Openlayers 애니메이션) (0) | 2019.09.20 |
|---|---|
| Openlayers heatMap (오픈레이어스 히트맵, Openlayers 히트맵) (4) | 2019.09.20 |
| Openlayers draw circle (오픈레이어스 원 그리기, Openlayers 원 그리기) (0) | 2019.09.19 |
| Openlayers 위경도 변환 및 이벤트 리스너 (Openlayers 위도 경도 변환) (0) | 2019.09.11 |
| Openlayers 사용법 (Openlayers 개발 환경 구성,오픈레이어스 개발환경, Nodejs 활용) (2) | 2019.09.09 |
댓글