API для сторонних систем

Общая информация

Пользователи могут размещать карты и отдельные слои пространственных данных Енисей-ГИС на своих веб-страницах. Для этого нужно использовать программные интерфейсы (API) Енисей-ГИС.

С технической точки зрения API Енисей-ГИС – это набор JavaScript-компонентов для создания интерактивных карт.

Подробности представлены в нижеследующих разделах:

 

Подключение библиотеки

Для подключения библиотеки добавьте следующую строку на Вашу страницу:

<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();