티스토리 뷰

Private

OpenLayers 응용해보기

wldnjd2 2022. 4. 14. 16:24

 

1. 지도를 클릭했을때 좌표값을 가져옴

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

방법은 아주 간단하다. click event로 받아온 값을 coordinate라는 변수를 만들어서 넣어줬다.

 

아래는 좌표계를 EPSG:3857에서 EPSG:4326으로 변경하였다.

   map.on('click', function(evt){
      var coordinate = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
      console.log(coordinate);
    })

 

 

2. 이동버튼을 만들어 버튼을 클릭시 지도 위치를 지정한 값으로 이동

getCoordinates() : 포인트의 좌표값을 리턴

getView() : 지도의 설정값들을 가져옴

setZoom() : zoom 레벨값 조정

 

- HTML 

<div id="map" class="map"></div>
<button onclick="move();">이동</button>

- 자바스크립트 

function move() {
    map.getView().setCenter(
        new ol.geom.Point([127.03952713552859, 37.25818350029961]).transform('EPSG:4326', 'EPSG:3857').getCoordinates()
    );
    map.getView().setZoom(parseInt(17));
}

 

 

3. 지도에 마커띄우기

addMarker() : 마커 등록하는 메서드

markerSource : 마커의 좌표값을 담은 변수

 //마커 레이어에 들어갈 소스 생성
var markerSource = new ol.source.Vector();
addMarker();
 
 function addMarker() {
	//point 좌표 등록
  	var point_feature = new ol.Feature({
    geometry: new ol.geom.Point([14137024.087892456, 4477863.561319664])
  	});

 	markerSource.addFeature(point_feature);

    //marker style
    var markerStyle = new ol.style.Style({
        image: new ol.style.Icon({ //마커 이미지
          opacity: 1, //투명도 1=100% 
          scale: 0.08, //크기 1=100%
          src: 'img/marker.png' //marker 이미지
        }),
   		zindex: 1 //z-index
  	});

  //마커 레이어 생성
  markerLayer = new ol.layer.Vector({
    source: markerSource, 	//마커 feacture들
    style: markerStyle 		//마커 스타일
  });
}
// 지도에 마커가 그려진 레이어 추가
map.addLayer(markerLayer);

 

 

4. 맵 클릭시 마커 표시하기

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 800px;
        width: 100%;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2> 클릭시 마커 표시하기</h2>
    <div id="map" class="map"></div>
    </div>
  </body>
  
  <script type="text/javascript">
    var markerLayer       

    //지도
    var map = new ol.Map({
      view: new ol.View({
        zoom: 16,
        center: new ol.geom.Point([14137023.47364948, 4477865.009314795]) 
        //좌표를 리턴함
        .getCoordinates(),                      
      }),
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source : new ol.source.XYZ({  //VWorld API 사용
        url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png',
        })
      }),
    ]
    });    
    //마커 레이어에 들어갈 소스 생성
    var markerSource = new ol.source.Vector();
    
    //클릭
    map.on('click', function(evt) {
      var coordinate = evt.coordinate;
      console.log(coordinate);
      // 지도에 마커가 그려진 레이어 추가
      addMarker(coordinate);
    });

    //마커 등록하기
    function addMarker(coordinate) {
      console.log("addMarker");

      //클릭할때마다 마커변경 / 초기화
      if(markerLayer != null) {
        markerLayer.getSource().clear();
      }

      //point 좌표 등록
      var point_feature = new ol.Feature({
        geometry: new ol.geom.Point([coordinate[0], coordinate[1]])
      });
      
      markerSource.addFeature(point_feature);

      //marker style
      var markerStyle = new ol.style.Style({
        image: new ol.style.Icon({ //마커 이미지
          opacity: 1, //투명도
          scale: 0.08, //크기

          //marker 이미지
          src: '/img/marker.png'
        }),
        zindex: 10 //z-index
      });

      // 마커 레이어 생성
      var markerLayer = new ol.layer.Vector({
        source: markerSource, //마커 feature들
        style: markerStyle //마커 스타일
      });
    
      map.addLayer(markerLayer);
      
  }

 

 

5. 마커 클릭시 hover 띄우기

forEachFeatureAtPixel(evt.pixel, function(f)  이게 뭔지 의미를 모르겠아 ㅜㅜ

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 800px;
        width: 100%;
      }
      .hover{
        border: 1px solid #63aee1;
        border-radius: 5px;
        background-color: #63aee1;
        font-size: 15px;
        color: white;
        text-align: center;
        position: absolute;
        top: 30px;
        left: -50px;
        width:130px;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id = "popup">
      <div id="popup-content"></div>
    </div>
  </body>
  <script type="text/javascript">
    var overlay;
    var view;
    var layer;
    var map;
    //마커 레이어에 들어갈 소스 생성
    var markerLayer;              
    var markerSource = new ol.source.Vector();
    //마우스 이벤트에 사용될 변수
    var hover=null; 
    //팝업이 담길 컨테이너 요소
    var container = document.getElementById('popup'); 
    //팝업 내용 요소
    var content = document.getElementById('popup-content'); 
    
    /*시작*/
    initMap();


    /*initMap*/
    function initMap(){
      //Overlay
      overlay = new ol.Overlay({
        element : container 
      });
      //View
      view = new ol.View({
          zoom: 16,
          center: new ol.geom.Point([14137023.47364948, 4477865.009314795]) 
          .getCoordinates(),    //좌표를 리턴함                  
      });
      //Layer
      layer = new ol.layer.Tile({
        title: 'VWorld Map',
        type : 'base',    //지도 종류(일반) ---(야간(midnight), 위성(satellite) 등)
        source : new ol.source.XYZ({     //VWorld API 사용
            url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png',
        })
      }); 
      //Map 생성
      map = new ol.Map({
        view: view,
        target: 'map',
        overlays: [overlay],
        layers: [layer],
      });      
    }    
   
    /*맵 클릭*/
    map.on('click', function(evt) {
      var coordinate = evt.coordinate;
      console.log(coordinate);
      // 지도에 마커가 그려진 레이어 추가
      addMarker(coordinate);
    });

    /*마커에 마우스 올렸을때*/
    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){
        //popup-content 부분에 content를 넣어줌
        content.innerHTML =  "<div class='hover'>" + "마커 클릭" + "</div>";
        //오버레이의 좌표를 정해줌
        overlay.setPosition(coordinate);
      } //마커가 없으면
      else{
        content.innerHTML = '';
      }
    });   

    /*마커 등록하기*/
    function addMarker(coordinate) {
      //클릭할때마다 마커변경 / 초기화
      if(markerLayer != null) {
        markerLayer.getSource().clear();
      }
      //point 좌표 등록
      var point_feature = new ol.Feature({
        geometry: new ol.geom.Point([coordinate[0], coordinate[1]])
      });
      markerSource.addFeature(point_feature);
      //marker style
      var markerStyle = new ol.style.Style({
        image: new ol.style.Icon({ //마커 이미지
          opacity: 1, //투명도
          scale: 0.08, //크기
          //marker 이미지
          src: '/img/marker.png'
        }),
        zindex: 10 //z-index
      });
      // 마커 레이어 생성
      markerLayer = new ol.layer.Vector({
        source: markerSource, //마커 feature들
        style: markerStyle //마커 스타일
      });
      map.addLayer(markerLayer);
    }
    
  </script>
</html>
저작자표시 비영리

'Private' 카테고리의 다른 글

20220418~ cav study  (0) 2022.04.19
OpenLayers Animation  (0) 2022.04.15
댓글