矢量层的可选点有一个偏移量

Question

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

下面是一些代码:

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的影响。

有什么问题吗?

Answer 1

我也遇到了同样的问题。它似乎链接到从特定模式导航到页面(我使用ajax散列分页)。在我与地图上的第一个功能交互后，页脚没有加载，下面发生了:

1. 地图跳跃和拉伸/涂抹轻微
2. 页脚出现在我的页面
3. 垂直滚动条出现

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

Answer 2

我有同样的问题。这里有一些建议可能会对你有所帮助:

1. 检查地图的容器的大小(可能是一个Div)
2. 检查地图的大小(openlayers的地图对象)。
3. 比较这两个尺寸是否相等。

如果没有，可以使用map.setSize([width,height])来调整地图的大小。