OpenLayers 3 위도 경도로 커스텀 마커 찍기

OpenLayers 3에서 위도, 경로를 이용해 커스텀 마커를 추가하는 방법.

원본 : http://artarmstrong.com/blog/2014/10/28/openlayers-3-custom-markers-by-latitude-longitude/

 

목차

 

Step 1. 지도 객체를 생성한다.

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.transform([-122.332071, 47.606209], 'EPSG:4326', 'EPSG:3857'),
    zoom: 9
  })
});

이 지도 객체는 OpenStreetMaps(OSM)을 baseMap으로 사용하도록 설정되어 있고, new ol.source.OSM()으로 OSM을 호출한다.

 

Step 2. 위도(latitude)와 경도(longitude)를 사용해서 대위법을 이용해 지도에 마커를 찍는다.

map.addOverlay(new ol.Overlay({
  position: ol.proj.transform(
    [-122.332071, 47.606209],
    'EPSG:4326',
    'EPSG:3857'
  ),
  element: $('<img src="/img/marker.png">')
}));

좌표계 때문에 위도와 경도를 가지고 바로 지도에 마커를 찍을 수는 없기 때문에, "transform"을 이용해서 위경도를 지도의 좌표계로 변환해서 지도에 마커를 찍는다.

또한, 어느 줌 레벨 이상부터 마커가 보이게 할지 설정할 수도 있다.

 

지도 위에 새로운 "Overlay" 를 추가하여 여기에 마커를 찍게 되는데, 오버레이나 마커는 원하는 만큼 추가할 수 있다.

 

Step 3. 팝오버(popOver) 사용하기

마커에 팝오버를 추가할 수도 있다. 아래의 코드는 당신의 콘텐츠를 팝오버로 띄우는 방법을 말해준다.

이 방법은 다른 마커를 선택해서 , 다른 팝 오버를 띄워야 하는 경우 기존의 마커들을 숨길 수도 있다.

map.addOverlay(new ol.Overlay({
  position: ol.proj.transform(
    [-122.332071, 47.606209],
    'EPSG:4326',
    'EPSG:3857'
  ),
  element: $('<img class="location-popover" src="/img/marker.png">')
    .css({marginTop: '-200%', marginLeft: '-50%', cursor: 'pointer'})
    .popover({
      'placement': 'top',
      'html': true,
      'content':'<strong>Location Name</strong>'
    })
    .on('click', function (e) { $(".location-popover").not(this).popover('hide'); })
}));