OpenLayers-2에서 마우스 위치를 툴팁으로 표시하는 방법은 무엇입니까?


10

OpenLayers에서 맵 좌표를 마우스 오버 효과로 사용하고 싶습니다. 다음 코드를 사용하고 있습니다. 그러나 픽셀 좌표를 보여줍니다.

    map.events.register("mousemove", map, function(e) {      
      var position = e.map.x + e.xy.y;
      OpenLayers.Util.getElement("tooltip").innerHTML = position 
    });

7k 회의 조회수와 최대 4 개의 투표로
레이더 아래

답변:



11

simo의 답변에 추가하려면 ... 예를 들어 보겠습니다.

map.events.register("mousemove", map, function (e) {
    var position = e.map.getLonLatFromViewPortPx(e.xy);
    OpenLayers.Util.getElement("tooltip").innerHTML = "<label>Latitude: " + position.lat + "</label><br/><label>Longitude: " + position.lon + "</label>";
});

내가 한 것처럼 Mercator에서 Geographic으로 변환해야 할 수도 있습니다.

var position = e.map.getLonLatFromViewPortPx(e.xy).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));

5

Openlayers 2.12부터 다음 방법이 호버링에서 좌표에 액세스하는 데 사용됩니다.

map.events.register("mousemove", map, function (e) {            
var point = map.getLonLatFromPixel( this.events.getMousePosition(e) )     
    console.log(point.lon, point.lat)
});

1

Openlayers 2.13에서는 다음과 같이 할 수 있습니다.

map.addControl(
    new OpenLayers.Control.MousePosition({
        prefix: 'Coords: ',
        separator: ' | ',
        numDigits: 2,
        emptyString: 'Mouse not over map'
    })
);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.