ORBISmap JS API

Events

Events

Utility

Class
Model
Collection

Libraries

jQuery
OpenLayers

Примеры

Базовый шаблон HTML

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>OMJS</title>
            <link rel="stylesheet" href="http://example.com/static/omjs/2.8/omjs.css" />
            <script src="http://example.com/static/omjs/omjs.js"></script>

            <script>
            // Your code here
            </script>
        </head>
        <body>
            <div style="width:600px; height:400px;" id="map"></div>
        </body>
        </html>
    
Где http://example.com/ - URL к вашему ORBISmap Server-у.

Отображение подложки ORBISmap Server

Для того чтобы отобразить подложку опубликованной карты ORBISmap Server, мы воспользуемся классом визуализации карты omjs.View.

    omjs.initView("#map", map_config_url);
    
Параметр map_config_url - url-адрес файла конфигурации опубликованной карты. Этот адрес можно взять из окна настроек публикации отображаемой карты, скопировав адрес ссылки "Публичная карта".

Как только omjs загрузит необходимые данные, вы увидите подложку вашей опубликованной карты "pub_map"

Отображение тайловых слоёв ORBISmap Server

Отображение слоя карты ORBISmap Server тайлами:
    omjs.initView("#map", map_config)
        .done(function(view){
            view.addLayer("my_layer") // "my_layers" - код слоя опубликованной карты ORBISmap Server
        });
    

Вы можете отобразить несколько слоёв одновременно следующим образом:
    view.addLayer("my_layer my_layer2 anotherlayer") // Просто перечисляем коды слоёв через пробел
    

Отображение векторных слоёв ORBISmap Server

Отображение слоя карты ORBISmap Server вектором:
    omjs.initView("#map", map_config)
        .done(function(view){
            view.addLayer("my_layer", {
                "layerType": 'vector'
            })
        });
    

Изначально векторные слои отображаются со стандартными стилями OpenLayers.
Мы можем назначить собственные стили векторному слою следующим образом:
    view.addLayer("my_layer", {"layerType": 'vector'})
        .done(function(layer){

            layer.setStyle( // Устанавливаем собственные стили OpenLayers
                new omjs.ol.style.Style({
                    stroke: new omjs.ol.style.Stroke({
                        color: '#f00',
                        width: 1
                    }),
                    fill: new omjs.ol.style.Fill({
                        color: 'rgba(255, 0, 0, 0.1)'
                    })
                })
            )

        })
    

Если мы хотим отобразить объекты разными стилями в рамках одного слоя, мы можем установить функцию, которая будет возвращать стили для каждого объекта отдельно:
    view.addLayer("my_layer", {
            "layerType": "vector",
            "fields": ["my_layer_field"] // Указываем колонки, которые мы хотим получить при загрузке списка объектов слоя
        })
        .done(function(layer){

            // Подготовим несколько наборов стилей для наших векторных объектов
            var myVectorStyles = [
                new omjs.ol.style.Style(...), // first style
                new omjs.ol.style.Style(...) // second style
            ];

            // В качестве стилей устанавливаем функцию, в которой и будем определять, какие стили какому объекту применить
            layer.setStyle(function(ol_feature){ // ol_feature - ol.Feature
                // Получаем ссылку на объект omjs.Project.LayerObject
                var oms_obj = ol_feature.get("obj");
                // В зависимости от значения колонки "my_layer_field" возвращаем нужные нам стили
                if(oms_obj.get("my_layer_field") == 0){
                    return myVectorStyles[0];
                }else{
                    return myVectorStyles[1];
                }
            })

        })
    

Отображение маркера

На карте можно отобразить маркер в точке с заданными координатами.
Отображение маркера делается следующим образом:
    omjs.initView("#map", map_config)
        .done(function(view){
            view.addMarker([37.6155600, 55.7522200], {
                icon: 'http://example.com/marker_icon.png',
                name: 'Moscow city'
            })
        });
    
При этом будет отображен маркер с иконкой, указанной в опции icon.
Если опция icon не указана, будет отображен маркер со стандартной иконкой.

С опциями, которые можно передать в метод addMarker, можно ознакомиться в описании метода.

Отображение балуна

На карте можно отобразить всплывающее окошко (Балун) в точке с заданными координатами.
Отобразить балун можно следующим образом:
    omjs.initView("#map", map_config)
        .done(function(view){
            view.showBalloon({
                position: [37.6155600, 55.7522200],
                content: 'Hello world'
            })
        });
    

С опциями, которые можно передать в метод showBalloon, можно ознакомиться в описании метода.

Если на карте уже был отображен балун, он автоматически скроется.

Чтобы скрыть балун с карты, нужно вызвать метод hideBalloon():
    view.hideBalloon();
    

Отображение балуна по клику на маркер

Данный пример иллюстрирует взаимодействие пользователя с маркером, а именно по клику на маркер отображается балун с информацией о нём.
    omjs.initView("#map", map_config)
        .done(function(view){
            view.getWidgetManager().addWidget('LayerSwitcher');

            view.addMarker([40.3141300, 59.9386300], {
                name: 'Cанкт-петербург со смещением',
                coords: [40.3141300, 59.9386300]
            });

            view.getMarkerGroup('default').on('click', function(event){
                var marker = event.feature.get('features')[0];

                if (event.feature.get('features').length == 1) {
                    view.showBalloon({
                        content: marker.get('name'),
                        position: marker.get('coords')
                    })
                }
            });
        });
    

Отображение картограммы

Картограмма без классификации данных

Чтобы отобразить картограмму без классификации данных, нам понадобится векторный слой ORBISmap Server с колонкой, заполненной числовыми значениями.
Допустим, в опубликованной карте ORBISmap Server есть слой субъектов РФ subjects, у которого есть колонки sep1 и sep2, заполненные числовыми значениями.

