StyleImageInterface

Интерфейс для динамически создаваемых изображений стиля. Это спецификация для реализации: она не является экспортируемым методом или классом.

Изображения, реализующие этот интерфейс, можно перерисовывать в каждом кадре. Их можно использовать для анимации значков и узоров или для реакции на действия пользователя. Изображения стиля могут реализовать метод StyleImageInterface.render. Этот метод вызывается в каждом кадре и может использоваться для обновления изображения.

См.

Добавление анимированного значка на карту.

Пример

let flashingSquare = {
    width: 64,
    height: 64,
    data: new Uint8Array(64 * 64 * 4),

    onAdd: function(map) {
        this.map = map;
    },

    render: function() {
        // keep repainting while the icon is on the map
        this.map.triggerRepaint();

        // alternate between black and white based on the time
        let value = Math.round(Date.now() / 1000) % 2 === 0  ? 255 : 0;

        // check if image needs to be changed
        if (value !== this.previousValue) {
            this.previousValue = value;

            let bytesPerPixel = 4;
            for (let x = 0; x < this.width; x++) {
                for (let y = 0; y < this.height; y++) {
                    let offset = (y * this.width + x) * bytesPerPixel;
                    this.data[offset + 0] = value;
                    this.data[offset + 1] = value;
                    this.data[offset + 2] = value;
                    this.data[offset + 3] = 255;
                }
            }

            // return true to indicate that the image changed
            return true;
        }
    }
 }

 map.addImage('flashing_square', flashingSquare);

Свойства

data

data: Uint8Array<ArrayBufferLike> | Uint8ClampedArray<ArrayBufferLike> | StyleImageWebGLData

Пиксели изображения в том же формате, что и ImageData, либо обратный вызов StyleImageWebGLData, который отрисовывает их с помощью WebGL. Изображение WebGL отрисовывается непосредственно в своей области общего атласа значков. Оно не позволяет сделать ничего такого, чего нельзя было бы выразить с помощью пикселей, но для часто меняющегося изображения, например анимированного значка, это обходится гораздо дешевле: не требуется обработка пикселей на CPU и их загрузка.

onAdd?

optional onAdd?: (map: Map, id: string) => void

Необязательный метод, вызываемый при добавлении слоя на карту с помощью Map.addImage.

Параметры

Возвращает

void

onRemove?

optional onRemove?: () => void

Необязательный метод, вызываемый при удалении значка с карты с помощью Map.removeImage. Он позволяет изображению освободить ресурсы и удалить обработчики событий.

Этот метод также вызывается при потере контекста WebGL. После этого то же изображение добавляется снова без соответствующего onAdd, поэтому изображение должно быть способно заново создать всё, что было здесь освобождено.

Возвращает

void

render?

optional render?: () => boolean

Этот метод вызывается один раз перед каждым кадром, в котором будет использоваться значок. При необходимости метод может обновить член изображения data, заменив его новым изображением.

Если метод обновляет изображение, он должен вернуть true, чтобы применить изменение. Если метод возвращает false или ничего не возвращает, считается, что изображение не изменилось.

Анимированное изображение планирует следующий кадр, вызывая Map.triggerRepaint, обычно из таймера; возврат false в промежутках позволяет карте простаивать и вызывать idle.

Изображению, чей data отрисовывается с помощью WebGL, здесь нечего обновлять; возврат true позволяет запросить повторный вызов StyleImageWebGLData.renderWithWebGL.

Если обновления выполняются нечасто, может быть проще обновлять изображение с помощью Map.updateImage, а не реализовывать этот метод.

Возвращает

boolean

true, если этот метод обновил изображение. false, если изображение не изменилось.