OpenLayers 3: Картата е размазана

Понякога картата е размазана, когато добавя моята карта (същия html, css, js) към друга страница. Различната страница може да има други html, css и js вътре в нея. Ясната картина вляво е вътре в страница с добавен CSS от трета страна. Този вдясно е без чужди html, css и js.

Как да поправя този проблем?

Сравнение на рязко с размазано

Едно нещо, което забелязах, когато проверявах техните детайли, е, че размерите на платното за втория пример са много по-малки.

Ширината и височината на острата карта са правилниШирината и височината на замъглената карта са по-малки

Редактиране [Коригирано!]:

Открих проблема, като разгледах източника на ol.js. На конзолата размазаното изображение има map.frameState_.pixelRatio = 0,89 (по подразбиране window.devicePixelRatio), докато ясното изображение има map.frameState_.pixelRatio = 1. Ако задам pixelRatio = 1, когато инициализирам картата, това коригира проблем:

var map = new ol.Map({pixelRatio: 1, ...});

Оказва се, че ако вашият интернет браузър е увеличен (напр. до 90%), window.devicePixelRatio ще се промени, което причинява замъгляването. Въпреки това, когато увеличите обратно до 100%, картата все още е увеличена, докато не опресните страницата.


person Alan    schedule 05.03.2015    source източник
comment
можете ли да ни покажете и кода на картата - изглежда, че вашата карта се преоразмерява в тази вдясно   -  person Ian Turton    schedule 05.03.2015


Отговори (1)


Това е добре известен проблем, който все още не е отстранен.
Предлагам откриване, ако браузърът е увеличен и публикувайте предупреждение към потребителя като - „Хей. Картата ще е гадна, ако не сте увеличили браузъра на 100%“.
И малко извън темата - ако промените размера на контейнера и картата, ако е замъглена, просто извикайте map.updateSize(), за да го поправите.

person Mike B    schedule 23.04.2016