Первым делом мы должны загрузить все необходимые данные этого слоя, для построения картограммы
    var project, view, subjects_layer, choropleth;
    omjs.initView("#map", map_config)
        .then(function(v){
            view = v; // Сохраняем ссылку на наш omjs.View
            project = view.getProject(); // Получаем "проект" для работы с данными ORBISmap Server

            return project.loadLayer('subjects'); // Загружаем слой subjects
        })
        .then(function(layer){
            subjects_layer = layer; // Сохраняем ссылку на наш слой subjects

            return subjects_layer.loadObjects({ // Загружаем объекты слоя вместе с геометрией
                fields: ['dop'],
                returnGeom: '1',
                geomSR: '3857'
            });
        })
        .then(function(){
            // Теперь, когда наши объекты загрузились, мы можем отобразить картограмму

            // Инициализируем картограмму, передав ей наш слой subjects
            choropleth = new omjs.View.Choropleth(subjects_layer, {
                minFillColor: '#ffffff', // Цвет для минимального значения
                maxFillColor: '#ff0000', // Цвет для максимального значения
                totalColors: 8 // Количество цветов, которые будут использованы в картограмме
            });

            // Добавим нашу картограмму в карту
            view.addLayer(choropleth)
        });
    

На данный момент мы должны увидеть слой 'subjects' со стилями по умолчанию.
Чтобы увидеть картограмму, мы должны указать колонку слоя, в которой заполнены значения для картограммы.
    // Устанавливаем колонку слоя subjects, из которой
    // нужно брать значения для картограммы
    choropleth.setField('sep1');
    

Теперь мы увидим картограмму без классификации данных.
Цвета объектов назначены в процентном соотношении относительно значений колонки 'sep1'.
В любой момент можно изменить колонку, по которой нужно отобразить картограмму, следующим образом.
    choropleth.setField('sep2');
    

Теперь картограмма построена по колонке sep2

Картограмма c классификаций данных

Чтобы наша картограмма более наглядно отражала наши значения на карте, необходимо классифицировать наши данные.
Для начала подготовим нашу карту и данные
    var project, view, subjects_layer, choropleth;
    omjs.initView("#map", map_config)
        .then(function(v){
            view = v; // Сохраняем ссылку на наш omjs.View
            project = view.getProject(); // Получаем "проект" для работы с данными ORBISmap Server

            return project.loadLayer('subjects'); // Загружаем слой subjects
        })
        .then(function(layer){
            subjects_layer = layer; // Сохраняем ссылку на наш слой subjects

            return subjects_layer.loadObjects({ // Загружаем объекты слоя вместе с геометрией
                fields: ['dop'],
                returnGeom: 1,
                geomSR: '3857'
            });
        })
        .then(function(){
            // Инициализируем картограмму, передав ей наш слой subjects
            choropleth = new omjs.View.Choropleth(subjects_layer);
            // Добавим нашу картограмму в карту
            view.addLayer(choropleth)
        });
    

Также мы должны подготовить классификаторы данных:
    var classificators = [
        {
            name: '<50%',
            style: new omjs.ol.style.Style({
                fill: new omjs.ol.style.Fill({
                    color: '#ff0000'
                })
            }),
            matcher: function(value){
                return value < 50; // Подразумеваем, что в нашем слое колонка sep1 хранит проценты
            }
        },{
            name: '>50%',
            style: new omjs.ol.style.Style({
                fill: new omjs.ol.style.Fill({
                    color: '#00ff00'
                })
            }),
            matcher: function(value){
                return value > 50;
            }
        }
    ]
    

Теперь мы должны связать наши данные с векторным слоем картограммы
    choropleth.bindData(
        subjects_layer.objects, // Сами данные для картограммы
        function(data, obj){ // Функция, которая должна вернуть значение для объекта векторного слоя `obj`
            return obj.get('sep1') // Поскольку наши данные хранятся в векторном слое, просто возвращаем нужное нам значение
        }
    )
    

Мы готовы отобразить картограмму.
Для этого мы должны установить наши классификаторы.
choropleth.classify(classificators)

Project

Класс Программы, реализующий работу с данными опубликованной карты

Пример использования

    // Инициализация проекта с конфигурационным файлом JSON
    omjs.initProject("http://example.com/project.json") // URL к конфигурационному файлу
        .done(function(project){ // project - инстанс проекта
            //...
        });

    // Инициализация проекта с объектом настроек
    var project = new omjs.Project({
            mapCode: "my_map", // Код карты
            apiUrl: "http://example.com/api/2/<project_code>/" // URL к ORBISmap Server REST API
        });
    

Пример, иллюстрирующий получение всех слоёв и их объектов с последующим выводом значения колонки 'name' для всех объектов:
    var ORBISMapServerLayers;

    project
        .loadLayers() // Загрузим все доступные слои
        .then(function(layers){ // layers - коллекция слоёв omjs.Project.ContainersCollection

            ORBISMapServerLayers = layers;

            // Передаём в цепочку ещё один "отложенный" объект
            return layers.loadObjects({ // Загрузим объекты всех слоёв в коллекции.
                'fields': ['name'] // Нам нужно загрузить значения колонки 'name'
            });
        })
        .then(function(){ // Выполнится, как только загрузятся все объекты наших слоёв
            // Теперь мы можем обратиться к данным объектов
            // Отобразим их на странице
            ORBISMapServerLayers.each(function(layer){
                // Отображаем код слоя
                omjs.$('body').append('<h3>'+layer.get('code')+'</h3>');

                layer.objects.each(function(obj){
                    // Отображаем ID и название объекта
                    omjs.$('body').append('<b>'+obj.getId()+'</b> '+obj.get('name')+'<br>')
                })
            })
        })
    

Инициализация

Фабрика/Конструктор Возвращает Описание
omjs.initProject( <String|Project config> ) async omjs.Project Инициализация проекта с конфигурацией.
Можно вместо объекта передать URL к JSON с конфигурацией.
new omjs.Project(<Project config>) omjs.Project Инициализация проекта с объектом конфигурации.

Конфигурация

