如何在 openlayers 3 中的固定屏幕位置显示文本

Question

我使用以下代码来显示鼠标在地图上移动时的坐标。绑定事件

...
map.on('pointermove', getCoordinates);
....

并显示坐标

function getCoordinates(evt) {
  var out = ol.coordinate.toStringHDMS(evt.coordinate);  
  $('#coordinates').text(out);
}

结果就像

我想要做的是在地图上移动显示坐标的 div，最好是在地图左下角，如下所示。

Answer 1

有几种方法可以做你想做的事。最简单的方法是在 ol3 中获取覆盖容器并将您的 div 附加到其中。

$('#coordinates').appendTo(
  $('.ol-overlaycontainer')
);

并使用 css 控制 div 的位置（绝对位置、左侧和底部）。

#coordinates {
  position: absolute;
  bottom: .5em;
  left: .5em;
}

现场观看： https: //jsfiddle.net/b3k6buw8/5/

另一种方法是创建一个自定义控件并使用map.addControl()，这基本上将其添加到同一个覆盖容器 div 中，您也可以使用 CSS 控制其位置。

仅供参考，OL3 中已经有一个MousePosition控件。也许你会感兴趣。 http://openlayers.org/en/v3.14.2/examples/mouse-position.html