Начало работы с OpenLayers

Примеры работы с OpenLayers

Пожалуй, самым быстрым способом разобраться с тем, как работает OpenLayers, является изучение примеров, расположенных здесь: http://localhost/openlayers/examples.

Создание карты

API OpenLayers включает в себя два ключевых понятия: ‘Map’ (карта), и ‘Layer’ (слой). На уровне объекта Map хранится информация о проекции, охвате, единицах измерения и прочих свойствах карты. Внутри этого объекта располагаются слои карты — объекты Layer. Слой представляет собой описание источника данных и способа его отображения.

Разметка HTML

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

Кроме того, необходимым условием использованя OpenLayers является подключение самой библиотеки посредством указания её адреса внутри тега script.

<html>
<head>
  <title>OpenLayers Example</title>
    <script src="http://localhost/openlayers/OpenLayers.js"></script>
    </head>
    <body>
      <div style="width:100%; height:100%" id="map"></div>
    </body>
</html>

Пример 1: Создание HTML-страницы

Создание простейшей карты

Прежде всего, необходимо создать объект Map, используя соответствующий конструктор, который имеет один обязательный аргумент — HTML элемент, или идентификатор элемента, внутрь которого будет встроена карта.

var map = new OpenLayers.Map('map');

Пример 2: Конструктор Map

Следующим шагом на пути создания карты является подключение информационных слоёв. OpenLayers обеспечивает поддержку огромного числа различных источников данных, в том числе WMS, Bing Maps и WorldWind. В данном примере мы рассмотрим подключение WMS-слоя, созданного компанией MetaCarta.

var wms = new OpenLayers.Layer.WMS(
  "WMS",
  "http://localhost/cgi-bin/qgis_mapserv.fcgi",
  {
  'map': '/usr/local/share/qgis/QGIS-NaturalEarth-Example.qgs',
  'layers':'HYP_50M_SR_W,10m_lakes,10m_rivers_lake_centerline'} );
map.addLayer(wms);

Пример 3: Конструктор Layer

Первый аргумент, используемый в конструкторе — это имя слоя, которое будет отображаться в списке слоёв, второй — URL WMS-сервера, и, наконец, третий аргумент — объект, содержащий дополнительные параметры, которые будут включены в WMS-запрос.

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

Собираем всё вместе

Следующий фрагмент кода объединяет все части, рассмотренные выше.

<html>
<head>
  <title>OpenLayers Example</title>
    <script src="http://localhost/openlayers/OpenLayers.js"></script>
    </head>
    <body>
      <div style="width:100%; height:100%" id="map"></div>
      <script defer="defer" type="text/javascript">
        var map = new OpenLayers.Map('map');
        var wms = new OpenLayers.Layer.WMS(
          "WMS",
          "http://localhost/cgi-bin/qgis_mapserv.fcgi",
          {
          'map': '/usr/local/share/qgis/QGIS-NaturalEarth-Example.qgs',
          'layers':'HYP_50M_SR_W,10m_lakes,10m_rivers_lake_centerline'}
          );
        map.addLayer(wms);
        map.zoomToMaxExtent();
      </script>

</body>
</html>

Пример 4: HTML и Javascript-код для отображения WMS слоя

Добавление оверлейных WMS слоёв

WMS-слои, находящиеся в одинаковых проекциях, могут быть наложены друг на друга. Существует несколько способов отметить слой как оверлейный — например, установить свойство ‘transparent’ в значение ‘true’. Следующий пример демонстрирует подключение оверлейного WMS-слоя политических границ с включённой прозрачностью.

var twms = new OpenLayers.Layer.WMS( "World Map",
    "http://world.freemap.in/cgi-bin/mapserv?",
    { map: '/www/freemap.in/world/map/factbooktrans.map',
      transparent: 'true', layers: 'factbook'}
    );
map.addLayer(twms);

Пример 5: Добавление оверлейного WMS-слоя с включённой прозрачностью

При установке свойства transparent в значение ‘true’ автоматически изменяются значения следующих двух параметров:

  • format — формат WMS слоя — устанавливается в значение image/png в случае, если браузер поддерживает прозрачные PNG изображения (все браузеры за исключением Internet Explorer 6). В Internet Explorer 6 используется значение image/gif.
  • isBaseLayer — параметр, определяющий является ли слой базовым или оверлейным. В конкретный момент времени может быть включен только один базовый слой и произвольное количество оверлейных. По умолчанию свойство isBaseLayer WMS слоя установлено в значение true (базовый), но при включении прозрачности автоматически меняется на false (оверлейный).

Добавление векторных объектов на карту

Для добавления отдельных векторных объектов по указанным значениям долготы и широты можно воспользоваться объектом Layer.Vector.

var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
var feature = new OpenLayers.Feature.Vector(
 new OpenLayers.Geometry.Point(-71, 42),
 {some:'data'},
 {externalGraphic: 'img/marker.png', graphicHeight: 21, graphicWidth:
 16});
vectorLayer.addFeatures(feature);
map.addLayer(vectorLayer);

В этом документе описан простейший пример.

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

Copyright & Disclaimer