Простейшая карта на OpenLayers

Не так давно состоялась конференция, посвященная открытым геоинформационным системам (ГИС). Сейчас материалы конференции доступны в сети — советую заглянуть, можно почерпнуть много интересного. И так как тема весьма актуальная (а также чтобы добавить материала на русском языке, которого частенько не хватает), я решил запустить направление по гисам и сделать карту на OpenLayers.

Для работы с картами на стороне браузера я выбрал библиотеку OpenLayers. Да, у Google и Яндекс есть мощные API для работы с картами, плюс к клиентской библиотеке прилагается сервис «из коробки» (например, определение адреса по координатам, прокладка маршрутов и прочее), но есть и обратная сторона медали — лицензионное соглашение, которое накладывает некоторые ограничения. А так как использовать карты порой необходимо в закрытых системах, смотреть приходится в сторону открытых библиотек.

Еще одной популярной открытой библиотекой для работы с картами является Leaflet. Он более легковесный по сравнению с OpenLayers и обладает набором наиболее распространенных функций, которые покрывают потребности большинства пользователей. А если вам нужно больше — наверняка вы найдете недостающий функционал в одном из многочисленных плагинов. Почему же мой выбор пал на OpenLayers?.. Просто недавно вышла новая версия (фактически библиотека полностью переписана по сравнению с линейкой 2.x) и интересно посмотреть, чем нас будут радовать разработчики в OpenLayers 3.

Перейдем непосредственно к карте. Для начала скачаем OpenLayers. Из скачанного архива нам понадобится стиль ol.css и сама библиотека ol.js. Подключаем их на страницу:


<link rel="stylesheet" href="ol.css" type="text/css" />
<script src="ol.js"></script>

Теперь располагаем на странице контейнер, где будет отображаться карта:


<div id="map" style="width: 100%; height: 400px;"></div>

Пока все просто и понятно (хотя и дальше будет ненамного сложнее). Теперь перейдем к инициализации карты:


    var map = new ol.Map({
      target: 'map'
    });

В параметрах указываем, в какой DOM-элемент будет помещена карта — это ранее созданный нами элемент div с id равным map. Теперь на пустую карту добавим слой OpenStreetMap:


    var osmLayer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    map.addLayer(osmLayer);

OpenLayers поддерживает множество форматов, в дальнейшем познакомимся с ними поближе. Пока достаточно знать, что мы подключили тайловый слой, источником которого служит предопределенный OpenStreetMap. Для самых любознательных есть документация.

Следующий шаг — установить вид карты, то есть задать область просмотра:


    var view = new ol.View({
      center: [ 4188426.7147939987, 7508764.236877314 ],
      zoom: 12
    });
    map.setView(view);

center — это, конечно же, центр карты (подобраны координаты Москвы), а zoom — это уровень приближения. Чем больше его значение, тем больше мы приближаемся и тем детальней становится карта. После установки центра мы увидим карту в желанном виде:



Что ж, начало положено. Дальше примеры и техники будут становиться все сложнее, а пока не будем выходить за рамки «примитивной карты». Рабочий пример выложен на GitHub

Ссылки:

Простейшая карта на OpenLayers
Метки:    

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *