Начало работы с JavaScript API
GeoMixer — Web-GIS платформа, имеющая многочисленные программные и графические интерфейсы для импорта и экспорта данных. В данном документе кратко освещается JavaScript API GeoMixer’а для визуализации геоданных на сторонних сайтах в интернете (в дальнейшем GeoMixer.js).
Основную задачу рассматриваемого API можно сформулировать так: отображать геоданные с сервера GeoMixer на любой карте, сделанной на основе библиотеки Leaflet.js.
Leaflet.js
Leaflet — наиболее популярная open source библиотека для создания интерактивных карт в браузере. Чтобы использовать GeoMixer.js, нужно иметь базовое представление о работе с этой библиотекой.
Создание простейшей карты Leaflet выглядит следующим образом:
//создадим карту и зададим ей позицию
var map = L.map('map').setView([51.505,-0.09],13);
//добавим на карту растровый слой из тайлов
//в данном случае это будет стандартная карта OpenStreetMap
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution:'© OpenStreetMap contributors'
}).addTo(map);
Кроме собственно отображения карты, библиотека позволяет подгружать растровые данные из различных источников, отображать поверх них векторные объекты, показывать всплывающие подсказки и обеспечивает возможность пользователю интерактивно взаимодействовать со всеми этими объектами.
На сайте библиотеки есть несколько примеров работы с библиотекой, подробное API и огромный список плагинов.
GeoMixer.js — общие понятия
GeoMixer.js с технической точки зрения является плагином к Leaflet. Это позволяет подключить его к уже существующим картографическим проектам без необходимости вносить в них какие-либо существенные изменения.
Ключевым понятием в GeoMixer.js является слой — основная единица хранения данных на сервере GeoMixer. У слоя обязательно есть идентификатор (его можно посмотреть через редактор GeoMixer-а в свойствах слоя) и некоторые дополнительные параметры, такие как название, тип, метаданные и т.п. В GeoMixer-е различаются растровые слои, векторные слои и каталоги растров.
Слои объединяются в “карты”. Карта GeoMixer-а — набор слоёв для одного проекта. Один слой может быть добавлен в несколько карт и иметь в них различные стили.
Загрузка слоя в GeoMixer.js
Загрузка слоя в GeoMixer.js несколько отличается от создания слоя в Leaflet.js. Дело в том, что информация о слое загружается с сервера, что является асинхронной операцией. Поэтому для создания слоёв GeoMixer-а используются фабричные функции вместо классического оператора new.
Вот пример:
L.gmx.loadLayer(
'H2DUP', '033B16D566194EBE9F3CC247F6DDA4A4'
).then(function(landsatLayer) {
//Выполнится после загрузки слоя с сервера
//landsatLayer реализует интерфейс ILayer
map.addLayer(landsatLayer);
});
Фабричная ф-ция L.gmx.loadLayer() принимает два аргумента:
- mapID — идентификатор карты
- layerID — идентификатор слоя на этой карте
Возвращает она Promise — популярный в среде JavaScript способ работать с результатами асинхронных операций. Promise имеет ф-цию then, которая принимает два callback’а: первый будет вызван в случае успешного завершения операции (в нашем случае — загрузки слоя), второй — в случае ошибки.
Результатом работы ф-ции L.gmx.loadLayer() является экземпляр слоя (растровый, векторный или каталог растров). Все слои GeoMixer.js реализуют стандартный интерфейс Leaflet’а ILayer, что позволяет работать с ними как с обычными слоями библиотеки. Например,
map.addLayer(satelliteLayer); ... map.removeLayer(satelliteLayer);
Дополнительно слои GeoMixer-а имеют большой набор собственных методов и событий, которые позволяют динамически менять стиль отображения, фильтровать данные, показывать всплывающие подсказки и т.п.
Загрузка карты в GeoMixer.js
Можно загружать не отдельные слои с данными, а всю карту целиком. Для этого можно использовать функцию L.gmx.loadMap():
L.gmx.loadMap('H2DUP').then(function(gmxMap){
//gmxMap - объект с информацией о слоях на карте Geomixer
//gmxMap.layers - слои в виде массива
//gmxMap.layersByID - слои по ID
//gmxMap.layersByTitle - слои по названию
});
В результате загрузки карты будет сформирован экземпляр класса L.gmx.Map, который позволяет получить слои по их ID (хеш layersByID), по названию (layersByTitle) или в виде массива (layers).