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

问题描述

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

My OpenLayers application includes several vector layers that interact with mouse movements. Everything was working as expected until I made one change to my css file. In my html, I defined a div:

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

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

My original/working css file includes:

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

为了给地图div一个流畅的宽度，我将css文件更改为：

To give the map div a fluid width, I changed the css file to:

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

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

Now when the map displays, there is some misalignment between the vector layers and the mouse coordinates, so my mouse-hover functions do not work correctly. If I change the size of the browser window just slightly, a redraw or refresh of the map div is invoked which makes this misalignment problem disappear. I visibly notice a slight shifting of vector elements on the map upon slightly resizing the browser window.

以下是我的OpenLayer代码片段，它们可能与此问题相关。 .first建立地图：

The following are my OpenLayer code snippets they may be relevant to this problem...first establish a map:

  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
      })
    })
  });

接下来，我构建了几个矢量图层（此处未显示详细信息）并将其中的一些组合为：

Next, I construct several vector layers (details not shown here) and group a few of them as:

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

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

Next, I set my zoom extent based on selected vector layer content:

  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 基于鼠标在地图上某些矢量图层上的位置：

Finally, I display some text data in a text box div named map_location_info based on the position of the mouse over some vector layers on the map:

  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组件？任何建议都将受到赞赏。

Somehow I need to force a redraw or refresh to some OpenLayers component just after the initial rendering of the map and vector layers. At what point in the code/process should I redraw/refresh and which OpenLayers component should this refresh/redraw be applied to? Any suggestions would be appreciated.

编辑：进一步考虑这个问题...... OpenLayers脚本位于JQuery选项卡的hmtl内容部分内。问题可能来自JQuery呈现其标签内容的方式。

In thinking about this further...the OpenLayers script is positioned inside the hmtl content section of a JQuery tab. The problem might be coming from the way JQuery renders its tab content.

推荐答案

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

I was able to resolve the issue by moving the OpenLayers script block from inside a JQueryUI tab content space to the $(document).ready(function() { }); script block at the bottom of my html template (and below a bunch of script using the DataTables library within that script block). So, all that remains in the JQueryUI tab content spaces are divs with no inline scripts. I did not attempt to trace out the css propagation so I really don't know exactly what was causing my problem. With several high level js libraries (JQuery, JQueryUI, DataTables, OpenLayers - which includes Google Closure and more) playing together in the same space I need to be careful about the order in which things are getting done. So, my problem was not an OpenLayers problem, but rather a code organization and ordering problem. This problem/solution reminds me of some good advice I didn't take from my earlier days of learning javascript.

这篇关于OpenLayers：如何在map div的流体css渲染后重新对齐鼠标坐标和矢量图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！