Опция Тип Описание
apiUrl req String Url к ORBISMap REST API
mapCode req String Код опубликованной карты ORBISMap
token String Токен авторизации
lng String Код языка карты. Если не передан, ORBISMap вернет данные на основном языке карты

Методы

Метод Возвращает Описание
login( <String> user, <String> password ) async ajax response Авторизирует пользователя на проекте
logout() async ajax response Завершает сессию пользователя
loadContainers( <loadContainers Options> ) async omjs.ContainersCollection | ajax response Загружает список контейнеров
loadLayers() async omjs.ContainersCollection Загружает полный список контейнеров, но возвращает коллекцию, содержащую только слои
loadLayer( <String> код слоя ) async omjs.Project.Layer Загружает слой по его коду
loadObjects( <String> код слоя, <loadObjects Options> ) async omjs.Collection | ajax response Загружает список объектов слоя.
Возвращает коллекцию объектов omjs.Project.LayerObject.
loadObject( <String> код слоя, <Number> id объекта, <loadObject Options> ) async omjs.Project.LayerObject | ajax response Загружает объект слоя.

loadContainers Options

Опция Тип По умолчанию Описание
raw Boolean false Вернуть "сырой" ответ сервера или предварительно обработать и вернуть коллекцию контейнеров.
type String 'full' Тип запрашиваемого списка контейнеров.
'full' - Полный список контейнеров опубликованной карты
'publish' - Публичный список контейнеров опубликованной карты

loadObjects Options

Опция Тип По умолчанию Описание
raw Boolean false Вернуть "сырой" ответ сервера или предварительно обработать и вернуть коллекцию объектов.
fields String[] [] Список кодов колонок, значения которых также попадут в результат.
Если необходимо получить все колонки, то нужно указать первым элементом массива '*'.
fcode String null Код колонки для фильтрации
fval String null Значение фильтруемой колонки
limit Number null Ограничение на количество выбранных объектов
sort String null Набор колонок, по которым будет выполнена сортировка списка.
Значение представляется в формате name,a|capital|id,d, где a=ASC (по возрастанию), d=DESC (по убыванию).
Направление указывать не обязательно, по умолчанию ASC
returnBbox Number 0 Условие включения - ответ Bounding Box объекта - принимает значения 1 или 0.
bboxSR Number 4326 Spatial reference для Bounding Box объекта в формате EPSG. 4326 или 3857
returnGeom Number 0 Загружать ли геометрию объектов (если 1, геометрия будет возвращена в ответе в формате GeoJson).
geomSR Number 4326 Spatial reference для геометрии объекта в формате EPSG. 4326 или 3857
zoom Number null Параметр, учитываемый при запросе полной геометрии объекта: в случае указания текущего зума геометрия будет автоматически упрощена под указанный зум; если параметр не задавать, геометрия будет в исходном виде (без упрощения)

Container

Базовый класс, представляющий контейнер ORBISMap. Унаследован от omjs.Model.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.Project.Container( <Object> attributes, <Container Options> ) omjs.Project.Container Создаёт экземпляр контейнера.
Принимает объект с аттрибутами контейнера (метаданные) и экземпляр проекта .

Опции

Опция Тип Описание
project req omjs.Project Экземпляр проекта опубликованной карты ORBISMap.
Используется дочерними классами для доступа к данным.

Свойства

Свойство Тип Описание
project omjs.Project Экземпляр проекта опубликованной карты ORBISMap.

ContainersCollection

Коллекция контейнеров omjs.Project.Container.
Унаследован от Collection.

Методы

Метод Возвращает Описание
loadObjects( <loadObjects Options> ) async omjs.Collection Загружает объекты всех слоёв в коллекции.
Возвращает коллекцию объектов omjs.Project.LayerObject.

Layer (Data)

Класс, представляющий слой ORBISMap. Унаследован от omjs.Project.Container.

Методы

Метод Возвращает Описание
loadObjects( <loadObjects Options> ) async omjs.Collection Загружает объекты слоя.
Возвращает коллекцию объектов omjs.Project.LayerObject.
loadObject( <Number> id объекта, <loadObject Options> ) async omjs.Project.LayerObject Загружает объект слоя.

Свойства

Свойство Тип Описание
objects omjs.Collection Коллекция объектов omjs.Project.LayerObject с момента последней загрузки.

LayerObject

Класс, представляющий объект слоя ORBISMap. Унаследован от omjs.Model. Хранит в себе все данные объекта, включая геометрию (если она есть).
Класс, представляющий объект слоя платформы ORBISMap. Унаследован от omjs.Model. Хранит в себе все данные объекта, включая геометрию.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.Project.LayerObject( <Number> id, <Object> fields?, <LayerObject options?> ) omjs.LayerObject Инициализация объекта с заданным id и опциональным набором колонок

Опции

Опция Тип Описание
bbox Object Bounding Box объекта в формате: { "sw":[ 39.72841, 45.20185 ], "ne":[ 39.67222, 45.15139 ] }
geometry Object Объект геометрии в формате GeoJSON

Методы

Метод Возвращает Описание
getId() Number Возвращает id объекта
getGeometry() Object Возвращает объект геометрии в формате GeoJSON
setGeometry( <Object> Geometry ) this Присваивает геометрию объекту.
Принимает объект геометрии в формате GeoJSON
getBBox() Object Возвращает Bounding Box объекта
setBBox( <Array> sw, <Array> ne) Object Устанавливает Bounding Box объекта.
Принимает 2 массива с координатами юго-западной и северо-восточной точки BBox - например, .setBBox([39.72841, 45.20185], [39.67222, 45.15139])

View

Класс для отображения карты ORBISMap. Является прослойкой между данными ORBISmap Server и библиотекой OpenLayers.
Использует omjs.Project для доступа к данным опубликованной карты ORBISMap.
В качестве библиотеки для отображения карт используется OpenLayers.

