openlayers - 如何独立于缩放级别移动弹出位置？

Question

假设您有一个带有标记的图层和一个在鼠标悬停时显示弹出窗口的事件监听器，例如

var hints = new OpenLayers.Control.SelectFeature(wplayer, {
  hover: true,
  eventListeners: {
    featurehighlighted: function(event) {
      var feature = event.feature;
      popup = new OpenLayers.Popup(null,
        feature.geometry.getBounds().getCenterLonLat().add(3000, 3000),
        new OpenLayers.Size(200,10),
        feature.attributes.name, false, null);
      ...

目前为止这有效 - 并且 add(3000, 3000) 正确地移动了位置。但我想独立于当前缩放级别将其移动相同数量的像素。这样实际的标记就不会被弹出窗口阻挡。

这意味着我必须将像 (+15px, +15px) 这样的平移转换到当前显示的 openlayers 坐标系中。在伪代码中:

feature.geometry.getBounds().getCenterLonLat().add(Pixels(15,15).toMap())

关于如何使用 openlayers 方法完成此操作的任何想法？

Answer 1

有:

• getViewPortPxFromLonLat()
• getLonLatFromViewPortPx()

使用这些函数，可以像这样计算翻译:

var ll = feature.geometry.getBounds().getCenterLonLat();
var px = map.getViewPortPxFromLonLat(ll, 72);
px = px.add(15, -15);
ll = map.getLonLatFromViewPortPx(px);
...
popup = new OpenLayers.Popup(null, ll, ...);

可能还有查询当前viewport/screen resolution的方法(上面我只用了72)