Карта Openlayers не использует полную ширину
Я использую openlayers на Angular для отображения карты с here-api в качестве поставщика фрагментов карты.
Openlayers 6.1.1
Angular 8.0.0
Однако, когда страница загружена, карта не занимает всю ширину.
Это происходит в Edge и Chrome для Windows (ПК) и Chrome на Android.
В 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 как причину проблемы, я также попытался заменить XYZ.url в конфигурации карты компонентов Angular с помощью openstreetmap:
https: // {ac}.tile.openstreetmap.org/{z}/{x}/{y}.png
Но это привело к той же проблеме, что и выше, поэтому я подозреваю, что это может быть проблема с openlayers.
Любая помощь или предложения будут очень благодарны.
Спасибо!
ОБНОВЛЕНИЕ ВОПРОСА: 20 февраля 2020 г.
Предложение @sep7696 побудило меня глубже изучить элементы браузера. При осмотре div "ol-layer" я увидел с шириной "274", которая не является полной шириной экрана (ширина экрана 375).
Я выделил атрибут ширины рассматриваемого тега:
Как видите, экран 375, но по какой-то причине ширина холста была установлена на 274.
Я должен добавить, что я также использую гибкий макет, который я пропустил ранее для ясности в вопросе, но чувствую, что теперь я должен предположить, что это может быть побочным эффектом flexbox.
Кто-нибудь знает, почему для холста установлено значение 274 или как я могу установить ширину на 100%?
Любая помощь или предложения будут очень благодарны.
4 ответа
Мне удалось заставить карту отображать полную ширину, вызвав метод openlayers PluggableMap.updateSize() в setTimeout (). SetTimeout позволяет инициализировать время карты до того, как для него будет вызван updateSize().
Openlayers API updateSize() исх.
Согласно документу openlayers, это заставляет карту пересчитывать размер области просмотра, если сторонний код изменяет размер области просмотра.
Угловой код:
setTimeout(() => { this.map.updateSize(); });
Это решает мою проблему. Карта отображается во всю выделенную ей ширину.
Возможная причина:
возможно, flex-layout / Flexbox изменял размеры элементов, что привело к побочному эффекту, показанному выше.
Еще одно свидетельство конфликта было обнаружено, когда div карты помещался в < div >, содержащий атрибуты гибкого макета (например, fxLayoutAlign, fxLayout и т. Д.). В этом случае карта даже не будет отображаться.
Что нужно иметь в виду при использовании openlayers на странице с гибким макетом (или Flexbox?).
Поскольку вы используете Angular, я полагаю, вы инициализируете карту в ngOnInit(), поэтому холст рисуется до того, как будет отображаться какой-либо html, поэтому изменение размера решает проблему, используйте ngAfterViewInit() вместо.
Используйте DevTools вашего браузера и установите ширину =100% для div с именами классов "ol-viewport", "ol-unselectable ol-Layers","ol-layer", "ol-overlaycontainer-stopevent", если он не работает, либо измените направление вашей карты
Чтобы отобразить карту, я начал updateSize() через 10 секунд иначе это не сработало
window.omap = this.map;
setTimeout(() => {
window.omap.updateSize();
}, 10000);