Пример использования

    // Инициализация карты с конфигурационным файлом JSON
    omjs.initView(
        "#my_map",                            // CSS селектор элемента, в котором будет отображена карта
        "http://example.com/project.json"     // URL к конфигурационному файлу проекта.
    ).done(function(view){ // view - инстанс View
        //...
    });

    // Инициализация View вручную
    var view = new omjs.View(
        "#my_map", // CSS селектор элемента, в котором будет отображена карта
        project,   // Инстанс проекта
        {          // Объект опций View
            zoom   : 2,
            center : [37.6155600, 55.7522200]
        }
    );
    

Инициализация

Фабрика/Конструктор Возвращает Описание
omjs.initView( <HTMLElement|String> CSS Селектор, <String|View config>, <View config?> ) async omjs.View Инициализация представления карты в заданном элементе.
Можно вместо объекта передать URL к JSON с конфигурацией, в этом случае дополнительно можно передать ещё один объект с приоритетными опциями.
В конфигурации нужно также указать опции проекта
new omjs.View( <HTMLElement|String> CSS Селектор, <omjs.Project>, <View config?> ) omjs.View Инициализация представления в заданном элементе.
Принимает на вход HTML элемент (или CSS селектор элемента), в котором нужно отобразить карту, экземпляр проекта и объект с настройками View

Опции

Опция Тип По умолчанию Описание
tilesUrl req String '' Шаблон URL, по которому omjs сможет запрашивать тайлы ORBISMap.
Например:
"http://example.com/tms/<project_code>/{map_code}/?layers={layers}&x={x}&y={-y}&z={z}"
show Boolean true Условие отображения карты при инициализации
zoom Number 2 Начальный zoom карты
minZoom Number 1 Минимальный zoom карты
maxZoom Number 22 Максимальный zoom карты
center [] [37.6155600, 55.7522200] Широта и долгота центра карты
publication.baseMapType Number omjs.baseLayerType.MAP
Тип подложки карты, отображаемой по умолчанию
omjs.baseLayerType.MAP - опубликованная карта ORBISMap
omjs.baseLayerType.URL - шаблон url-адреса тайлов
omjs.baseLayerType.EXTERNAL - внешний сервис (Google, Yandex, ...)
publication.baseMapValue String ""
Значение подложки карты, отображаемой по умолчанию
Для типа подложки omjs.baseLayerType.MAP
   код опубликованной карты, используемой в качестве подложки
Для типа подложки omjs.baseLayerType.URL
   url-адрес шаблона тайлов
Для типа подложки omjs.baseLayerType.EXTERNAL
   возможные значения: 'OSM', 'kosmosnimki', 'yandexMap', 'yandexSat', 'yandexHibrid', 'yandexPublic', 'googleRoadmap', 'googleSat', 'googleHibrid', 'googleTerrain'
baseLayer String 'oms' Подложка, которая будет использована при начальном отображении карты.
По умолчанию - настроенная подложка карты ORBISMap.
Поддерживаемые подложки:
'oms' - ORBISMap
'kosmosnimki' - Космоснимки
'yandex' - Яндекс Схема
'yandexSat' - Яндекс Спутник
'google' - Google Карта
lng String 'ru' Язык интерфейса
translations Object {} Переопределение предустановленных фраз текущего языка интерфейса.
{'Объекты': 'Map objects', 'Адрес': 'Location'}
Полный список переводов фраз

Методы

Метод Возвращает Описание
getContainer() jQuery Element Возвращает контейнер (HTML элемент), в котором отображена карта
getMap() ol.Map Возвращает экземпляр карты OpenLayers, который используется для отображения карты
getProject() omjs.Project Возвращает экземпляр проекта, который используется для доступа к данным ORBISMap в текущей карте
getLayers() omjs.View.LayerCollection Возвращает коллекцию слоёв omjs.View.Layer карты
getWidgetManager() WidgetManager Возвращает менеджер виджетов карты
show() this Отображает карту, если она скрыта
hide() this Скрывает карту
showOMSPublication( <Function> beforeVectorAdd ) async Отображает опубликованную карту в соответствии с настройками публикации. Функция beforeVectorAdd будет вызвана перед каждым добавлением векторного слоя для предооставления возможности изменения конфигурации слоя.
addLayer( <String> Код слоя, <Object> Опции слоя? ) async omjs.View.Layer Загружает данные слоя из ORBISMap. Cоздаёт слой omjs.View.Layer и добавляет его на карту.
Можно передать несколько кодов слоёв ORBISMap через пробел (при установленном параметре layerType='tile').

В опциях слоя можно указать тип слоя layerType:
'tile' - создаст тайловый слой omjs.View.TileLayer (по умолчанию)
'vector' - создаст векторный слой omjs.View.VectorLayer
. Возможные опции тайлового и векторного слоя описаны в соответствующих разделах.

Поддерживаются следующие типы слоёв для визуализации данных:
oms_vector, oms_vector_category, oms_chart_layer, oms_vector_feature, oms_mvt
addLayer( <omjs.View.Layer> Слой ) async omjs.View.Layer Добавляет слой на карту.
addLayer( <ol.layer.Layer> Слой ) async omjs.View.Layer Создаёт слой omjs.View.Layer на основании переданного слоя OpenLayers и добавляет его на карту.
removeLayer( <omjs.View.Layer> Слой ) this Удаляет слой с карты
getBaseLayer() BaseLayer Возвращает менеджер подложек.
switchBaseLayer( <Number> ID подложки ) null Переключает базовую подложку.
Принимает ID базовой подложки из конфигурации публичной карты.
showBalloon( <Balloon Options> Опции? ) ol.Overlay Отображает балун (balloon) на карте.
Если в момент открытия балуна на карте уже есть открытый балун, то старый балун закрывается, и открывается новый.
Возвращает ol.Overlay.
hideBalloon() null Скрывает балун.
addMarker( <Array> Координаты, <addMarker Options> Опции? ) ol.Feature Отображает маркер на карте.
Возвращает ol.Feature.
getMarkerGroup( <String> Имя группы? ) omjs.View.MarkerLayer Возвращает группу маркеров по имени.
Если не передать имя группы, вернёт группу 'default'

