OpenLayers：如何在地图div的流体CSS渲染后重新对齐鼠标坐标和矢量层

Question

我的OpenLayers应用程序包括几个与鼠标移动交互的矢量层。 一切都按预期进行，直到我对css文件进行了一次更改。 在我的html中，我定义了一个div：

<div id="main_map" class="map"></div>

我的原始/工作CSS文件包括：

#main_map {
 position: absolute;
 left: 200px;
 top: 0px;
 height: 600px;
 width: 1000px;
}

为了给map div赋予流体宽度，我将css文件更改为：

#main_map {
 position: absolute;
 left: 200px;
 top: 0px;
 height: 600px;
 width: calc(100% - 487px);
}

现在，当地图显示时，矢量层和鼠标坐标之间会出现一些未对齐的情况，因此我的鼠标悬停功能无法正常工作。 如果我稍稍更改浏览器窗口的大小，则将调用map div的重绘或刷新，这将使此未对齐问题消失。 我明显注意到，在稍微调整浏览器窗口的大小后，地图上矢量元素略有偏移。

以下是我的OpenLayer代码段，它们可能与此问题有关...首先建立一个映射：

  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'main_map',
    controls: ol.control.defaults({
      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
        collapsible: true
      })
    })
  });

接下来，我构造了几个矢量层（细节未在此处显示）并将其中的一些分组为：

  var vector_layer_all = new ol.layer.Group({ layers: [vector_layer,vector_layer2] });

接下来，我根据选定的矢量图层内容设置缩放范围：

  var extent = ol.extent.createEmpty();
  vector_layer_all.getLayers().forEach(function(layer) {
    ol.extent.extend(extent, layer.getSource().getExtent());
  });
  map.getView().fit(extent, map.getSize());

最后，根据鼠标在地图上某些矢量层上的位置，在名为map_location_info的文本框div中显示一些文本数据：

  var displayFeatureInfo = function(pixel) {
    var features = [];
    map.forEachFeatureAtPixel(pixel, function(feature,layer) {
      features.push(feature);
    }, null, function(layer) {
      return (layer === vector_layer | layer === vector_layer2 | layer === vector_layer3);
    });
    if (features.length > 0) {
      var info = [];
      var i, ii;
      for (i = 0, ii = features.length; i < ii; ++i) {
        info.push(features[i].get('Name'));
        info.push(features[i].get('Status'));
      }
      document.getElementById('map_location_info').innerHTML = info.join(', ') || '(unknown)';
    } else {
      document.getElementById('map_location_info').innerHTML = '&nbsp;';
    }
  };
  map.on('pointermove', function(evt) {
    if (evt.dragging) {
      return;
    }
    var pixel = map.getEventPixel(evt.originalEvent);
    displayFeatureInfo(pixel);
  });

在刚渲染完地图和矢量层之后，我需要以某种方式强制重新绘制或刷新某些OpenLayers组件。 我应该在代码/过程中的什么时候重绘/刷新，以及应该将此刷新/重绘应用于哪个OpenLayers组件？ 任何建议，将不胜感激。

编辑：在进一步考虑... OpenLayers脚本位于JQuery选项卡的hmtl内容部分内。 问题可能出在JQuery呈现其选项卡内容的方式上。

Answer 1

通过将OpenLayers脚本块从JQueryUI选项卡内容空间内部移至$(document).ready(function() { });我能够解决此问题$(document).ready(function() { }); 脚本块位于我的html模板的底部（以及在该脚本块中使用DataTables库的一堆脚本下面）。 因此，JQueryUI选项卡内容空间中保留的所有内容都是没有内联脚本的div。 我没有尝试找出CSS传播，所以我真的不知道是什么导致了我的问题。 在同一个空间中同时使用几个高级js库（JQuery，JQueryUI，DataTables，OpenLayers-包括Google Closure等），我需要注意事情的完成顺序。 因此，我的问题不是OpenLayers问题，而是代码组织和订购问题。 这个问题/解决方案使我想起了一些我从早期学习javascript时没有得到的好建议。