如何在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，您可以使用 [=27= 控制它的位置] 也是。

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