Balloon Options: Любые опции, поддерживаемые ol.Overlay

Опция Тип По умолчанию Описание
content String | DOMElement '' Содержимое балуна
class String '' Дополнительные CSS классы, перечисленные через пробел, которые будут добавлены к контейнеру балуна
autoPan Boolean true Если установлено в true, в момент отображения балуна карта сдвинется так, чтобы балун полностью поместился в область видимости.
position Array undefined Координата в проекции 'EPSG:4326', в которой нужно отобразить балун.
positioning String 'bottom-center' Определяет, как элемент балуна будет расположен относительно позиции балуна на карте.
Возможные значения 'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left', 'top-center', 'top-right'.

addMarker Options

Опция Тип По умолчанию Описание
icon String '' URL изображения иконки
group String 'default' Имя группы маркеров.
Маркеры в группе собираются в кластеры.

Переводы фраз

    // ru
    {
        // SearchBarExt (виджет поиск)
        'Объекты': 'Объекты',
        'Адрес': 'Адрес',
        'По вашему запросу ничего не найдено': 'По вашему запросу ничего не найдено',
        'Произошла ошибка на стороне сервера': 'Произошла ошибка на стороне сервера',
        'Слой карты': 'Слой карты',
        // Measurement (измерение расстояний)
        'км<sup>2</sup>': 'км<sup>2</sup>',
        'м<sup>2</sup>': 'м<sup>2</sup>',
        'км': 'км',
        'м': 'м',
        // ChartLegend (легенда диаграмм)
        'Другие': 'Другие',
        // Balloon (окно)
        'Закрыть': 'Закрыть',
        // BaseLayer (базовые карты)
        'Участники OpenStreetMap': 'Участники OpenStreetMap',
        'Спутник': 'Спутник',
        'Ростелеком': 'Ростелеком'
    }
    // en
    {
        'Объекты': 'Objects',
        'Адрес': 'Address',
        'По вашему запросу ничего не найдено': 'No results for this search query',
        'Произошла ошибка на стороне сервера': 'Server error',
        'Слой карты': 'Map layer',
        'км<sup>2</sup>': 'km<sup>2</sup>',
        'м<sup>2</sup>': 'm<sup>2</sup>',
        'км': 'km',
        'м': 'm',
        'Другие': 'Other',
        'Закрыть': 'Close',
        'Участники OpenStreetMap': 'OpenStreetMap contributors',
        'Спутник': 'Sputnik',
        'Ростелеком': 'Rostelecom'
    }
    

Layer (View)

Используется для отображения слоя на карте. Унаследован от omjs.Model.
Может использовать omjs.Project.Layer для работы с данными слоя ORBISMap.
Также использует ol.layer.Layer и ol.source.Source для отображения слоя на карте.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.View.Layer( <View Layer options> ) omjs.View.Layer Создаёт экземпляр визуального слоя.

Опции

Опция Тип Описание
attributes Object Объект с аттрибутами. Может быть любым набором данных.
projectLayers omjs.Project.ContainersCollection Коллекция слоёв ORBISMap. Используется дочерними классами.

Методы

Метод Возвращает Описание
show() undefined Отображает слой на карте
hide() undefined Скрывает слой с карты
toggle() undefined Отображает или скрывает слой, в зависимости от того, отображен слой или нет.
isVisible() Boolean Отображается слой на карте или нет
getProjectLayers() omjs.Project.ContainersCollection Возвращает экземпляр коллекции слоёв проекта.
getMapLayer() ol.layer Возвращает экземпляр слоя OpenLayers, с которым ассоциирован слой omjs.View.Layer.
setMapLayer( <ol.layer.Layer> ) undefined Устанавливает слой OpenLayers
setSource( <ol.source.Source> ) undefined Устанавливает "источник данных" OpenLayers

LayerCollection

Коллекция визуальных слоёв. Унаследован от omjs.Collection.

TileLayer

Используется для отображения тайлового слоя на карте. Унаследован от omjs.View.Layer.
Может использовать сразу несколько слоёв omjs.Project.Layer для отображения нескольких слоёв одним тайловым слоем.
Также использует ol.layer.Tile и ol.source.Tile для отображения тайлового слоя на карте.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.View.TileLayer( <View Layer options> ) omjs.View.TileLayer Создаёт экземпляр визуального тайлового слоя.

Методы

Метод Возвращает Описание
setActiveLayers( <String> layer codes ) null Устанавливает набор слоёв ORBISMap для тайлового слоя карты. Принимает строку с перечисленными через пробел кодами слоёв.

VectorLayer

Используется для отображения векторного слоя на карте. Унаследован от omjs.View.Layer.
Может использовать omjs.Project.Layer для отображения слоя ORBISMap на карте.
Также использует ol.layer.Vector и ol.source.Vector для отображения векторного слоя на карте.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.View.VectorLayer( <View Layer options> ) omjs.View.VectorLayer Создаёт экземпляр визуального векторного слоя.

Опции

Опция Тип По умолчанию Описание
clustering Number null При назначении параметра точечный слой будет кластеризован и "источник данных" будет изменён на ol.source.Cluster
Указывается в виде максимальной дистанции в пикселях между кластерами.
projectLayers omjs.Project.ContainersCollection null Коллекция слоёв ORBISMap. Первый слой этой коллекции будет использован как источник геометрии.

Методы

Метод Возвращает Описание
setStyle( <ol.style.Style> | <ol.style.Style[]> | <ol.FeatureStyleFunction> ) null Устанавливает стили векторного слоя.
В случае с ol.FeatureStyleFunction, функция должна вернуть массив стилей OpenLayers.

События

