ORBISmap JS API
Примеры
Базовый шаблон HTMLОтображение подложки ORBISmap Server
Отображение тайловых слоёв ORBISmap Server
Отображение векторных слоёв ORBISmap Server
Отображение маркера
Отображение балуна
Отображение маркера с балуном
Отображение картограмм
Project
Пример использованияИнициализация
Конфигурация
Методы
View
Пример использованияИнициализация
Опции
Методы
Data
ContainerContainersCollection
Layer
LayerObject
Map Layers
LayerLayerCollection
TileLayer
VectorLayer
Choropleth
MarkerLayer
BaseLayer
Widgets
WidgetManagerWidget
Button
ButtonGroup
DistanceButton
Panel
Legend
Window
AreaButton
ZoomControl
LayersSwitcher
SidePanel
LayersTree
Примеры
Базовый шаблон 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_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(
|
omjs.Project |
Инициализация проекта с конфигурацией. Можно вместо объекта передать URL к JSON с конфигурацией. Конфигурация описана ниже. |
new omjs.Project(<Project config>)
|
omjs.Project |
Инициализация проекта с объектом конфигурации. Конфигурация описана ниже. |
Конфигурация
Опция | Тип | Описание |
---|---|---|
apiUrl req |
String |
Url к ORBISmap Server REST API |
mapCode req |
String |
Код опубликованной карты ORBISmap Server |
token |
String |
Токен авторизации |
lng |
String |
Код языка карты. Если не передан, ORBISmap Server вернет данные на основном языке карты |
Методы
Метод | Возвращает | Описание |
---|---|---|
login(
|
ajax response |
Авторизирует пользователя на проекте |
logout()
async
|
ajax response |
Завершает сессию пользователя |
loadContainers(
|
omjs.ContainersCollection |
|
Загружает список контейнеров |
loadLayers() async
|
omjs.ContainersCollection |
Загружает полный список контейнеров, но возвращает коллекцию, содержащую только слои |
loadLayer(
|
omjs.Project.Layer |
Загружает слой по его коду |
loadObjects(
|
omjs.Collection |
|
Загружает список объектов слоя. Возвращает коллекцию объектов omjs.Project.LayerObject. |
loadObject(
|
omjs.Project.LayerObject |
|
Загружает объект слоя. |
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.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.Project.Container |
Создаёт экземпляр контейнера. Принимает объект с аттрибутами контейнера (метаданные) и экземпляр проекта . |
Опции
Опция | Тип | Описание |
---|---|---|
project req |
omjs.Project |
Экземпляр проекта опубликованной карты ORBISmap Server. Используется дочерними классами для доступа к данным. |
Свойства
Свойство | Тип | Описание |
---|---|---|
project |
omjs.Project |
Экземпляр проекта опубликованной карты ORBISmap Server. |
ContainersCollection
Коллекция контейнеров omjs.Project.Container.
Унаследован от Collection.
Методы
Метод | Возвращает | Описание |
---|---|---|
loadObjects(
|
omjs.Collection
|
Загружает объекты всех слоёв в коллекции. Возвращает коллекцию объектов omjs.Project.LayerObject. |
Layer
Класс, представляющий слой ORBISmap Server. Унаследован от omjs.Project.Container.
Методы
Метод | Возвращает | Описание |
---|---|---|
loadObjects(
|
omjs.Collection
|
Загружает объекты слоя. Возвращает коллекцию объектов omjs.Project.LayerObject. |
loadObject(
|
omjs.Project.LayerObject
|
Загружает объект слоя. |
Свойства
Свойство | Тип | Описание |
---|---|---|
objects |
omjs.Collection |
Коллекция объектов omjs.Project.LayerObject с момента последней загрузки. |
LayerObject
Класс, представляющий объект слоя ORBISmap Server. Унаследован от omjs.Model. Хранит в себе все данные объекта, включая геометрию (если она есть).
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.LayerObject |
Инициализация объекта с заданным id и опциональным набором колонок. Конфигурация описана ниже. |
Опции
Опция | Тип | Описание |
---|---|---|
bbox |
Object |
Bounding Box объекта в формате:
|
geometry |
Object |
Объект геометрии в формате GeoJSON |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
Number |
Возвращает id объекта |
|
Object |
Возвращает объект геометрии в формате GeoJSON |
|
this |
Присваивает геометрию объекту. Принимает объект геометрии в формате GeoJSON |
|
Object |
Возвращает Bounding Box объекта |
|
Object |
Устанавливает Bounding Box объекта. Принимает 2 массива с координатами юго-западной и северо-восточной точки BBox'a
|
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(
|
omjs.View |
Отображает карту в заданном элементе. Можно вместо объекта передать URL к JSON с конфигурацией, в этом случае дополнительно можно передать ещё один объект с приоритетными опциями. В конфигурации нужно также указать опции проекта. Конфигурация описана ниже. |
new omjs.View(
|
omjs.View |
Отображает карту в заданном элементе. Принимает на вход HTML элемент (или CSS селектор элемента), в котором нужно отобразить карту, экземпляр проекта и объект с настройками View. Конфигурация View описана ниже. |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
|
String |
'' |
Шаблон URL, по которому omjs сможет запрашивать тайлы ORBISmap Server. Например: "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 Serveromjs.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 Карта |
lng
|
String |
'ru' |
Язык интерфейса |
translations
|
Object |
{} |
Переопределение предустановленных фраз текущего языка интерфейса. {'Объекты': 'Map objects', 'Адрес': 'Location'} Полный список переводов фраз |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
jQuery Element |
Возвращает контейнер (HTML элемент), в котором отображена карта |
|
ol.Map |
Возвращает экземпляр карты OpenLayers, который используется для отображения карты |
|
omjs.Project |
Возвращает экземпляр проекта, который используется для доступа к данным ORBISmap Server в текущей карте |
|
omjs.View.LayerCollection |
Возвращает коллекцию слоёв omjs.View.Layer карты |
|
WidgetManager |
Возвращает менеджер виджетов карты |
|
this |
Отображает карту, если она скрыта |
|
this |
Скрывает карту |
|
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
|
|
omjs.View.Layer |
Добавляет слой на карту. |
|
omjs.View.Layer |
Создаёт слой omjs.View.Layer на основании переданного слоя OpenLayers и добавляет его на карту. |
|
this |
Удаляет слой с карты |
|
BaseLayer |
Возвращает менеджер подложек. |
|
null |
Переключает базовую подложку. Принимает ID базовой подложки из конфигурации публичной карты. |
|
ol.Overlay |
Отображает балун на карте. Если в момент открытия балуна на карте уже есть открытый балун, то старый балун закрывается, и открывается новый. Возвращает ol.Overlay. |
|
null |
Скрывает балун. |
|
ol.Feature |
Отображает маркер на карте. Возвращает ol.Feature. |
|
omjs.View.MarkerLayer |
Возвращает группу маркеров по имени. Если не передать имя группы, вернёт группу 'default'
|
Balloon Options
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
|
|
'' |
Содержимое балуна |
|
String |
'' |
Дополнительные CSS классы, перечисленные через пробел, которые будут добавлены к контейнеру балуна |
|
Boolean |
true |
Если установлено в true , в момент отображения балуна карта сдвинется так, чтобы балун полностью поместился в область видимости.
|
|
Array |
undefined |
Координата в проекции 'EPSG:4326', в которой нужно отобразить балун. |
|
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
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
|
|
'' |
URL изображения иконки |
|
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
Используется для отображения слоя на карте. Унаследован от omjs.Model.
Может использовать omjs.Project.Layer для работы с данными слоя ORBISmap Server.
Также использует ol.layer.Layer и ol.source.Source для отображения слоя на карте.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
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. |
|
undefined
|
Устанавливает слой OpenLayers |
|
undefined
|
Устанавливает "источник данных" OpenLayers |
LayerCollection
Коллекция визуальных слоёв. Унаследован от omjs.Collection.
TileLayer
Используется для отображения тайлового слоя на карте. Унаследован от omjs.View.Layer.
Может использовать сразу несколько слоёв omjs.Project.Layer для отображения нескольких слоёв одним тайловым слоем.
Также использует ol.layer.Tile и ol.source.Tile для отображения тайлового слоя на карте.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.View.TileLayer |
Создаёт экземпляр визуального тайлового слоя. |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
null
|
Устанавливает набор ORBISmap Server слоёв для тайлового слоя карты. Принимает строку с кодами слоёв, перечисленных через пробел. |
VectorLayer
Используется для отображения векторного слоя на карте. Унаследован от omjs.View.Layer.
Может использовать omjs.Project.Layer для отображения слоя ORBISmap Server на карте.
Также использует ol.layer.Vector и ol.source.Vector для отображения векторного слоя на карте.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.View.VectorLayer |
Создаёт экземпляр визуального векторного слоя. |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
clustering |
Number |
null |
Если указан, точечный слой будет кластеризован и "источник данных" будет изменён на ol.source.Cluster Указывается в виде максимальной дистанции в пикселях между кластерами. |
projectLayers |
omjs.Project.ContainersCollection |
null |
Коллекция слоёв ORBISmap Server. Первый слой этой коллекции будет использован как источник геометрии. |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
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 и не классифицирует данные для отображения картограммы.
Есть возможность классифицировать данные для более тонкой настройки картограммы.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.View.Choropleth |
Создаёт экземпляр слоя - картограммы. Объекты слоя ORBISmap Server должны быть полностью загружены вместе с геометрией. Опции нужны только для отображения картограмм с неклассифицированными данными. |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
minFillColor |
String |
'#ffffff' |
Цвет для минимального значения набора неклассифицированных данных картограммы. |
maxFillColor |
String |
'#000000' |
Цвет для максимального значения набора неклассифицированных данных картограммы. |
totalColors |
Number |
10 |
Количество цветов в градиенте от minFillColor до maxFillColor
|
strokeColor |
String |
'#ffffff' |
Цвет контура объектов. |
strokeWidth |
Number |
1 |
Толщина контура объектов. |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
this
|
Берёт код слоя ORBISmap Server и сразу же генерирует и отображает картограмму с неклассифицированными данными по переданному коду колонки. |
|
this
|
Устанавливает новый набор данных для картограммы. Эти данные нужно сопоставить с данными векторного слоя. Чтобы это сделать, вторым параметром нужно передать функцию сопоставления данных. Функция сопоставления принимает: data - данные, которые мы установили первым параметромobj - объект слоя ORBISmap Server, которые используется картограммойfeature - ol.FeatureФункция должна вернуть значение из data
|
|
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; } }Таким образом, каждый объект векторного слоя картограммы будет причислен к одному из классификаторов, после чего, к этому объекту будут применены стили классификатора. Стили классификаторов применяются сразу же после установки классификаторов. |
|
Array
|
Возвращает список объектов содержимого легенды omjs.Widget.Legend. Работает только для неклассифицированной картограмма. |
MarkerLayer
Используется для отображения группы маркеров на карте. Унаследован от omjs.View.VectorLayer.
Также использует ol.layer.Vector и ol.source.Vector для отображения векторного слоя на карте.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.View.MarkerLayer |
Создаёт экземпляр слоя группы маркеров. |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
|
String |
'default' |
Имя группы маркеров. Маркеры в группе собираются в кластеры. |
clustering |
Number |
null |
Если указан, точечный слой будет кластеризован и "источник данных" будет изменён на ol.source.Cluster Указывается в виде максимальной дистанции в пикселях между кластерами. |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
ol.Feature |
Добавляет маркер в группу маркеров. Возвращает ol.Feature. |
|
Array ol.Feature |
Возвращает массив маркеров. |
|
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()
.
Методы
Метод | Возвращает | Описание |
---|---|---|
|
this
|
Добавляет виджет на карту. Может принимать код предустановленного виджета в виде строки: 'Button' ,
'ButtonGroup' ,
'ZoomControl' ,
'LayerSwitcher' ,
'DistanceButton' ,
'AreaButton'
И объект опций для инициализации соответствующего виджета. Также может принять экземпляр класса виджета omjs.Widget |
|
null
|
Скрывает все виджеты |
|
null
|
Отображает все виджеты |
Widget
Базовый класс виджета. От этого класса наследуются все виджеты omjs.
Содержит в себе необходимую минимальную логику для создания виджета.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.Widget |
Создаёт новый экземпляр виджета. Создаёт HTML Элемент - контейнер, который можно будет использовать для рендера вашего виджета. В объект опций можно передать 'classes' - список css классов, перечисленные через запятую, которые будут добавлены к контейнеру
|
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
classes |
String |
'' |
Список css классов, перечисленные через запятую, которые будут добавлены к контейнеру |
css |
Object |
null |
Объект стилей CSS в формате jQuery, которые будут применены к контейнеру виджета. |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
jQuery HTMLElement
|
Возвращает DOM Элемент - контейнер виджета. |
|
this
|
Отображает виджет |
|
this
|
Скрывает виджет |
|
null
|
Функция - заглушка для дочерних классов. Будет вызвана каждый раз, когда виджет будет добавлен в WidgetManager. В функцию будет передан экземпляр omjs.View. |
Button
Используется для добавления различных кнопок на карту. Унаследован от omjs.Widget.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.Widget.Button |
Создаёт новый экземпляр виджета-кнопки. |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
this
|
Регистрирует обработчик handler DOM события eventType на контейнер виджета. |
ButtonGroup
Используется для визуальной группировки виджетов-кнопок. Унаследован от omjs.Widget.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.Widget.ButtonGroup |
Создаёт новый экземпляр группы кнопок. |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
orientation |
String |
'horizontal' |
Ориентация группы кнопок. Вертикальная 'vertical' или горизонтальная 'horizontal' |
buttons |
omjs.Widget.Button[] |
null |
Массив виджетов-кнопок, которые будут добавлены в группу как только она будет создана. |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
this
|
Добавляет кнопку в группу |
|
this
|
Удаляет кнопку из группы |
DistanceButton
Встроенный виджет, который даёт возможность измерять расстояния на карте. Унаследован от omjs.Widget.Button
Добавляется на карту через WidgetManager
AreaButton
Встроенный виджет, который даёт возможность измерять площадь на карте. Унаследован от omjs.Widget.Button
Добавляется на карту через WidgetManager
Panel
Используется для добавления различных панелей на карту. Унаследован от omjs.Widget.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.Widget.Panel |
Создаёт новый экземпляр виджета панели. |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
content |
String | DOMElement |
'' |
Содержимое панели |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
jQuery HTMLElement
|
Возвращает DOM Элемент - контейнер контента панели. |
Legend
Используется для отображения легенды картограммы. Унаследован от omjs.Widget.Panel.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.Widget.Legend |
Создаёт новый экземпляр легенды. |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
classificators |
Array |
[] |
Объект содержимого легенды в формате:{ 'name': '', // Подпись 'fillColor': '#000000', // Цвет заливки 'strokeWidth': 1, // Толщина контура 'strokeColor': '#000000', //Цвет контура } |
name |
String |
'' |
Заголовок панели легенды |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
this
|
Устанавливает новый набор данных для легенды. |
|
this
|
Устанавливает новый заголовок панели легенды. |
Window
Базовый класс виджета окна с заголовком и нижней панелью. Унаследован от omjs.Widget.
Используется для отображения большого объёма данных.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.Widget.Window |
Создаёт новый экземпляр виджета окна. |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
showHeader |
Boolean |
true |
Будет ли заголовок у окна |
showFooter |
Boolean |
true |
Будет ли нижняя панель у окна |
headerContent |
String | DOMElement |
'' |
Контент заголовка окна |
footerContent |
String | DOMElement |
'' |
Контент нижней панели окна |
content |
String | DOMElement |
'' |
Контент окна |
beforeClose |
Function |
null |
Функция, которая будет вызвана перед закрытием окна.
Если функция вернёт false , окно не будет закрыто.
|
Методы
Метод | Возвращает | Описание |
---|---|---|
setHeader(
|
this
|
Устанавливает контент заголовка окна. |
setFooter(
|
this
|
Устанавливает контент нижней панели окна. |
setContent(
|
this
|
Устанавливает контент окна |
События
Событие | Описание |
---|---|
close |
Срабатывает по закрытию окна |
ZoomControl
Встроенный виджет масштабирования карты с указателем текущего zoom-а. Унаследован от omjs.Widget.ButtonGroup
Добавляется на карту через WidgetManager
LayerSwitcher
Встроенный виджет, который даёт возможность переключать подложки карты. Унаследован от omjs.Widget.Button
Добавляется на карту через WidgetManager
SidePanel
Виджет - панель. Унаследован от omjs.Widget
Используется для добавления панели, которая будет отображена рядом с картой.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.Widget.SidePanel |
Создаёт новый экземпляр виджета-панели. В объекте опций можно передать позицию, которая укажет, где нужно будет отобразить панель. |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
position |
String |
'left' |
Позиция панели. Может быть 'left' , 'top' , 'right' , 'bottom' |
LayersTree
Виджет для отображения слоёв опубликованной карты. Унаследован от omjs.Widget.SidePanel
При добавлении виджета на карту, на карте будут отображены все слои из виджета "Список слоёв".
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
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(
|
this |
Добавляет функцию, которая сработает при определённом событии объекта. Вы можете опционально указать контекст для вашей функции (определить this ).Вы также можете указать несколько типов событий через пробел (например 'click dblclick' )
|
addOneTimeEventListener(
|
this |
То же, что и addEventListener, но функция будет отписана от события сразу же после первого срабатывания. |
addEventListener(
|
this |
Подписывает сразу несколько функций на различные события {click: onClick, mousemove: onMouseMove} |
removeEventListener(
|
this |
Отписывает указанную функцию от события. Если функция не укзана, будут отписаны все функции от указанного события. |
removeEventListener(
|
this |
Отиписывает несколько функций от различных событий. |
removeEventListener() |
this |
Отписывает все функции от всех событий. |
hasEventListeners(
|
Boolean |
Возвращает true , если на указанное событие существуют подписанные функции. |
fireEvent(
|
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
Базовый класс, представляющий модель данных.
Основная идея модели в том, чтобы отделить данные от логики.
Данные хранятся внутри модели, как в базе данных, в то время как методы и свойства класса реализуют бизнес-логику и работу с этими данными.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.Model |
Создаёт новый экземпляр модели. Принимает объект с аттрибутами (любые данные). Опции могут быть использованы дочерними классами. |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
null
|
Устанавливает новое значение в модель, которое будет доступно по заданному ключу. |
|
null
|
Устанавливает набор значений в модель.{attr1:'value1', attr2:'value2',...}
|
|
Any
|
Возвращает значение аттрибута по ключу |
Collection
Базовый класс-коллекция, реализующий групповые методы работы с объектами/моделями.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.Collection |
Создаёт новую коллекцию с заданными объектами |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
Number
|
Возвращает длину коллекции |
|
Array
|
Возвращает элементы коллекции в виде массива |
|
Number
|
Возвращает индекс элемента в коллекции, указанного в параметре object. Если элемент отсутствует в коллекции, метод вернет -1
|
|
Boolean
|
Определяет, есть ли такой элемент (массив элементов) в коллекции |
|
Object
|
Возвращает элемент коллекции с указанным индексом |
|
this
|
Добавляет элемент или массив элементов в коллекцию |
|
this
|
Удаляет элементы из коллекции |
|
Array
|
Метод создает массив из значений переданного аттрибута моделей коллекции |
|
omjs.Collection
|
Метод позволяет отфильтровать элементы коллекции и получить их в виде новой коллекции. Принимает функцию, в которую будет передан объект и индекс. Функция должна вернуть Boolean (попадает объект под фильтр или нет).
|
|
this
|
Метод реализует цикл по коллекции. Функция-итератор будет вызвана для каждого объекта коллекции. |
|
this
|
Очищает коллекцию и записывает в нее элементы objects |
Libraries
jQuery
Библиотека jQuery входит в состав omjs и доступна через переменную omjs.$
OpenLayers
Библиотека OpenLayers входит в состав omjs и доступна через переменную omjs.ol