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

Question

我使用以下代码在鼠标在 map 上移动时显示坐标。 绑定(bind)事件

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

和显示坐标

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

结果是这样的

我想做的是在 map 上移动显示坐标的 div，最好是在 map 左下角，像这样。

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