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/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

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

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

    // Инициализация проекта с конфигурационным файлом 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>/" // 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 Server REST API
mapCode req String Код опубликованной карты ORBISMap Server

Методы

Метод Возвращает Описание
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 1 или 0 включать ли в ответ Bounding Box объекта
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 Параметр, учитываемый при запросе полной геометрии объекта: в случае указания текущего зума геометрия будет автоматически упрощена под указанный зум; если параметр не задавать, геометрия будет в исходном виде (без упрощения)

loadObject Options

Опция Тип По умолчанию Описание
returnBbox Number 0 1 или 0 включать ли в ответ Bounding Box объекта
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 Server. Унаследован от omjs.Model.

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

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

Опции

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

Свойства

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

ContainersCollection

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

Методы

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

Layer

Класс, представляющий слой ORBISMap Server. Унаследован от 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 Server. Унаследован от 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'a .setBBox([39.72841, 45.20185], [39.67222, 45.15139])

View

Класс для отображения карты ORBISMap Server. Является прослойкой между данными ORBISMap Server и библиотекой OpenLayers.
Использует omjs.Project для доступа к данным опубликованной карты ORBISMap Server.
В качестве библиотеки для отображения карт используется 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.
Конфигурация View описана ниже.

Опции

Опция Тип По умолчанию Описание
tilesUrl req String '' Шаблон URL, по которому omjs сможет запрашивать тайлы ORBISMap Server.
Например:
"http://example.com/tiles/?m={map_code}&l={layers}&x={x}&y={-y}&z={z}&p_id=<project>"
Параметр p_id - ID Проекта. Для получения значения этого параметра необходимо обратиться к администратору проекта.
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 Server
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 Server.
Поддерживаемые подложки:
'oms' - ORBISMap Server
'kosmosnimki' - Космоснимки
'yandex' - Яндекс Схема
'yandexSat' - Яндекс Спутник
'google' - Google Карта

Методы

Метод Возвращает Описание
getContainer() jQuery Element Возвращает контейнер (HTML элемент), в котором отображена карта
getMap() ol.Map Возвращает экземпляр карты OpenLayers, который используется для отображения карты
getProject() omjs.Project Возвращает экземпляр проекта, который используется для доступа к данным ORBISMap Server в текущей карте
getLayers() omjs.View.LayerCollection Возвращает коллекцию слоёв omjs.View.Layer карты
getWidgetManager() WidgetManager Возвращает менеджер виджетов карты
show() this Отображает карту, если она скрыта
hide() this Скрывает карту
addLayer( <String> Код слоя, <Object> Опции слоя? ) async omjs.View.Layer Загружает данные слоя из ORBISMap Server, создаёт слой omjs.View.Layer и добавляет его на карту.
Можно передать несколько кодов слоёв ORBISMap Server через пробел (работает только если 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 Отображает балун на карте.
Если в момент открытия балуна на карте уже есть открытый балун, то старый балун закрывается, и открывается новый.
Возвращает ol.Overlay.
hideBalloon() null Скрывает балун.
addMarker( <Array> Координаты, <addMarker Options> Опции? ) ol.Feature Отображает маркер на карте.
Возвращает ol.Feature.
getMarkerGroup( <String> Имя группы? ) omjs.View.MarkerLayer Возвращает группу маркеров по имени.
Если не передать имя группы, вернёт группу 'default'

Balloon Options

Опция Тип По умолчанию Описание
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'.
Любые опции, поддерживаемые ol.Overlay.

addMarker Options

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

Layer

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

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

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

Опции

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

Методы

Метод Возвращает Описание
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 Server слоёв для тайлового слоя карты. Принимает строку с кодами слоёв, перечисленных через пробел.

VectorLayer

Используется для отображения векторного слоя на карте. Унаследован от omjs.View.Layer.
Может использовать omjs.Project.Layer для отображения слоя ORBISMap Server на карте.
Также использует 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 Server. Первый слой этой коллекции будет использован как источник геометрии.

Методы

Метод Возвращает Описание
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 Server.
Также использует ol.layer.Vector и ol.source.Vector для отображения векторного слоя на карте.

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

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

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

Опции

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

Методы

Метод Возвращает Описание
setField( <String> код колонки ) this Берёт код слоя ORBISMap Server и сразу же генерирует и отображает картограмму с неклассифицированными данными по переданному коду колонки.
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 Добавляет маркер в группу маркеров.
Возвращает ol.Feature.
getMarkers() Array ol.Feature Возвращает массив маркеров.
setClusterStyle( <Object | ol.Style> Стили ) this Устанавливает стили для кластеров.
Может принимать объект с параметром `icon` - URL изображения иконки.
Либо может принять объект стилей OpenLayers ol.Style.

BaseLayer

Менеджер подложек.
Используется для переключения различных подложек на карте, таких как ORBISMap Server, 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

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

OpenLayers

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