Событие Данные Описание
click 'feature' - ol.Feature
'olEvent' - Объект события OpenLayers
Срабатывает, когда пользователь кликает по геообъекту.
singleclick 'feature' - ol.Feature
'olEvent' - Объект события OpenLayers
Срабатывает через 250 мс после того, как пользователь кликнул по геообъекту.
dblclick 'feature' - ol.Feature
'olEvent' - Объект события OpenLayers
Срабатывает, когда пользователь дважды кликает по геообъекту.
pointermove 'feature' - ol.Feature
'olEvent' - Объект события OpenLayers
Срабатывает, когда пользователь двигает курсор по геообъекту.
pointerenter 'feature' - ol.Feature
'olEvent' - Объект события OpenLayers
Срабатывает, когда пользователь навёл курсор на геообъект.
pointerleave 'feature' - ol.Feature
'olEvent' - Объект события OpenLayers
Срабатывает, когда пользователь увёл курсор с геообъекта.

Choropleth

Используется для отображения картограмм на карте. Унаследован от omjs.View.VectorLayer.
Использует omjs.Project.Layer для доступа к геометрии слоя ORBISMap.
Также использует ol.layer.Vector и ol.source.Vector для отображения векторного слоя на карте.

По умолчанию использует данные самого слоя ORBISMap и не классифицирует данные для отображения картограммы.
Есть возможность классифицировать данные для более тонкой настройки картограммы.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.View.Choropleth( <omjs.Project.Layer> слой ORBISmap Server, <Choropleth options> ) omjs.View.Choropleth Создаёт экземпляр слоя - картограммы.
Объекты слоя ORBISMap должны быть полностью загружены вместе с геометрией.
Опции нужны только для отображения картограмм с неклассифицированными данными.

Опции

Опция Тип По умолчанию Описание
minFillColor String '#ffffff' Цвет для минимального значения набора неклассифицированных данных картограммы.
maxFillColor String '#000000' Цвет для максимального значения набора неклассифицированных данных картограммы.
totalColors Number 10 Количество цветов в градиенте от minFillColor до maxFillColor
strokeColor String '#ffffff' Цвет контура объектов.
strokeWidth Number 1 Толщина контура объектов.

Методы

Метод Возвращает Описание
setField( <String> код колонки ) this Берёт код слоя ORBISMap, генерирует и отображает картограмму с неклассифицированными данными по переданному коду колонки.
bindData( <Any> данные, <Function(data, obj, feature)> функция сопоставления ) this Устанавливает новый набор данных для картограммы.
Набор данных необходимо сопоставить с данными векторного слоя.
Для этого вторым параметром нужно передать функцию сопоставления данных, которая принимает следующие значения:
data - данные, которые установлены первым параметром
obj - объект слоя ORBISmap Server, которые используется картограммой
feature - ol.Feature
Функция должна вернуть значение из data
classify( <Object[]> массив классификаторов ) this Функция для классификации данных картограммы.
Принимает массив объектов - классификаторов.
Классификатор это объект следующего формата
    {
        // Название классификатора
        name: '10-20',

        // Стили классификатора OpenLayers
        style: new omjs.ol.style.Style({
            fill: new omjs.ol.style.Fill({
                color: '#fff000'
            })
        }),

        // Функция, которая определяет, попадает значение
        // в данный классификатор или нет.
        // Должна вернуть true, если попадает,
        // или false, если не попадает.
        matcher: function(value){
            return value > 10 && value <= 20;
        }
    }
    
Каждый объект векторного слоя картограммы будет причислен к одному из
классификаторов, после чего, к этому объекту будут применены стили классификатора.

Стили классификаторов применяются после установки классификаторов.
getLegendData() Array Возвращает список объектов содержимого легенды omjs.Widget.Legend.
Применяется только для неклассифицированной картограммы.

MarkerLayer

Используется для отображения группы маркеров на карте. Унаследован от omjs.View.VectorLayer.
Также использует ol.layer.Vector и ol.source.Vector для отображения векторного слоя на карте.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.View.MarkerLayer( <Marker Layer options> ) omjs.View.MarkerLayer Создаёт экземпляр слоя группы маркеров.

Опции

Опция Тип По умолчанию Описание
group String 'default' Имя группы маркеров.
Маркеры в группе собираются в кластеры.
clustering Number null При указании параметра точечный слой будет кластеризован и "источник данных" будет изменён на ol.source.Cluster
Указывается в виде максимальной дистанции в пикселях между кластерами.

Методы

Метод Возвращает Описание
addMarker( <Array> Координаты | ol.Feature, <addMarker Options> Опции? ) ol.Feature Добавляет маркер в группу маркеров.
getMarkers() Array ol.Feature Возвращает массив маркеров.
setClusterStyle( <Object | ol.Style> Стили ) this Устанавливает стили для кластеров.
Может принимать объект с параметром `icon` - URL изображения иконки.
Либо может принять объект стилей OpenLayers ol.Style.

BaseLayer

Менеджер подложек.
Используется для переключения различных подложек на карте, таких как ORBISMap, Yandex, Google и т.д..
Экземпляр класса создаётся при инициализации omjs.View и доступен через метод view.getBaseLayer().

Методы

Метод Возвращает Описание
show() null Отображает подложку на карте
hide() null Скрывает подложку карты
switchTo( <String> название подложки ) null Переключает подложку.
Поддерживаемые подложки:
'BaseSource' - Базовая карта
'OSM' - OpenStreetMap
'kosmosnimki' - Космоснимки
'yandexMap' - Яндекс Схема
'yandexSat' - Яндекс Спутник
'yandexHibrid' - Яндекс Гибрид
'yandexPublic' - Яндекс народная карта
'googleRoadmap' - Google Карта
'googleSat' - Google Спутник
'googleHibrid' - Google Гибрид
'googleTerrain' - Google Рельеф

WidgetManager

Менеджер виджетов является коллекцией классов-виджетов и предназначен для добавления виджетов на карту.
Все виджеты добавляются с помощью этого класса.
Экземпляр класса создаётся при инициализации omjs.View и доступен через метод view.getWidgetManager().

Методы

