:Author: Chris Schmidt
:Version: osgeo-live4.0
:License: Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
********************************************************************************
Начало работы с OpenLayers
********************************************************************************
Примеры работы с OpenLayers
--------------------------------------------------------------------------------
Пожалуй, самым быстрым способом разобраться с тем, как работает OpenLayers,
является изучение примеров, расположенных здесь: `http://localhost/openlayers/examples
<../../openlayers/examples>`_.
Создание карты
--------------------------------------------------------------------------------
API OpenLayers включает в себя два ключевых понятия: 'Map' (карта), и 'Layer'
(слой). На уровне объекта Map хранится информация о проекции, охвате, единицах
измерения и прочих свойствах карты. Внутри этого объекта располагаются слои карты —
объекты Layer. Слой представляет собой описание источника данных и способа его
отображения.
Разметка HTML
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Разработка клиентского приложения на базе OpenLayers требует в первую очередь
создания HTML-страницы, в которую будет встроена карта. OpenLayers поддерживает
вставку карт в блочные элементы любого уровня.
Кроме того, необходимым условием использованя OpenLayers является подключение
самой библиотеки посредством указания её адреса внутри тега *script*.
.. code-block:: html
OpenLayers Example
**Пример 1**: Создание HTML-страницы
Создание простейшей карты
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Прежде всего, необходимо создать объект Map, используя соответствующий
конструктор, который имеет один обязательный аргумент — HTML элемент, или
идентификатор элемента, внутрь которого будет встроена карта.
.. code-block:: javascript
var map = new OpenLayers.Map('map');
**Пример 2:** Конструктор Map
Следующим шагом на пути создания карты является подключение информационных
слоёв. OpenLayers обеспечивает поддержку огромного числа различных
источников данных, в том числе WMS, Bing Maps и WorldWind. В данном примере
мы рассмотрим подключение WMS-слоя, созданного компанией MetaCarta.
.. code-block:: javascript
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*, которая автоматически рассчитает
необходимый масштабный уровень.
Собираем всё вместе
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Следующий фрагмент кода объединяет все части, рассмотренные выше.
.. code-block:: html
OpenLayers Example
**Пример 4:** HTML и Javascript-код для отображения WMS слоя
Добавление оверлейных WMS слоёв
--------------------------------------------------------------------------------
WMS-слои, находящиеся в одинаковых проекциях, могут быть наложены друг на друга.
Существует несколько способов отметить слой как оверлейный — например,
установить свойство *'transparent'* в значение *'true'*.
Следующий пример демонстрирует подключение оверлейного
WMS-слоя политических границ с включённой прозрачностью.
.. code-block:: javascript
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*.
.. code-block:: html
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.