multiple popup in openlayers (다중팝업)

기능 구현에 앞서서

OpenLayers의 Popup(tooltip)은 기본 예제 따라하면 단일 팝업으로만 작성 가능하다.

본 개발자의 클라이언트는 여러 정보를 한번에 보고싶어하심.... 하...제발......

 

1. OepnLayers Multiple Popup

단순하게 코드 구현 

//맵 클릭 이벤트
map.on('singleclick', function(evt) {
    var coordinate = evt.coordinate;
    var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'));
    
    // 툴팁 DIV 생성
    let element = document.createElement("div");
    element.classList.add('ol-popup');
    element.innerHTML = `<a id="popup-closer" class="ol-popup-closer"></a> <div><p>You clicked here:</p><code>${hdms}</code></div>`;
    element.style.display = 'block';

	// OverLay 생성
    let overlay = new ol.Overlay({
        element: element, // 생성한 DIV
        autoPan: true,
        className: "multiPopup",
        autoPanMargin: 100,
        autoPanAnimation: {
            duration: 400
        }
    });
	//오버레이의 위치 저장
    overlay.setPosition(coordinate);
    //지도에 추가
    map.addOverlay(overlay);

	// 해당 DIV 다켓방법
    let oElem = overlay.getElement();
    oElem.addEventListener('click', function(e) {
        var target = e.target;
        if (target.className == "ol-popup-closer") {
            //선택한 OverLayer 삭제
            map.removeOverlay(overlay);

        }
    });
});

2. 결과