Openlayers 3 矢量层的可选点具有偏移

我有一个带有GeoJSON源的向量层，由点和线串组成。当我点击一个点时，我想打开一个带有附加信息的弹出窗口

下面是一些代码：

var style = {
  'Point': [new ol.style.Style({
    image: new ol.style.Circle({
      fill: new ol.style.Fill({
        color: 'rgb(255,0,0)'
      }),
      radius: 5,
      stroke: new ol.style.Stroke({
        color: '#000000',
        width: 1
      }),
    })
  })],
  'LineString': [new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#ff0000',
      width: 3
    })
  })],
  'MultiLineString': [new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#0000ff',
      width: 3
    })
  })]
};


var map = new ol.Map({
  target: 'map-ol-canvas',
  interactions: ol.interaction.defaults({mouseWheelZoom: false}),
  layers: [new ol.layer.Tile({ source: new ol.source.OSM() })],
  view: new ol.View({
    zoom: 8,
    maxZoom: 16
  })
});
map.getView().fit(extent, map.getSize());

var trackSource = new ol.source.Vector({
  url: '/test.geojson',
  format: new ol.format.GeoJSON()
});

var track = new ol.layer.Vector({
  source: trackSource,
  style: function(feature, resolution) {
    return style[feature.getGeometry().getType()];
  }
});
map.addLayer(track);

var select = new ol.interaction.Select({
  filter: function (feature, layer) {
    return feature.getGeometry().getType() === 'Point';
  }
});
map.addInteraction(select);

// When user clicks on a waypoint, show a tooltip.
function onMouseClick(browserEvent) {
  var coordinate = browserEvent.coordinate;
  var pixel = map.getPixelFromCoordinate(coordinate);
  map.forEachFeatureAtPixel(pixel, function(feature) {
    if (feature.getGeometry().getType() === 'Point') {
      console.log(feature.get('date'));
    }
  });
}
map.on('click', onMouseClick);

问题：

当我直接点击一个点时，什么也没发生。当我单击下面的几个像素，再单击右或左一点（取决于缩放级别！）时，会选中该点并触发console.log

我可以通过使用Firebox WebDeveloper插件并激活“禁用所有样式”来修复此问题。 然而，当我一个接一个地手动删除所有CSS时，这种行为永远不会消失。 首先，我认为这可能是一些继承的填充或边距，但目前我认为画布不应该受到任何CSS的影响

对可能出现的问题有什么想法吗

亲切问候,，

---

哈吉斯

我也遇到了同样的问题。它似乎链接到从特定模式导航到页面（我使用的是ajax哈希分页）。页脚不会加载，在我与地图上的第一个功能交互后，会发生以下情况：

地图会跳跃并略微拉伸/涂抹

页脚显示在我的页面上

此时会出现垂直滚动条

---

当我从另一个页面链接时，问题似乎没有发生。

我遇到了相同的问题。它似乎链接到从特定模式导航到页面（我使用的是ajax哈希分页）。页脚不会加载，在我与地图上的第一个功能交互后，会发生以下情况：

地图会跳跃并略微拉伸/涂抹

页脚显示在我的页面上

此时会出现垂直滚动条

---

当我从另一个页面链接时，似乎没有出现此问题。

我也有同样的问题。以下是一些建议，可能会对您有所帮助：

检查地图容器的大小（可以是Div）

检查贴图的大小（openlayers的贴图对象）

比较这两种尺寸以确认两种尺寸是否相等

---

如果没有，您可以使用

map.setSize（[width，height]）

来调整地图的大小。

我也有同样的问题。这里有一些建议可以帮助您：

检查地图容器的大小（可以是Div）

检查贴图的大小（openlayers的贴图对象）

比较这两种尺寸以确认两种尺寸是否相等

---

如果没有，您可以使用

map.setSize（[width，height]）

来调整地图的大小。

为什么需要

ol.交互。使用
过滤器选择
？您已经在MouseClick上的
内进行了检查。这只是为了查看偏移是否出现在两个交互上。是的；）是否尝试将snaptoPixel选项设置为false？我没有放弃这个选择。但遗憾的是，它并没有解决这个问题。无论如何谢谢你！为什么需要
ol.交互。使用
过滤器选择
？您已经在MouseClick上的
内进行了检查。这只是为了查看偏移是否出现在两个交互上。是的；）是否尝试将snaptoPixel选项设置为false？我没有放弃这个选择。但遗憾的是，它并没有解决这个问题。无论如何谢谢你！ps:map的大小表示openlayers贴图对象，而不是mapDiv的大小。ps:map的大小表示openlayers贴图对象，而不是mapDiv的大小。