지도 API 오픈레이어
openlayers 사용법 총정리
1. 지도 생성
2. 지도에 마커 생성(경도, 위도 이용)
3. 지도 마커 마우스 올릴 때 팝업 (mouseover)
4. 지도 마커 클릭 시 팝업창 (click)
5. 지도에 마커 여러개 추가
openlayer vworld api를 이용해
스프링으로 만든 간단한 지도 웹 사이트
낙동강 홍수통제소 데이터를 샘플로 연습했고
스터디용으로 복습할 겸 블로그에 정리해서 업로드!
DB를 사용하는 게 아니라면 스프링이나 MVC가 아니더라도 쉽게 구현할 수 있다
스프링 버전 4.1.2
- 참고한 사이트들
https://www.nakdongriver.go.kr/sumun/rthd.do
낙동강홍수통제소
www.nakdongriver.go.kr
https://mygameprogamming.tistory.com/70
openlayers 5 기본기(지도 생성, 마커/팝업 생성)
1. 지도 생성 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 // 지도 중심 좌표 (강남역) var olCenter = ol.proj.fromLonLat([127...
mygameprogamming.tistory.com
https://www.vworld.kr/dev/v4api.do
공간정보 오픈플랫폼 오픈API
오픈 API 누구나 사용할 수 있는 지도 오픈플랫폼의 오픈 API 서비스는 국가 공간정보의 개방, 공유, 참여를 통해 공간정보의 자율적이고 창조적인 다양한 애플리케이션을 개발할 수 있도록 기술
www.vworld.kr
OpenLayers - Welcome
A high-performance, feature-packed library for all your mapping needs.
openlayers.org
0. 완성 Demo
지도에 마커 찍기
마우스 오버(hover)시 팝업 테이블 보여지기 + 클릭시 팝업 창 뜨기
1. 지도 생성 (JSP)
먼저 딱 기본 지도만 표출하는 소스다
더 간단하게도 표현할 수 있겠지만 init 함수로 정의해두었다
그래야 다른 곳에서도 쓰이기 편하니까!
처음에는 뭐가 뭔지 모르겠지만 계속 보다보면 보임!!!!
복붙해서 사용해도 되겠지만..ㅎㅎ(키설정은 개인적으로!)
위의 코드를 간단하게 설명해보자면
1) openlayers 에서 제공하는 ol.js, ol.css를 추가해준다
2) body에 지도가 보여질 div를 만들어주고 id를 설정한다
3) vworld 홈페이지에서 회원가입 후 api key를 받는다
4) script에 지도를 설정하고 생성하는 함수 코드를 입력한다
=> 이 때 Layer, View, Overlay(선택) 가 필요
Layer : vworld에서 지도 타일을 가져오는 것
View : 지도가 보여질 때 초기 값을 설정하는 것
Overlay : 지도 위 팝업 옵션을 생성할 시에 사용함
이렇게 이해하면 쉬움!!!
openlayers 홈페이지 들어가보면 api 기능들이 잘 설명되어있지만
전부 영문이므로... 찾는 건 개발자의 몫..^^
그래서 기본적인 기능들은 주석 전부 달아놓았으니
추가적으로 필요한 부분만 검색해서 넣으면 될 것같다!
API 코드 추가 (jquery, openlayers)
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- openlayers -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
HTML div 추가
<body>
//html안에 Map이 보여질 div 요소를 생성해주고 id 설정
<div id="vMap" class="vMap"></div>
//지도 위에 팝업이 나타날 부분
<div id="popup">
<div id="popup-content"></div>
</div>
</body
Javascript 코드
var container = document.getElementById('popup'); //팝업이 담길 컨테이너 요소
var content1 = document.getElementById('popup-content'); //팝업 내용 요소
var map; //맵 변수 선언 : 지도 객체
var mapLayer; //맵 레이어 선언 : 지도 그림(타일) 설정
var mapOverlay; //맵 오버레이 선언 : 지도 위에 팝업 옵션을 사용할 때
var mapView; //맵 뷰 선언 : 보여지는 지도 부분 설정
var hover=null; //마우스 이벤트에 사용될 변수
function init(){
mapLayer = new ol.layer.Tile({ //타일 생성
title : 'Vworld Map', //이름
visible : true, //보여짐 여부
type : 'base', //지도 종류(일반) ---(야간(midnight), 위성(satellite) 등)
source : new ol.source.XYZ({ //vworld api 사용
url : 'http://api.vworld.kr/req/wmts/1.0.0/{발급받은 개인 key}/Base/{z}/{y}/{x}.png'
})
});
mapOverlay = new ol.Overlay(({ element: container })); //Overlay 생성, 요소는 컨테이너
mapView = new ol.View({ //뷰 생성
projection : 'EPSG:3857', //좌표계 설정 (EPSG:3857은 구글에서 사용하는 좌표계)
center : new ol.geom.Point([ 128.5, 36.1 ]) //처음 중앙에 보여질 경도, 위도
.transform('EPSG:4326', 'EPSG:3857') //GPS 좌표계 -> 구글 좌표계
.getCoordinates(), //포인트의 좌표를 리턴함
zoom : 9 //초기지도 zoom의 정도값
});
map = new ol.Map({ //맵 생성
target : 'vMap', //html 요소 id 값
layers : [mapLayer], //레이어
overlays: [mapOverlay], //오버레이
view : mapView //뷰
});
}
$(document).ready(function() {
init();
});미리보기
2. 지도에 마커 추가 (JSP)
마커를 추가하기 전 알아두어야할 것
1) 마커가 찍힐 경도 위도 feature 설정
2) 마커의 스타일 설정 (ex icon, png)
3) 마커들의 집합 features를 가지고 있는 source
4) 마커를 띄울 레이어
이렇게 4가지가 필요하다
이 4가지를 설정하고 기존 지도 변수 map에 map.addLayer(layer) 해주면 된다
즉, markerSource(feature) + markerStyle => markerLayer
map + markerLayer => 우리한테 보여지는 지도
위에 있던 javascript 코드 하단에 추가 된 addMarker()를 넣어보자
Javascript 코드
function addMarker(lon, lat, name){ //경도 위도 이름값(마커들을 구분하기위해)
// 마커 feature 설정
var feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([lon, lat])), //경도 위도에 포인트 설정
name: name
});
// 마커 스타일 설정
var markerStyle = new ol.style.Style({
image: new ol.style.Icon({ //마커 이미지
opacity: 1, //투명도 1=100%
scale: 1.2, //크기 1=100%
src: 'http://map.vworld.kr/images/ol3/marker_blue.png'
}),
zindex: 10
});
// 마커 레이어에 들어갈 소스 생성
var markerSource = new ol.source.Vector({
features: [feature] //feature의 집합
});
// 마커 레이어 생성
var markerLayer = new ol.layer.Vector({
source: markerSource, //마커 feacture들
style: markerStyle //마커 스타일
});
// 지도에 마커가 그려진 레이어 추가
map.addLayer(markerLayer);
}
$(document).ready(function() {
init();
addMarker(128.5, 36.1, '포인트1');
});
미리보기
3. 지도 마커에 마우스를 올렸을 때 팝업(JSP)
마커를 만들었으니 마우스를 올렸을 때 팝업이 보이도록 세팅해보자
아까 만들었던 init 함수 안에 map.on('pointermove', function(evt){})를 추가해줄 것이다
Javascript 코드
var container = document.getElementById('popup'); //팝업 컨테이너
var content1 = document.getElementById('popup-content'); //팝업 내용
..(생략)..
function init(){
mapLayer = (생략)
mapOverlay = new ol.Overlay(({ element: container })); //Overlay 생성, 요소는 컨테이너
mapView = (생략)
map = (생략)
map.on('pointermove', function(evt) { //마우스 올렸을 때
var coordinate = evt.coordinate; //마우스가 올려진 좌표값
//마커가 있는 곳에 마우스가 올려지면 커서의 스타일을 pointer로 설정
map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer': '';
//마우스를 다른 곳으로 옮길 때를 위해 스위치역할
if(hover != null) {
hover = null;
}
//마우스가 올려진 곳의 마커를 가져와 hover에 저장
map.forEachFeatureAtPixel(evt.pixel, function(f) {
hover = f;
return true;
});
//마커가 있을 경우
if(hover){
var content =
"<div class='__float-tbl'>"
+ "여기는 어딜까?"
+ hover.get('name') //이름 값 뽑기
+ "</div>";
//popup-content 부분에 content를 넣어줌
content1.innerHTML = content;
//오버레이의 좌표를 정해줌
mapOverlay.setPosition(coordinate);
}else{
content1.innerHTML = '';
}
});
}관련이 있는 부분 빼고는 모두 생략했다
주석을 상세하게 달아놔서 읽다보면 이해가 될 것!
이렇게 넣어주고 웹에서 마우스를 올리면 추가했던 content의 내용이 화면에 보여진다
그런데 css를 설정해주지 않아서 지도 위 글자만 덜렁 보여서 가독성이 떨어진다
대충 배경이라도 만들어주기 위해 아래 css를 추가한다
CSS 코드
<style>
#vMap{...생략...}
.__float-tbl{
border: 1px solid #2a5dc5;
border-radius: 5px;
background-color: #2a5dc5;
font-size: 15px;
color: white;
text-align: center;
position: absolute;
top: 30px;
left: -50px;
width:130px;
}
</style>
미리보기
그러면 마우스를 올렸을 때 다음과 같이 마커와 포인터에 가려지지 않고 잘 츨력된다
4. 지도 마커를 클릭하면 팝업 창 오픈(JSP)
마커를 클릭하는 이벤트는 map.on('singleclick', function(evt){}) 를 추가해서 설정할 수 있다
그리고 팝업창이 열리는 function openPopup()을 만들어준다
Javascript 코드
function init(){
mapLayer = (생략)
mapOverlay = (생략)
mapView = (생략)
map = (생략)
map.on('pointermove', function(evt) {
...(생략)...
});
map.on('singleclick', function(evt){ //클릭 했을 때
var ff = map.hasFeatureAtPixel(evt.pixel); //클릭한 pixel에 마커가 있으면 true, 없으면 false
if(ff == true){ //있으면 openPopup() 실행
openPopup();
}
});
}
function openPopup(){ //팝업창 오픈
window.open('/detail/popup.do', '팝업창', 'left=200,top=200,width=600,height=600,scrollbars=yes,resizable=yes');
}미리보기
마커 클릭시 팝업창
이렇게 오픈된다
window.open()은 새로운 창을 여는 메소드인데
window.open('url', '창이름', '스타일');
이렇게 사용하면 된다
5. 지도 마커 여러개 추가
마커를 여러개 추가할 수도 있다~
위에서 만들었던 addMarker()를 여러번 써주면 됨
만약 db에 있는 경도 위도 값으로 수많은 마커를 만들고 싶다면 ajax에서 리스트로 받아와
$.each 문으로 feature들을 list에 때려박고 그 list를 features로 설정하면 된다
Javascript 코드
...
$(document).ready(function() {
init();
addMarker(128.5, 36.1, '포인트1');
addMarker(128.5, 36.5, '포인트2');
});
...미리보기
마커 두개와 마커에 마우스를 올려 이름 확인
openlayers와 vworld를 이용한 지도 만들기 총정리 끝!
주석을 달아놓았지만 이해가 안되거나 더 많은 기능을 원한다면 공식 홈페이지에서 참조하길
혹시 코드에서 궁금한 점 댓글로 남겨주면 답변해드릴게오
그러면 다음 연습 웹은 무엇이 될까....
원본 게시글은 주 블로그에 업로드되어있습니다
https://blog.naver.com/jisoo___/222285880138
OpenLayers, VWORLD를 이용한 지도 웹 샘플(생성, 마커, 클릭, 팝업)
지도 API 오픈레이어 openlayers 사용법 총정리 1. 지도 생성 2. 지도에 마커 생성(경도, 위도 이용) 3....
blog.naver.com