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/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(
|
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(
|
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 |
Условие включения - ответ 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.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.Project.Container |
Создаёт экземпляр контейнера. Принимает объект с аттрибутами контейнера (метаданные) и экземпляр проекта . |
Опции
Опция | Тип | Описание |
---|---|---|
project req |
omjs.Project |
Экземпляр проекта опубликованной карты ORBISMap. Используется дочерними классами для доступа к данным. |
Свойства
Свойство | Тип | Описание |
---|---|---|
project |
omjs.Project |
Экземпляр проекта опубликованной карты ORBISMap. |
ContainersCollection
Коллекция контейнеров omjs.Project.Container.
Унаследован от Collection.
Методы
Метод | Возвращает | Описание |
---|---|---|
loadObjects(
|
omjs.Collection
|
Загружает объекты всех слоёв в коллекции. Возвращает коллекцию объектов omjs.Project.LayerObject. |
Layer (Data)
Класс, представляющий слой ORBISMap. Унаследован от omjs.Project.Container.
Методы
Метод | Возвращает | Описание |
---|---|---|
loadObjects(
|
omjs.Collection
|
Загружает объекты слоя. Возвращает коллекцию объектов omjs.Project.LayerObject. |
loadObject(
|
omjs.Project.LayerObject
|
Загружает объект слоя. |
Свойства
Свойство | Тип | Описание |
---|---|---|
objects |
omjs.Collection |
Коллекция объектов omjs.Project.LayerObject с момента последней загрузки. |
LayerObject
Класс, представляющий объект слоя ORBISMap.
Унаследован от omjs.Model.
Хранит в себе все данные объекта, включая геометрию (если она есть).
Класс, представляющий объект слоя платформы ORBISMap.
Унаследован от 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 - например,
|
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(
|
omjs.View |
Инициализация представления карты в заданном элементе. Можно вместо объекта передать URL к JSON с конфигурацией, в этом случае дополнительно можно передать ещё один объект с приоритетными опциями. В конфигурации нужно также указать опции проекта |
new omjs.View(
|
omjs.View |
Инициализация представления в заданном элементе. Принимает на вход HTML элемент (или CSS селектор элемента), в котором нужно отобразить карту, экземпляр проекта и объект с настройками View |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
|
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 - опубликованная карта ORBISMapomjs.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'} Полный список переводов фраз |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
jQuery Element |
Возвращает контейнер (HTML элемент), в котором отображена карта |
|
ol.Map |
Возвращает экземпляр карты OpenLayers, который используется для отображения карты |
|
omjs.Project |
Возвращает экземпляр проекта, который используется для доступа к данным ORBISMap в текущей карте |
|
omjs.View.LayerCollection |
Возвращает коллекцию слоёв omjs.View.Layer карты |
|
WidgetManager |
Возвращает менеджер виджетов карты |
|
this |
Отображает карту, если она скрыта |
|
this |
Скрывает карту |
|
Отображает опубликованную карту в соответствии с настройками публикации. Функция beforeVectorAdd будет вызвана перед каждым добавлением векторного слоя для предооставления возможности изменения конфигурации слоя.
|
|
|
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
|
|
omjs.View.Layer |
Добавляет слой на карту. |
|
omjs.View.Layer |
Создаёт слой omjs.View.Layer на основании переданного слоя OpenLayers и добавляет его на карту. |
|
this |
Удаляет слой с карты |
|
BaseLayer |
Возвращает менеджер подложек. |
|
null |
Переключает базовую подложку. Принимает ID базовой подложки из конфигурации публичной карты. |
|
ol.Overlay |
Отображает балун (balloon) на карте. Если в момент открытия балуна на карте уже есть открытый балун, то старый балун закрывается, и открывается новый. Возвращает ol.Overlay. |
|
null |
Скрывает балун. |
|
ol.Feature |
Отображает маркер на карте. Возвращает ol.Feature. |
|
omjs.View.MarkerLayer |
Возвращает группу маркеров по имени. Если не передать имя группы, вернёт группу 'default'
|
Balloon Options: Любые опции, поддерживаемые ol.Overlay
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
|
|
'' |
Содержимое балуна |
|
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' .
|
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 (View)
Используется для отображения слоя на карте. Унаследован от omjs.Model.
Может использовать omjs.Project.Layer для работы с данными слоя ORBISMap.
Также использует ol.layer.Layer и ol.source.Source для отображения слоя на карте.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
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. |
|
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 для тайлового слоя карты. Принимает строку с перечисленными через пробел кодами слоёв. |
VectorLayer
Используется для отображения векторного слоя на карте. Унаследован от omjs.View.Layer.
Может использовать omjs.Project.Layer для отображения слоя ORBISMap на карте.
Также использует ol.layer.Vector и ol.source.Vector для отображения векторного слоя на карте.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.View.VectorLayer |
Создаёт экземпляр визуального векторного слоя. |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
clustering |
Number |
null |
При назначении параметра точечный слой будет кластеризован и "источник данных" будет изменён на ol.source.Cluster Указывается в виде максимальной дистанции в пикселях между кластерами. |
projectLayers |
omjs.Project.ContainersCollection |
null |
Коллекция слоёв ORBISMap. Первый слой этой коллекции будет использован как источник геометрии. |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
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 и не классифицирует данные для отображения картограммы.
Есть возможность классифицировать данные для более тонкой настройки картограммы.
Инициализация
Фабрика/Конструктор | Возвращает | Описание |
---|---|---|
|
omjs.View.Choropleth |
Создаёт экземпляр слоя - картограммы. Объекты слоя ORBISMap должны быть полностью загружены вместе с геометрией. Опции нужны только для отображения картограмм с неклассифицированными данными. |
Опции
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
minFillColor |
String |
'#ffffff' |
Цвет для минимального значения набора неклассифицированных данных картограммы. |
maxFillColor |
String |
'#000000' |
Цвет для максимального значения набора неклассифицированных данных картограммы. |
totalColors |
Number |
10 |
Количество цветов в градиенте от minFillColor до maxFillColor
|
strokeColor |
String |
'#ffffff' |
Цвет контура объектов. |
strokeWidth |
Number |
1 |
Толщина контура объектов. |
Методы
Метод | Возвращает | Описание |
---|---|---|
|
this
|
Берёт код слоя ORBISMap, генерирует и отображает картограмму с неклассифицированными данными по переданному коду колонки. |
|
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 |
Добавляет маркер в группу маркеров. |
|
Array ol.Feature |
Возвращает массив маркеров. |
|
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()
.
Методы
Метод | Возвращает | Описание |
---|---|---|
|
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 входит в состав omjs и доступна через переменную omjs.$
.
Библиотека OpenLayers входит в состав omjs и доступна через переменную omjs.ol
.