Выбираемые точки векторного слоя имеют смещение

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 Addon и активировав "Отключить все стили". Однако, когда я вручную удаляю все CSS один за другим, такое поведение никогда не исчезает. Во-первых, я подумал, что это может быть какой-то унаследованный отступ или отступ, но в настоящее время я думаю, что холст вообще не должен быть затронут CSS.

Есть идеи о том, что может быть не так?

С уважением, Хаггис

Answer 1

У меня такая же проблема. Вот несколько советов, которые могут вам помочь:

1. проверьте размер контейнера карты (может быть Div).
2. проверить размер карты (объект карты openlayers).
3. сравните эти два размера, чтобы убедиться, что два размера равны.

если нет, вы можете использовать map.setSize([width,height])настроить размер карты.

Answer 2

Я испытываю ту же проблему. Похоже, что это связано с переходом на страницу из определенного модального типа (я использую хэш-пейджинг ajax). Нижний колонтитул не загружается, и после того, как я взаимодействую с первой функцией на карте, происходит следующее;

1. Карта прыгает и слегка растягивается
2. Нижний колонтитул появляется на моей странице
3. Появляется вертикальная полоса прокрутки

Кажется, проблема не возникает, когда я делаю ссылку с другой страницы.