Openlayers 地图不使用全宽

Question

我在 Angular 上使用 openlayers 来显示带有 here-[=93 的地图=] 作为地图图块提供者。
Openlayers 6.1.1
Angular8.0.0

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

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

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

初始显示的部分宽度图

地图在 window 调整大小后使用全宽

我的 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 作为问题的原因，我还尝试替换 XYZ.url在 Angular 组件地图配置中 openstreetmap：

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

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

如有任何帮助或建议，我们将不胜感激。
谢谢！

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

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

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

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

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

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

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

Answer 1

使用浏览器的 DevTools 并为 div 设置 width=100% with class names "ol-viewport" , "ol-unselectable ol-layers" ,"ol-layer" , "ol-overlaycontainer-stopevent" 如果它不起作用，要么改变你的地图的方向

Answer 2

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

Openlayers API updateSize() ref

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

Angular代码：

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

这解决了我的问题。地图现在显示为分配给它的完整宽度。
可能原因：
也许 flex-layout / Flexbox 正在调整元素大小导致上面显示的副作用。
当 map div 被放置在包含 flex-layout 属性的 <div> 中时，可以看到进一步的冲突证据（例如 fxLayoutAlign、fxLayout 等）。在这种情况下，地图甚至不会显示。

在具有 flex-layout（或 Flexbox？）的页面上使用 openlayers 时要记住的事项

Answer 3

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

window.omap = this.map;

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

Answer 4

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

Openlayers 地图不使用全宽

Openlayers map not using full width

openlayers

here-api

flexbox

angular

openlayers-6