Метод Возвращает Описание
addWidget( <String|omjs.Widget> widget, <Object> options? ) this Добавляет виджет на карту.
Может принимать код предустановленного виджета в виде строки:
'Button', 'ButtonGroup', 'ZoomControl', 'LayerSwitcher', 'DistanceButton', 'AreaButton'
Является объектом опций для инициализации виджета.
Также может принять экземпляр класса виджета omjs.Widget
hideWidgets() null Скрывает все виджеты
showWidgets() null Отображает все виджеты

Widget

Базовый класс виджета. От этого класса наследуются все виджеты omjs.
Содержит в себе необходимую минимальную логику для создания виджета.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.Widget( <Object> options? ) omjs.Widget Создаёт новый экземпляр виджета. Создаёт HTML Элемент - контейнер, который можно будет использовать для рендера виджета.
В объект опций можно передать 'classes' - список css классов, перечисленные через запятую, которые будут добавлены к контейнеру

Опции

Опция Тип По умолчанию Описание
classes String '' Список css классов, перечисленные через запятую, которые будут добавлены к контейнеру
css Object null Объект стилей CSS в формате jQuery, которые будут применены к контейнеру виджета.

Методы

Метод Возвращает Описание
getContainer() jQuery HTMLElement Возвращает DOM Элемент - контейнер виджета.
show() this Отображает виджет
hide() this Скрывает виджет
onAdd( <omjs.View> ) null Функция - заглушка для дочерних классов.
Вызывается при добавлении виджета в WidgetManager.
В функцию будет передан экземпляр omjs.View.

Button

Используется для добавления различных кнопок на карту. Унаследован от omjs.Widget.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.Widget.Button( <Object> widget options? ) omjs.Widget.Button Создаёт новый экземпляр виджета-кнопки.

Методы

Метод Возвращает Описание
on( <String> eventType, <Function> handler ) this Регистрирует обработчик handler DOM события eventType на контейнер виджета.

ButtonGroup

Используется для визуальной группировки виджетов-кнопок. Унаследован от omjs.Widget.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.Widget.ButtonGroup( <Object> options? ) omjs.Widget.ButtonGroup Создаёт новый экземпляр группы кнопок.

Опции

Опция Тип По умолчанию Описание
orientation String 'horizontal' Ориентация группы кнопок. Вертикальная 'vertical' или горизонтальная 'horizontal'
buttons omjs.Widget.Button[] null Массив виджетов-кнопок, которые будут добавлены в группу, как только она будет создана.

Методы

Метод Возвращает Описание
add( <omjs.Widget.Button ) this Добавляет кнопку в группу
remove( <omjs.Widget.Button ) this Удаляет кнопку из группы

DistanceButton

Встроенный виджет, предоставляющий инструмент измерения расстояния на карте. Унаследован от omjs.Widget.Button
Добавляется на карту через WidgetManager

AreaButton

Встроенный виджет, предоставляющий инструмент измерения площади на карте. Унаследован от omjs.Widget.Button
Добавляется на карту через WidgetManager

Panel

Используется для добавления различных панелей на карту. Унаследован от omjs.Widget.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.Widget.Panel( <Object> options? ) omjs.Widget.Panel Создаёт новый экземпляр виджета панели.

Опции

Опция Тип По умолчанию Описание
content String | DOMElement '' Содержимое панели

Методы

Метод Возвращает Описание
getContentContainer() jQuery HTMLElement Возвращает DOM Элемент - контейнер контента панели.

Legend

Используется для отображения легенды картограммы. Унаследован от omjs.Widget.Panel.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.Widget.Legend( <Object> options? ) omjs.Widget.Legend Создаёт новый экземпляр легенды.

Опции

Опция Тип По умолчанию Описание
classificators Array [] Объект содержимого легенды в формате:
    {
        'name': '', // Подпись
        'fillColor': '#000000', // Цвет заливки
        'strokeWidth': 1, // Толщина контура
        'strokeColor': '#000000', //Цвет контура
    }
    
name String '' Заголовок панели легенды

Методы

Метод Возвращает Описание
setClassificators( <Array> список данных легенды ) this Устанавливает новый набор данных для легенды.
setName( <String> заголовок панели легенды ) this Устанавливает новый заголовок панели легенды.

Window

Базовый класс виджета окна с заголовком и нижней панелью. Унаследован от omjs.Widget.
Используется для отображения большого объёма данных.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.Widget.Window( <Object> options? ) omjs.Widget.Window Создаёт новый экземпляр виджета окна.

Опции

Опция Тип По умолчанию Описание
showHeader Boolean true Отображение заголовка окна
showFooter Boolean true Отображение нижней панели окна
headerContent String | DOMElement '' Контент заголовка окна
footerContent String | DOMElement '' Контент нижней панели окна
content String | DOMElement '' Контент окна
beforeClose Function null Функция, которая будет вызвана перед закрытием окна. Если функция вернёт false, окно не будет закрыто.

Методы

Метод Возвращает Описание
setHeader( <String|DOMElement> контент заголовка ) this Устанавливает контент заголовка окна.
setFooter( <String|DOMElement> контент нижней панели ) this Устанавливает контент нижней панели окна.
setContent( <String|DOMElement> контент окна ) this Устанавливает контент окна

События

Событие Описание
close Срабатывает по закрытию окна

ZoomControl

Встроенный виджет масштабирования карты с указателем текущего увеличения (zoom). Унаследован от omjs.Widget.ButtonGroup
Вводится на карту через WidgetManager

LayerSwitcher

Встроенный виджет для переключения подложки карты. Унаследован от omjs.Widget.Button
Вводится на карту через WidgetManager

SidePanel

Виджет - панель. Унаследован от omjs.Widget
Используется для добавления панели, которая будет отображена рядом с картой.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.Widget.SidePanel( <Object> options? ) omjs.Widget.SidePanel Создаёт новый экземпляр виджета-панели.
В объекте опций можно передать позицию, которая укажет, где нужно будет отобразить панель.

Опции

Опция Тип По умолчанию Описание
position String 'left' Позиция панели. Принимает следующие значения:
'left', 'top', 'right', 'bottom'

