Перейти к основному содержимому

2. Свойства и опции

accessToken:string​

Токен доступа к карте. The event type.

src/index.js

Пример (см. ниже).

mmrgl.accessToken = myAccessToken

baseApiUrl:string​

Начальный API URL, используемый для получения тайлов, стилей, спрайтов и глифов.

src/index.js

Пример (см. ниже).

mmrgl.baseApiUrl = 'https://geo.rustore.ru/api';

workerCount:number​

Количество веб-воркеров на странице с GL JS картами. По умолчанию это половина числа ядер (ограничено 6). Обязательно нужно устанавливать этот параметр перед инициализацией карты.

src/index.js

Пример (см. ниже).

mmrgl.workerCount = 2;

maxParallelImageRequests:number​

Максимальное количество изображений (растровых тайлов, спрайтов, иконок) для параллельной загрузки. Влияет на производительность в растровых картах. 16 по умолчанию.

src/index.js

Пример (см. ниже).

mmrgl.maxParallelImageRequests = 10;

supported:function​

Проверяет поддержку браузером GL JS

src/index.js

Пример (см. ниже).

if (!mmrgl.supported()) {
  alert( 'Your browser does not support MMR GL' );
}

version:string​

Версия текущей сборки MMR GL

src/index.js

Пример (см. ниже).

console.log(mmrgl.version);
//> 1.2.3;

setRTLTextPlugin:function​

Устанавливает плагин для поддержки RTL. Необходимо для поддержки арабского и еврейского языков.

src/index.js

Параметры:

  • pluginURL:string — путь до RTL плагина;
  • callback:function(error:object) — функция вызывается если есть ошибка;
  • lazy:boolean — ленивая подгрузка.

Пример (см. ниже).

mmrgl.setRTLTextPlugin(pluginUrl, function (error) {
    if (error) {
        console.log('something was wrong', error);
    }  else {
        console.log('rtl-text-plugin loaded successfully');
    }
}, true);

getRTLTextPluginStatus:function​

Получаем статус RTL-плагина. Статус плагина может быть: unavailable (т. е. не запрошено или удалено), loading, loaded или error. Если статус loaded и плагин запрашивается снова, то будет выдана ошибка.

src/index.js

Пример (см. ниже).

const pluginStatus = mmrgl.getRTLTextPluginStatus();

clearStorage:function​

Очищает cacheStorage в котором могут храниться кэш тайлов

src/index.js

Параметры:

callback:function(error:object) — путь до RTL-плагина.

Пример (см. ниже).

mmrgl.clearStorage()

AnimationOptions (группа параметров)​

