OpenLayers：如何在map div的流体css渲染后重新对齐鼠标坐标和矢量图层
我的OpenLayers应用程序包括几个与鼠标移动交互的矢量图层。 一切都按预期工作，直到我对我的css文件进行了一次更改。 在我的HTML中，我定义了一个div：
我的原始/工作css文件包括：
#main_map { position: absolute; left: 200px; top: 0px; height: 600px; width: 1000px; }
为了给地图div一个流畅的宽度，我将css文件更改为：
#main_map { position: absolute; left: 200px; top: 0px; height: 600px; width: calc(100% - 487px); }
现在，当地图显示时，矢量图层和鼠标坐标之间存在一些不对齐，因此我的鼠标hoverfunction无法正常工作。 如果我稍微改变浏览器窗口的大小，则会调用地图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 = ' '; } }; map.on('pointermove', function(evt) { if (evt.dragging) { return; } var pixel = map.getEventPixel(evt.originalEvent); displayFeatureInfo(pixel); });
不知何故，我需要在初始渲染地图和矢量图层之后强制重绘或刷新一些OpenLayers组件。 我应该在代码/进程中的哪一点重绘/刷新以及应该将刷新/重绘应用于哪个OpenLayers组件？ 任何建议，将不胜感激。
编辑：在进一步思考这个问题时…… OpenLayers脚本位于JQuery选项卡的hmtl内容部分中。 问题可能来自JQuery呈现其标签内容的方式。
我能够通过将OpenLayers脚本块从JQueryUI选项卡内容空间移动到$(document).ready(function() { });来解决此问题$(document).ready(function() { }); 我的html模板底部的脚本块（以及使用该脚本块中的DataTables库的一堆脚本下面）。 因此，JQueryUI选项卡内容空间中的所有内容都是没有内联脚本的div。 我没有试图追踪css传播，所以我真的不知道究竟是什么导致了我的问题。 有几个高级js库（JQuery，JQueryUI，DataTables，OpenLayers – 包括Google Closure等）在同一个空间中一起玩，我需要注意事情的完成顺序。 所以，我的问题不是OpenLayers问题，而是代码组织和排序问题。 这个问题/解决方案让我想起了我从早期学习javascript时没有采取的一些好建议。