5

我在Angular上使用openlayers来显示带有here-api作为地图图块提供者的地图。开放层 6.1.1角 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 © ' + 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://{ac}.tile.openstreetmap.org/{z}/{x}/{y}.png


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

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

问题更新：2020 年 2 月 20 日

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

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

地图画布设置为宽度 275

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

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

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

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

4

4 回答 4

6

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

Openlayers API updateSize() 参考

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

角代码：

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

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

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

于 2020-02-21T10:48:42.500 回答
0

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

window.omap = this.map;

setTimeout(() => {
    window.omap.updateSize();
}, 10000);
于 2020-02-27T09:50:43.627 回答
0

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

于 2020-08-19T17:54:51.960 回答
0

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

于 2020-01-02T07:56:35.007 回答