Параметры, влияющие на анимацию (используются в методах: Map#panBy, Map#easeTo), контролируют продолжительность и функцию плавности анимации (easing function). Являются необязательными.

src/ui/camera.js

Параметры:

  • duration:number — продолжительность анимации (в миллисекундах);
  • easing:function — функция, принимающая время в диапазоне 0..1 и возвращающая число, где 0-начальное состояние, а 1-конечное;
  • offset:PointLike — смещение центра относительно реального центра контейнера карты в конце анимации;
  • animate:boolean — если false, анимации будут отключены;
  • essential:boolean — если true, то анимация считается существенной и не будет затронута prefers-reduced-motion (предпочитает уменьшенное движение);

CameraOptions (группа параметров)​

Параметры, влияющие на камеру (используются в методах: Map#jumpTo, Map#easeTo и Map#flyTo), контролируют location (стартовая позиция), zoom (масштабирование), bearing и pitch камеры. Все свойства являются необязательными.

src/ui/camera.js

Параметры:

  • center:LngLatLike — центр карты.
  • zoom:number — удаленность (масштаб) карты.
  • bearing:number — нужный пеленг в градусах. Пеленг — это направление компаса, которое находится «вверх». Например, пеленг: 90 ориентирует карту так, чтобы восток был вверх.
  • pitch:number — желаемый наклон карты в градусах. Тангаж — угол к горизонту, измеряемый в градусах с диапазоном от 0 до 60 градусов. Например, pitch: 0 обеспечивает видимость взгляда прямо вниз на карту, в то время как pitch: 60 наклоняет перспективу пользователя к горизонту. Увеличение значения наклона часто используется для отображения 3D-объектов.
  • around:LngLatLike —** если задан zoom, around определяет точку, вокруг которой центрируется zoom`.
  • padding:PaddingOptions — применяется к каждой стороне viewport для смещения точки схода (актуально когда карта наклонена).

PaddingOptions (группа параметров)​

Параметры отступов (используются в методах: Map#fitBounds, Map#fitScreenCoordinates и Map#setPadding). Отрегулируйте эти параметры, чтобы установить количество отступов в пикселях, добавленных к краям карты. Все свойства этого объекта должны быть неотрицательными целыми числами.

src/ui/camera.js

Параметры:

  • top:number — отступ в пикселях сверху карты;
  • bottom:number — отступ в пикселях снизу карты;
  • left:number — отступ в пикселях слева карты;
  • right:number — отступ в пикселях справа карты.

Пример (см. ниже).

var bbox = [[-79, 43], [-73, 45]];
map.fitBounds(bbox, {
  padding: {top: 10, bottom:25, left: 15, right: 5}
});

Пример (см. ниже).

var bbox = [[-79, 43], [-73, 45]];
map.fitBounds(bbox, {
  padding: 20
});

RequestParameters (группа параметров)​

Объект, возвращаемый методом callback Map.options.transformRequest.

src/ui/ajax.js

Параметры:

  • url:string — URL запроса.
  • headers:object — заголовки отправляемые с запросом.
  • method:string — метод запроса GET | POST | PUT,
  • type:string — возвращаемый тип тела запроса (body response) string | json | arrayBuffer.
  • credentials:string — same-origin | include, используйте include для отправки кук (cookies) в кроссдоменных запросах.
  • collectResourceTiming:boolean — если true, то информация Resource Timing API будет доступна для запросов выполняемых GeoJSON и Vector Tile (эта информация обычно недоступна из основного потока JavaScript). Информация будет возвращена в свойстве ResourceTiming.

Пример (см. ниже).

transformRequest: function (url, resourceType) {
    if (resourceType  === 'Source' && url.indexOf( 'http://myHost' ) > -1) {
        return {
            url: url.replace( 'http', 'https' ),
            headers: {  'my-custom-header' : true },
            credentials: 'include' // Include cookies for cross-origin requests
        }
    }
};

StyleImageInterface (спецификация для разработчиков)​

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

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

src/style/style_image.js

Параметры:

  • width:number;
  • height:number;
  • data:(Uint8Array|Uint8ClampedArray).

Пример (см. ниже).

var 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
        var value = Math.round(Date.now() / 1000) % 2 === 0  ? 255 : 0;
         
        // check if image needs to be changed
        if (value !==  this .previousValue) {
            this .previousValue = value;
             
            var bytesPerPixel = 4;
            for (var x = 0; x <  this .width; x++) {
                for (var y = 0; y <  this .height; y++) {
                    var 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);

CustomLayerInterface (спецификация для разработчиков)​

Это не метод и не класс. Интерфейс для кастомизации стиля слоев.

Кастомные слои позволяют пользователю визуализировать непосредственно в GL context карты с помощью камеры. Эти слои могут быть добавлены между любыми обычными слоями с помощью Map#addLayer.

Кастомные слои должны иметь уникальный идентификатор и тип custom. Они должны реализовывать render и могут реализовывать prerender, onAdd и onRemove. Они могут инициировать рендеринг с помощью Map#triggerRepaint и должны соответствующим образом обрабатывать Map.event:webglcontextlost и Map.event:webglcontextrestored.

Свойство RenderingMode определяет, будет ли слой обрабатываться как слой 2D- или 3D-карты:

  • RenderingMode: 3d — для использования буфера глубины и совместного использования его с другими слоями.
  • RenderingMode: 2d — для добавления слоя без глубины. Если вам нужно использовать буфер глубины для слоя 2d, вы должны использовать закадровый фреймбуфер и CustomLayerInterface#prerender.

src/style/style_layer/custom_style_layer.js

Параметры:

  • id:string — уникальный ID слоя;
  • type:string — тип слоя, должен быть custom;
  • renderingMode:string — 3d или 2d, по умолчанию 2d.

Пример (см. ниже).

// Custom layer implemented as ES6 class
class NullIslandLayer {
    constructor() {
        this .id = 'null-island' ;
        this .type = 'custom' ;
        this .renderingMode = '2d' ;
    }
     
    onAdd(map, gl) {
        const vertexSource = 
            uniform mat4 u_matrix;
            void main() {
                gl_Position = u_matrix * vec4(0.5, 0.5, 0.0, 1.0);
                gl_PointSize = 20.0;
            };
         
        const fragmentSource = 
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            };
         
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexSource);
        gl.compileShader(vertexShader);
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentSource);
        gl.compileShader(fragmentShader);
         
        this .program = gl.createProgram();
        gl.attachShader( this .program, vertexShader);
        gl.attachShader( this .program, fragmentShader);
        gl.linkProgram( this .program);
    }
     
    render(gl, matrix) {
        gl.useProgram( this .program);
        gl.uniformMatrix4fv(gl.getUniformLocation( this .program, "u_matrix" ), false , matrix);
        gl.drawArrays(gl.POINTS, 0, 1);
    }
}
     
map.on( 'load', function () {
    map.addLayer( new NullIslandLayer());
});

prewarm:function​

Выполняет «прогрев» всех ресурсов (например, инициализирует веб-воркеры), чтобы снизить время на загрузки карты. Если используются mmrgl.workerUrl и mmrgl.workerCount их нужно определять до вызова prewarm().

По умолчанию управление этими ресурсами выполняется автоматически, и они инициализируются по необходимости (лениво) при первом создании карты. При вызове prewarm() ресурсы будут созданы заранее и не будут очищены при удалении последней карты со странице. Это позволяет повторно использовать их новыми экземплярами карт. Их можно очистить вручную, вызвав функцию mmrgl.clearPrewarmedResources(). Это необходимо только в том случае, если ваша веб-страница остается активной, но полностью перестает использовать карты.

Это полезно при использовании карт в одностраничном приложении (SPA), где пользователь будет перемещаться между различными страницами/экранами, которые могут привести к постоянному созданию и уничтожению экземпляров карт.

src/index.js

Пример (см. ниже).

mmrgl.prewarm()

clearPrewarmedResources:function​

Очищает ресурсы, которые ранее были созданы mmrgl.prewarm(). Обратите внимание, что обычно в этом нет необходимости. Вы должны вызывать эту функцию только в том случае, если ожидаете, что пользователь вашего приложения не вернется к просмотру карты в любой момент вашего приложения.

src/index.js

Пример (см. ниже).

mmrgl.clearPrewarmedResources()