Openlayers 地图不使用全宽答案

【问题标题】：Openlayers map not using full widthOpenlayers 地图不使用全宽
【发布时间】：2020-08-20 01:54:51
【问题描述】：

我在 Angular 上使用 openlayers 来显示带有 here-api 作为地图图块提供者的地图。
Openlayers 6.1.1
Angular 8.0.0

但是，加载页面时，地图不会填满整个宽度。
这发生在适用于 Windows (PC) 的 Edge 和 Chrome 以及适用于 Android 的 Chrome 上。

在 Windows 中，只有在调整浏览器窗口大小时，地图才会使用整个宽度。
在 Android 中，当地图滚动出视图并返回再次查看时，宽度会被填充。

下面的屏幕截图展示了地图在调整浏览器大小之前和之后的样子。

初始显示时的部分宽度地图

调整窗口大小后地图使用全宽

我的 Angular 组件映射配置如下所示：

addCommonProjections();
this.source = new XYZ({
  url: 'https://{1-4}.base.maps.ls.hereapi.com' +
    '/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/512/png?apiKey=someApiKey',
  attributions: 'Map Tiles &copy; ' + new Date().getFullYear() + ' developer.here.com'
});

this.layer = new TileLayer({
  source: this.source
});

this.view = new View({
  center: fromLonLat([this.property.longitude, this.property.latitude ]),
  zoom: 16
});

this.map = new Map({
  target: 'map',
  interactions: defaultInteractions({
    onFocusOnly: true
  }),
  layers: [this.layer],
  view: this.view
});

html 模板如下所示：

<div tabindex="1" style="width: 100%; height: 300px;" id="map"></div>

为了消除地图图块提供者 here-api 作为问题的原因，我还尝试将 Angular 组件地图配置中的 XYZ.url 替换为 openstreetmap：

https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png

但这导致了与上述相同的问题，所以我怀疑这可能是 openlayers 的问题。

任何帮助或建议将不胜感激。
谢谢！

问题更新时间：2020 年 2 月 20 日

@sep7696 的建议让我更深入地研究浏览器元素。在检查“ol-layer” div 时，我能够看到宽度设置为“274”的标签，这不是屏幕的全宽（屏幕宽度 375）。

我已经突出显示了相关标签的宽度属性：

如您所见，屏幕为 375，但由于某种原因，画布宽度已设置为 274。

我应该补充一点，我也在使用 flex-layout，为了清楚问题，我之前省略了它，但我觉得我现在应该以防它可能是 flexbox 的副作用。

有谁知道为什么 canvas 设置为 274，或者我如何将宽度设置为 100%？

任何帮助或建议将不胜感激。

【问题讨论】：

标签： angular flexbox openlayers here-api openlayers-6

【解决方案1】：

通过在 setTimeout() 中调用 openlayers PluggableMap.updateSize() 方法，我设法让地图显示全宽。 setTimeout 允许在调用 updateSize() 之前初始化地图时间。

Openlayers API updateSize() ref

根据 openlayers 文档，如果第三方代码更改视口的大小，这会强制地图重新计算视口大小。

角码：

setTimeout(() => { this.map.updateSize(); });

这解决了我的问题。地图现在显示为分配给它的全宽。

可能原因：
可能 flex-layout / Flexbox 正在调整元素大小，导致上面显示的副作用。
当 map div 放置在包含 flex-layout 属性（例如 fxLayoutAlign、fxLayout 等）的 div> 中时，可以看到进一步的冲突证据。在这种情况下，地图甚至不会显示。

在带有 flex-layout（或 Flexbox？）的页面上使用 openlayers 时要记住的一点。

【讨论】：

我得到了确切的问题并用这种方式解决了。感谢您提出非常详细的问题以及很好的答案！

【解决方案2】：

使用浏览器的 DevTools 并为类名称为 "ol-viewport" 、 "ol-unselectable ol-layers" 、 "ol-layer" 、 "ol-overlaycontainer-stopevent" 的 div 设置 width=100% 如果它不起作用，请改变您地图的方向

【讨论】：

感谢您的回复。我已经检查了您提到的每个 div（ol-viewport、ol-unselectable ol-layers、ol-layer）并且它们已经设置了 width: 100%。但是，您的建议使我走得更远。有两个“ol-layer” div，都包含标签。第一个“ol-layer”div 中的
可能是你的 div 标签方向的原因，如果我能在 plunker 或其他东西中看到它，我可以更好地回答

【解决方案3】：

为了显示地图，我在 10 秒后启动了updateSize()，否则它不起作用

window.omap = this.map;

setTimeout(() => {
    window.omap.updateSize();
}, 10000);

【讨论】：

【解决方案4】：

当您使用 Angular 时，我想您是在 ngOnInit() 中初始化地图，因此在呈现任何 html 之前绘制画布，这就是调整大小解决问题的原因，请改用 ngAfterViewInit()。

【讨论】：