Пример: Простое использование сервиса TMS ресурса GoMap.Az для отображения карты

Версия 0.1 от 12 февраля, 2012 г.

Цель

Целью данного примера является освоение создания простой веб-страницы, позволяющей отображать карту сервиса GoMap, а также производить базовые действия с ее отображением - масштабирование и протаскивание.

Реквизиты

Для прохождения данного урока необходимы базовые навыки создания HTML страниц.
Для выполнения данного урока понадобится редактор HTML. В примере используется библиотека OpenLayers, которая представлена на сайте http://openlayers.org (открывается в новом окне).

Простое использование GoMap.Az и Openlayers API

Данный пример позволяет создавать простую карту, основанную на GoMap.Az и Openlayers API. Готовый пример находится здесь (открывается в новом окне).

В секцию <head> необходимо включить JavaScript библиотеки OpenLayers:

            <script src="http://openlayers.org/api/2.10/OpenLayers.js"></script>

Также в секции <head> необходимо создать глобальную переменную var map; которая будет хранить объект карты и функцию Init(), которая будет инициализировать карту.

В функции Init() первым делом создадим карту. При этом следует учесть что для отображения карты будет использован регион <div id="map">, который располагается в секции <body>. Проекция, единицы системы координат (метры) и границы области показа могут быть установлены согласно примеру:

            map = new OpenLayers.Map({
                div: "map",
                projection: new OpenLayers.Projection("EPSG:900913"),
                units: "m",
                restrictedExtent: new OpenLayers.Bounds(4900000, 4600000, 5700000, 5200000)
            });

Устанавливаем проекцию отображения карты:

            map.displayProjection = new OpenLayers.Projection("EPSG:4326");

Создаем слой карты GoMap.Az. Слой карты GoMap.Az работает по подобию слоев OSM (OpenStreetMap). При этом для управления библиотекой OpenLayers передаются три параметра x, y, x, где z представляет собой уровень масштаба. Параметр lng задает язык надписей карты ( az, en, ru ). Параметр f указывает формат фрагментов карты.

            var gomapLayer = new OpenLayers.Layer.OSM("GoMap.Az", "http://gomap.az/info/xyz.do?lng=ru&x=${x}&y=${y}&z=${z}&f=jpg", { 'buffer': 0 });

Добавляем созданный слой к карте map:

        map.addLayers([gomapLayer]);

В итоге указываем центр карты и и уровень масштаба, которые позволят установить режим отображения карты при первом открытии страницы.

       map.setCenter(new OpenLayers.LonLat(5290216, 4905870), 7);

Для того, чтобы функция Init() сработала при первом открытии страницы, указваем ее вызов при загрузке секции <body>:

       <body onload="init()">

Указанный пример позволяет работать с 1 слоем карты. Далее описывается добавление слоя GoogleMaps и работу с 2 слоями.

Добавление слоя GoogleMaps

Готовый пример находится здесь (открывается в новом окне).

В секцию <head> необходимо добавить JavaScript GoogleMaps API:

        <script src="http://maps.google.com/maps/api/js?v=3.3&sensor=false"></script>

В функции Init() кроме слоя карты GoMap.Az добавляется новый слой спутниковой карты Google:

        var googlemapLayer = new OpenLayers.Layer.Google("Google Satellite", { type: google.maps.MapTypeId.SATELLITE })

Команду добавления слоев к карте необходимо изменить с учетом добавления двух новых слоев:

        map.addLayers([gomapLayer, googlemapLayer]);

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

        map.addControl(new OpenLayers.Control.LayerSwitcher());