V
V
Viktor Shcherbakov2020-04-27 15:57:00
JavaScript
Viktor Shcherbakov, 2020-04-27 15:57:00

Why are my pictures black on a smartphone and on some PCs in Yandex Panorama?

I embed a panorama from Yandex on the site, everything would be fine, but there is a black screen on the smartphone, also on some PCs, there are no errors in the console, and photos are loaded in the developer panel in the network tab, but everything is black on the screen!

ymaps.ready(function () {
    // Для начала проверим, поддерживает ли плеер браузер пользователя.
    if (!ymaps.panorama.isSupported()) {
        // Если нет, то ничего не будем делать.
        return;
    }

    // Сначала описываем уровни масштабирования панорамного изображения.
    // Для этого заводим класс, реализующий интерфейс IPanoramaTileLevel.
    // Параметрами конструктора будут шаблон URL тайлов и размер уровня.
    function TileLevel (urlTemplate, imageSize) {
        this._urlTemplate = urlTemplate;
        this._imageSize = imageSize;
    }

    ymaps.util.defineClass(TileLevel, {
        getTileUrl: function (x, y) {
            // Определяем URL тайла для переданных индексов.
            return this._urlTemplate.replace('%c', x + '-' + y);
        },

        getImageSize: function () {
            return this._imageSize;
        }
    });

    // Теперь описываем панораму.
    function Panorama () {
        ymaps.panorama.Base.call(this);
        // Наша панорама будет содержать два уровня масштабирования
        // панорамного изображения: низкого и высокого качества.
        this._tileLevels = [
            new TileLevel('tiles/%c.jpg', [6000, 3000]),
            new TileLevel('tiles2/%c.jpg', [1500, 750])
        ];
    }

    // Наследуем класс панорамы от ymaps.panorama.Base, который частично
    // реализует IPanoramaTileLevel за нас.
    ymaps.util.defineClass(Panorama, ymaps.panorama.Base, {
        getPosition: function () {
            // Панорама будет располагаться в начале координат...
            return [0, 0, 0];
        },

        getCoordSystem: function () {
            // ...декартовой системы.
            return ymaps.coordSystem.cartesian;
        },

        getAngularBBox: function () {
            // Область, которую занимает панорама на панорамной сфере.
            // В нашем случае это будет вся сфера.
            return [
                0.5 * Math.PI,
                2 * Math.PI,
                -0.5 * Math.PI,
                0
            ];
        },

        getTileSize: function () {
            // Размер тайлов, на которые нарезано изображение.
            return [300, 300];
        },

        getTileLevels: function () {
            return this._tileLevels;
        }
    });

    // Теперь создаем плеер с экземпляром нашей панорамы.
    var player = new ymaps.panorama.Player('player', new Panorama());
});

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question