[Openlayers5] 3.마우스 위치에 따른 좌표값 표출

#1 마우스  위치에 따른 좌표값 표출(커스텀 가능)

마우스 위치에 따른 좌표를 표시하는 기능을 구현한 것입니다.

.custom-mouse-position {
    font-size: 12px;
    position: absolute;
    top: 7px;
    right: 0px;
    width: 190px;
    text-shadow: -1px 0px #ffffff, 0px 1px #ffffff, 1px 0px #ffffff, 0px -1px #ffffff;
}

마우스 위치에 따른 좌표값을 표출하기 위한 div 요소의 스타일을 설정합니다.

 

<!-- 좌표를 표출할 div 요소 추가 -->
<div id="mouse-position" class="custom-mouse-position"></div>

좌표를 표출하기 위한 div 요소를 추가합니다.

 

반응형

/** 마우스 위치에 따른 좌표값을 표출할 마우스 컨트롤 */
var mousePositionControl = new ol.control.MousePosition({
    coordinateFormat: function(coordinate) {
        return ol.coordinate.format(coordinate, 'Lat : {x}°; Lon : {y}°', 4);	// 소수점 4자리까지 표시
    },
    // 좌표계 설정 (경도와 위도)
    projection    : "EPSG:4326",
    // 스타일을 적용할 CSS 클래스 이름
    className     : "custom-mouse-position",
    // 컨트롤을 추가할 HTML 요소의 ID 값
    target        : "mouse-position",
    // 초기 값 설정 (마우스 위치 값이 정의되지 않았을 때 표시됨)
    undefinedHTML : "",
});

// 맵에 마우스 위치 컨트롤 추가
mainMap.addControl(mousePositionControl);

1. mousePositionControl : 마우스 위치에 따라 좌표값을 표시하기 위한 ol.control.MousePosition 컨트롤을 생성합니다.
2. coordinateFormat : 좌표값 표시 형식을 설정합니다. 
       이 함수는 마우스가 위치한 좌표를 'Lat : {x}°; Lon : {y}°' 형식으로 포맷합니다.
       소수점 4자리까지 표시합니다.
3. projection : 좌표계를 설정합니다. 
       이 경우 "EPSG:4326" 좌표계를 사용하여 경도와 위도로 표시됩니다.
4. className : 스타일을 적용할 CSS 클래스 이름을 설정합니다.
5. target : 컨트롤을 추가할 HTML 요소의 ID 값을 설정합니다.
6. undefinedHTML : 초기 값 설정. 마우스 위치 값이 정의되지 않았을 때 표시됩니다.
       " " : 마우스가 지도 밖으로 벗어나면 값이 값으로 변경됩니다.
       "" : 마우스가 지도 밖으로 벗어나면 마지막으로 렌더링 된 값을 유지합니다.
7. mainMap.addControl(mousePositionControl) : 맵에 마우스 위치 컨트롤을 추가합니다.