LayersTree

Виджет для отображения слоёв опубликованной карты. Унаследован от omjs.Widget.SidePanel
При добавлении виджета на карту, на ней будут отображены все слои из виджета "Список слоёв".

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.Widget.LayersTree( <Object> sidepanel options? ) omjs.Widget.LayersTree Создаёт новый экземпляр виджета-дерева опубликованных слоёв.

Event methods

Набор методов, которые есть у классов, поддерживающих события.
События обеспечивают вызов определённой функции при выполнении процедур с объектом, например, при выборе (клике) пользовалем полигона на каррте, у объекта векторного слоя срабатывает событие 'click':
    Layer.on('click', function(e) {
        alert(e.olEvent.coordinate);
    });
    
Функции в событиях передаются по ссылке. Для отвязывания функции от события необходимо определить функцию до подписки:
    function onClick(e) { ... }

    Layer.on('click', onClick);
    Layer.off('click', onClick);
    

Методы

Метод Возвращает Описание
addEventListener( <String> type, <Function> fn, <Object> context? ) this Добавляет функцию, которая сработает при определённом событии объекта.
Возможно опционально указать контекст для функции (определить this).
Возможно указать несколько типов событий через пробел (например 'click dblclick')
addOneTimeEventListener( <String> type, <Function> fn, <Object> context? ) this Функционал аналогичен методу addEventListener, но функция будет отписана от события сразу же после первого срабатывания.
addEventListener( <Object> eventMap, <Object> context? ) this Подписывает сразу несколько функций на различные события {click: onClick, mousemove: onMouseMove}
removeEventListener( <String> type, <Function> fn?, <Object> context? ) this Отписывает указанную функцию от события. Если функция не укзана, будут отписаны все функции от указанного события.
removeEventListener( <Object> eventMap, <Object> context? ) this Отиписывает несколько функций от различных событий.
removeEventListener() this Отписывает все функции от всех событий.
hasEventListeners( <String> type ) Boolean Возвращает true, если на указанное событие существуют подписанные функции.
fireEvent( <String> type, <Object> data? ) this Вызывает событие указанного типа. Возможно передать объект с указанными данными: первый аргумент функции, подписанной на это событие, будет содержать в себе свойства этого объекта.
clearAllEventListeners() this Отписывает все функции от всех событий.
on( … ) this Ссылка на метод addEventListener.
once( … ) this Ссылка на метод addOneTimeEventListener.
off( … ) this Ссылка на метод removeEventListener.
fire( … ) this Ссылка на метод fireEvent.

Class

Базовый класс, реализующий ООП.
Почти все классы OMJS унаследованы от этого класса.

Класс обеспечивает простое наследование и представляет несколько специальных свойств: options, includes и statics.

Для создания нового класса используется omjs.Class.extend:
    var MyClass = omjs.Class.extend({
        initialize: function (greeter) {
            this.greeter = greeter;
            // конструктор класса
        },

        greet: function (name) {
            alert(this.greeter + ', ' + name)
        }
    });

    // Создаём экземпляр класса MyClass, передавая строку "Hello" в конструктор
    var a = new MyClass("Hello");

    // Вызываем метод greet, который вызовет алерт с текстом "Hello, World"
    a.greet("World");
    

Метод initialize является конструктором класса и вызывается при выполнении new MyClass(...).

Также метод используется, чтобы наследовать от других указанных классов:
    var MyChildClass = MyClass.extend({
        // ... новые свойства и методы
    });
    

Model

Базовый класс, представляющий модель данных.
Основная идея модели - разделение данных и логики.
Данные хранятся внутри модели, как в базе данных; методы и свойства класса реализуют бизнес-логику и работу с этими данными.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.Model( <Object> attributes, <Object> options? ) omjs.Model Создаёт новый экземпляр модели.
Принимает объект с аттрибутами (любые данные).
Опции могут быть использованы дочерними классами.

Методы

Метод Возвращает Описание
set( <String> ключ, <String> значение ) null Устанавливает новое значение в модель, которое будет доступно по заданному ключу.
set( <Object> объект значений ) null Устанавливает набор значений в модель.
{attr1:'value1', attr2:'value2',...}
get( <String> ключ значения ) Any Возвращает значение аттрибута по ключу

Collection

Базовый класс-коллекция, реализующий групповые методы работы с объектами/моделями.

Инициализация

Фабрика/Конструктор Возвращает Описание
new omjs.Collection( <Array> objects ) omjs.Collection Создаёт новую коллекцию с заданными объектами

Методы

Метод Возвращает Описание
getLength() Number Длина коллекции
getArray() Array Элементы коллекции в виде массива
indexOf( <object> объект ) Number Индекс элемента в коллекции, указанного в параметре object.
Если элемент отсутствует в коллекции - метод вернет -1
has( <Object|Object[]> объект[ы] ) Boolean Определение наличия элемента (массива элементов) в коллекции
at( <Number> Index ) Object Элемент коллекции с указанным индексом
add( <Object|Object[]> объект[ы] ) this Добавление элемента или массива элементов в коллекцию
remove( <Object|Object[]> объект[ы] ) this Удаление элемента (элементов) из коллекции
pluck( <String> имя аттрибута ) Array Создание массива из значений переданного аттрибута моделей коллекции
filter( <Function(obj, index)> фильтр ) omjs.Collection Фильтрация элементов коллекции и получение их в виде новой коллекции.
Принимает функцию, в которую будет передан объект и индекс.
Функция должна вернуть Boolean (попадает объект под фильтр или нет).
each( <Function(obj, index)> итератор ) this Цикл по коллекции.
Функция-итератор будет вызвана для каждого объекта коллекции.
reset( <Object[]> объекты ) this Очищает коллекцию и записывает в нее элементы objects

Libraries

Библиотека jQuery входит в состав omjs и доступна через переменную omjs.$.
Библиотека OpenLayers входит в состав omjs и доступна через переменную omjs.ol.