Слои в OpenLayers

Продолжим работать с OpenLayers и добавим на карту несколько слоев. OpenLayers поддерживает массу популярных (и не очень) форматов. Рассмотрим самые распространенные слои в OpenLayers, которые почти наверняка покроют большинство потребностей.


OpenStreetMap

osm Для начала пройдемся по встроенным слоям и первым из них будет уже знакомый нам из первого поста слой OpenStreetMap. Пожалуй, это самый простой пример:


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

Создаем слой, источником которого выступает ol.source.OSM — в общем, все довольно очевидно.


Bing

bing Не будем обходить вниманием и карты Bing от компании Microsoft — тем более, что для этого слоя также предусмотрен готовый источник. Слой подключается следующим образом:


    var bingLabelledAerials = new ol.layer.Tile({
        source: new ol.source.BingMaps({
            key: 'AkPePzQAUoC7qKlVTNT4nw0Ykq2EJ4nLE9Iq8-7NZY4wI2Owxebqqur_4zMiboZh',
            imagerySet: "AerialWithLabels"
        })
    });

Здесь параметров чуть больше по сравнению с OSM. Первое, что бросается в глаза, это необходимость указать ключ для подключения слоев. При выполнении определенных условий можно получить «базовый ключ» и использовать карты бесплатно. Параметр imagerySet отвечает за тип подключаемого слоя: ‘Road’ — карта в привычном понимании, ‘Aerial’ — космоснимок, ‘AerialWithLabels’ — космоснимок с подписями, ‘collinsBart’ и ‘ordnanceSurvey’ — слои со стилевым выделением.


MapQuest

Американский картографический сервис, один из первых картографических сервисов в интернете. Для его подключения используем следующий скрипт:


    var mapQuestHybrid = new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'sat'})
    });

В конструктор источника (source) передается имя слоя ‘sat’, что означает космический снимок. Еще можно подключить обычную карту (слой osm) и надписи (слой hyb). Сам по себе космоснимок без надписей малоинформативен, поэтому объединим в один слой космоснимок и надписи, для чего воспользуемся возможностью OpenLayers объединять слои в группу:


    var mapQuestHybrid = new ol.layer.Group({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.MapQuest({layer: 'sat'})
            }),
            new ol.layer.Tile({
                source: new ol.source.MapQuest({layer: 'hyb'})
            })
        ]
    });



XYZ

xyz

В этом формате z — это уровень приближения (zoom), а x и y — это положение тайла по горизонтали и вертикали на текущем зуме. По такому принципу устроены многие современные сервисы. В этой статье есть картинки, которые неплохо отражают принцип нумерации тайлов. Пример скрипта для подключения слоя:


    var cycleMap = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
        })
    })
    map.addLayer(cycleMap);

В фигурных скобках задаются шаблоны. Например, {a-c} означает, что тайлы будут запрашиваться с нескольких серверов — a.tile.opencyclemap.org, b.tile.opencyclemap.org и c.tile.opencyclemap.org. А шаблоны {z}, {x} и {y} — это места, в которые OpenLayers вставит соответствующие параметры. Иногда роль тайлового сервера играет скрипт и адрес в этом случае может выглядеть примерно так — http://scriptserver/GetMap.pl?x={x}&y={y}&z={z}. Также с помощью шаблонов можно подключить слои TMS — его отличие от XYZ заключается в том, что нумерация y идет начиная снизу, а не сверху как у XYZ. Для подключения TMS подойдет шаблон /{z}/{x}/{y}


ArcGIS REST

arcgis ArcGIS REST — cервисы компании ESRI. ArcGIS — это не просто продукт, это целая инфраструктура, которая включает в себя как десктопные/мобильные решения, так и серверные. Все это обладает внушительным функционалом и возможностями (а также стоит внушительных денег). Мы подключим слои с публичного сервера ESRI, но техника будет работать с любым другим сервером ArcGIS. Список доступных слоев можно посмотреть в корневом каталоге в разделе Services. Переходим на любой из этих слоев — например, ESRI_Imagery_World_2D — и получаем с строке браузера ссылку, заканчивающуюся на /MapServer — это и будет адрес для подключения слоя. Для того, чтобы подключить слой ESRI_Imagery_World_2D будем исползовать следующий фрагмент кода:


    var arcgisImagery = new ol.layer.Tile({
        source: new ol.source.TileArcGISRest({
            url: 'http://server.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer'
        })
    });



WMS

wms

WMS — Web Map Service (дословно — сервис веб-карт). Сервис богат функциональными возможностями — получение слоя как одной картинкой, так и тайлами; получение информации об объектах слоя; получение легенды слоя и многое другое. Для подключения используем следующий скрипт:


    var wmsLayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: 'http://129.206.228.72/cached/osm',
            params: {'LAYERS': 'osm_auto:all'},
        })
    });


Параметр LAYERS отвечает за то, какой слой необходимо подключить из WMS-источника. Допускается подключать несколько слоев — в этому случае они идут через запятую.


Stamen

stamen

У этой студии из Сан-Франциско довольно необычный подход к дизайну карт. И хотя на практике мне не приходилось использовать карты Stamen, внимания они однозначно заслуживают. Подключаем их следующим образом:


    var stamenWatercolor = new ol.layer.Tile({
        source: new ol.source.Stamen({
            layer: 'watercolor'
        })
    });



Время взглянуть на результат на интерактивной карте:




Ссылки:

Слои в OpenLayers
Метки:    

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

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