如何移动弹出位置独立于缩放级别?

时间:2012-06-26 17:57:45

标签: openlayers

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

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方法完成此操作的任何想法吗?

1 个答案:

答案 0 :(得分:3)

有:

使用这些功能,可以像这样计算翻译:

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, ...);

可能还有一种查询当前视口/屏幕分辨率的方法(上面我只使用72)。