Общая информация
Пользователи могут размещать карты и отдельные слои пространственных данных Енисей-ГИС на своих веб-страницах. Для этого нужно использовать программные интерфейсы (API) Енисей-ГИС.
С технической точки зрения API Енисей-ГИС – это набор JavaScript-компонентов для создания интерактивных карт.
Подробности представлены в нижеследующих разделах:
- Подключение библиотеки
- Добавление карты
- Создание карты на странице
- Добавление элементов управления
- Загрузка настроек ресурса
- Установка начальной позиции карты
- Готовность API карты
- Всплывающие подсказки
- Добавление всплывающего окна на карту
- Удаление всплывающего окна из карты
- Маркеры на карте
- Добавление маркера на карту
- Удаление маркера с карты
- Удаление всех маркеров с карты
- Элементы управления
- Добавление легенды
- События
- Добавление обработчиков событий для клика по карте
- Операции
- Переход к точке
- Переход к области
- Переход к точке с проективным преобразованием координат
- Обновление размеров объекта с картой
- Получение размеров окна карты
Подключение библиотеки
Для подключения библиотеки добавьте следующую строку на Вашу страницу:
<script type="text/javascript" src="http://24bpd.ru/maps/api/map.2.1.js"></script>
Добавление карты
Создание карты на странице
Чтобы добавить карту на страницу, нужно добавить div-контейнер карты на страницу и использовать метод egisMap.Map после полной загрузки страницы:
map = new egisMap.Map(<карта>, <настройки карты>, <настройки ресурса>, <начальные настройки видимости карты>);
Например:
<div id="map" style="width: 100%; height: 100%;"></div>
<script type="text/javascript">
var map = null;
window.onload = function() {
map = new egisMap.Map('map', {}, { id: 'code' }, {});
}
</script>
В качестве первого параметра необходимо указать div-контейнер с картой или его название на Вашей странице. Два следующих параметра обязательны (могут быть пустыми) и задают дополнительные настройки внешнего вида карты и настройки ресурса геопортала. Последний параметр задает стартовую позицию и масштаб карты.
Размеры элемента страницы с картой задаются через стили, например:
#map {
width: 100%;
height: 100%;
border: solid 1px #000;
}
Добавление элементов управления
Для добавления элементов управления и навигации на страницу необходимо определить их в настройках карты, например:
var mapOptions = {
mousePosition: true,
scaleLine: false,
zoomBar: false,
query: true,
measure: false
};
map = new egisMap.Map('map', mapOptions, mapConfig, {});
Доступны следующие настройки карты:
- mousePosition: позиция указателя, отображает текущее положение курсора на карте;
- scaleLine: масштабная линейка, позволяет оценивать расстояние между объектами, не прибегая к вычислениям;
- scale: текущий масштаб карты;
- zoomBar: масштабирование (кнопки + и -);
- query: включает и выключает вывод информации при клике на карте (для добавлении кнопки запрос по области нужно включать эту настройку);
- measure: включает и выключает возможность измерения расстояния на карте с помощью мыши;
- measureBox: включает и выключает возможность измерения области на карте с помощью мыши;
- message: включает и выключает вывод информационных сообщений на карте;
- tileselect: включает и выключает меню выбора тайловой подложки.
Загрузка настроек ресурса
Формат ресурса геопортала на странице задается в виде объекта:
var mapConfig = {
id: <id>,
sid: <sid>,
key: <key>
};
map = new egisMap.Map('map', mapOptions, mapConfig, initView);
Доступны следующие настройки:
- id - идентификатор ресурса (string);
- sid - идентификатор сессии (string);
- key - ключ ресурса (используется вместо sid) (string).
Например:
<div id="map" style="width: 100%; height: 100%;"></div>
<script type="text/javascript">
var map = null;
window.onload = function() {
map = new egisMap.Map('map', {}, { id: 'code', sid: 'session' }, {});
}
</script>
Установка начальной позиции карты
Формат начального масштаба отображения и позиции карты задается в виде объекта:
var initView = {
x: <pos X>,
y: <pos Y>,
zoom: <zoom>,
tile: <tile>
};
map = new egisMap.Map('map', mapOptions, mapConfig, initView);
Доступны следующие настройки:
- x - позиция по оси X (float);
- y - позиция по оси Y (float);
- zoom - масштаб (integer);
- tile - тайловая подложка (string).
Координаты задаются в проекции тайловой подложки. Если тайловая подложка не указана, то в проекции ресурса геопортала.
Доступные тайловые подложки:
- "" - без подложки (по умолчанию),
- bpd_light - Енисей-ГИС (светлая) (код проекции EPSG 28416),
- bpd_dark - Енисей-ГИС (яркая) (код проекции EPSG 28416),
- osm - OpenStreetMap (код проекции EPSG 3857),
- bpd1 - NaturalEarth (код проекции EPSG 28416),
- bpd2 - TrueMarble (код проекции EPSG 28416),
- bpd3 - Hypsometric (код проекции EPSG 28416),
- bpd4 - Landsat (код проекции EPSG 28416),
- bpd5 - Цифровая модель рельефа (код проекции EPSG 28416).
Пример:
var initView = {
x: 16495486,
y: 6209437,
zoom: 10
};
map = new egisMap.Map('map', mapOptions, mapConfig, initView);
Готовность API карты
Т.к. загрузка настроек карты выполняется после загрузки страницы, необходимо использовать функцию ready для работы с картой и инициализацией новых объектов на карте.
Функция ready исполняет включенный в нее код после того, как будет загружены все настройки заданной карты.
Ниже представлен пример вызова функции ready:
map = new egisMap.Map('map', mapOptions, mapConfig, initView);
map.ready( function() {
alert('Карта загружена!');
});
Всплывающие подсказки
Добавление всплывающего окна на карту
<map object>.addPopup(<pos x>, <pos y>, <text>);
Параметры:
- map object - карта (object);
- pos x - координата X (float);
- pos y - координата Y (float);
- text - текст сообщения (string).
Пример:
map.addPopup(16495486, 6209437, '<b>Сообщение</b>');
Удаление всплывающего окна из карты
<map object>.removePopup();
Параметры:
- map object - карта (object).
Пример:
map.removePopup();
Маркеры на карте
Добавление маркера на карту
<marker object> = <map object>.addMarker(<pos x>, <pos y>, <options>);
Параметры:
- marker object - объект с маркером (object);
- map object - карта (object);
- pos x - координата X объекта в проеции карты (float);
- pos y - координата Y объекта в проеции карты (float);
- options - настройки маркера.
Доступные настройки маркера:
- img - url изображения маркера;
- anchor - центр изображения маркера, по умолчанию [0.5, 0.5];
- offset - сдвиг изображения маркера относительно его центра в пикселях, по умолчанию [0, 0].
Пример:
var marker = map.addMarker(16495486, 6209437, {
img: 'images/icon.png',
anchor: [0.5, 1]
});
Удаление маркера с карты
<map object>.removeMarker(<marker object>);
Параметры:
- map object - карта (object);
- marker object - объект с маркером (object).
Пример:
map.removeMarker(marker);
Удаление всех маркеров с карты
<map object>.clearMarkers();
Параметры:
- map object - карта (object).
Пример:
map.clearMarkers();
Элементы управления
Добавление легенды
<map object>.initLegend(<html element>, <parameters>, <message object>);
Параметры:
- map object - карта (object);
- html element - элемент страницы для легенды (HTMLElement Object);
- parameters - дополнительные параметры (object);
- message object - объект для вывода сообщений (object).
Пример:
map.initLegend("legend", { top: "4px", left: "4px", groupclass: true }, map.getMessageObject());
События
Добавление обработчиков событий для клика по карте
<map object>.setQueryAction(<function select>);
Параметры:
- map object - карта (object);
- function select - обработчик события при клике на карте (function({query, position})).
В качестве параметра для обработчиков событий передается объект со следующими свойствами:
- query - результат запроса в виде массива формата [attributes (набор полей), data (набор данных)];
- position - координаты объекта [x,y].
Пример:
map.setQueryAction(function(obj) {
var text = '<b>Информация</b><br>'+obj.query[0].data[0][0];
map.addPopup(obj.position[0], obj.position[1], text);
});
Операции
Переход к точке
<map object>.mapTo(<pos x>, <pos y>, <zoom>);
Параметры:
- map object - карта (object);
- pos x - координата X (float);
- pos y - координата Y (float);
- zoom - масштабный уровень, необязательный параметр (integer).
Пример:
map.mapTo(16495486, 6209437, 10);
Переход к области
<map object>.mapToBox(<left>, <bottom>, <right>, <top>);
Параметры:
- map object - карта (object);
- left - координата левого края (float);
- bottom - координата нижнего края (float);
- right - координата правого края (float);
- top - координата верхнего края (float).
Пример:
map.mapToBox(16496255, 6206643, 16500100, 6210008);
Переход к точке с проективным преобразованием координат
<map object>.mapToPoint(<pos x>, <pos y>, <projection in>, <projection out>, <zoom>);
Параметры:
- map object - карта (object);
- pos x - координата X (float);
- pos y - координата Y (float);
- projection in - epsg код исходной проекции (integer);
- projection out - epsg код проекции карты (integer);
- zoom - масштабный уровень, необязательный параметр (integer).
Пример:
map.mapToPoint(92, 56, 4326, 28416, 10);
Обновление размеров объекта с картой
<map object>.updateSize();
Параметры:
- map object - карта (object).
Метод применяется после каких-либо изменений размера контейнера с картой.
Пример:
map.updateSize();
Получение размеров окна карты
<size> = <map object>.getViewSize();
Параметры:
- size - размеры окна (array [width, height]);
- map object - карта (object).
Пример:
var size = map.getViewSize();