GIS-LAB

Географические информационные системы и дистанционное зондирование

OpenLayers: начало работы

OpenLayers - JavaScript библиотека с открытым исходным кодом, предназначенная для создания карт на основе программного интерфейса (API), подобного GoogleMap API или MSN Virtual Earth API.

Обсудить в форуме Комментариев — 88

Введение

Библиотека OpenLayers позволяет очень быстро и легко создать web-интерфейс для отображения картографических материалов, представленных в различных форматах и расположенных на различных серверах. Благодаря OpenLayers разработчик имеет возможность создать, к примеру, собственную карту, включающую слои, предоставляемые WMS (и WFS) серверами, такими как Mapserver, ArcIMS или Geoserver, и данными картографических сервисов Google. Библиотека является разработкой с открытым исходным кодом и разрабатывается при спонсорской поддержке проекта MetaCarta, который использует OpenLayers в своих разработках. Тем не менее, OpenLayers является независимым свободнораспространяемым продуктом. Данная статья представляет собой перевод различной документации, доступной на сайте OpenLayers.

Помимо собственно визуализации WMS и WFS слоев на единой web-карте, а также редактирования предоставляемых данных (только для WFS-T серверов) OpenLayers обладает следующими возможностями:

  • Добавления на карту панели навигации (включена по умолчанию). На панели находятся кнопки сдвига карты (север-юг, запад-восток), увеличения и уменьшения масштаба;
  • Сдвига карты при помощи мыши;
  • Изменения масштаба карты при прокрутке среднего колеса мыши;
  • Получения координат точки, над которой находятся указатель мыши;
  • Добавления панели управления видимостью/невидимостью слоев карты;
  • Выбора произвольного объекта и получения атрибутивной информации о нем;
  • Управления прозрачностью используемых слоев карты;
  • Добавления к карте определяемых пользователем элементов (точек, линий, полигонов);
  • Множество других возможностей OpenLayers, которые, вместе с примерами их использования и документаций доступны на официальном сайте.

Оглавление

  1. Установка OpenLayers
  2. Создание простейшей карты
  3. Дополнительные примеры

1. Установка OpenLayers

Так как OpenLayers является набором скриптов, написанных на JavaScript, эта библиотека не требует установки в привычном смысле слова. Поэтому для того, чтобы начать работать с OpenLayers, достаточно скачать библиотеку и распаковать ее в свой домашний каталог. Хотя с библиотекой поставляется множество дополнительных материалов (документация, примеры и т.п.), для начала работы понадобится далеко не все. Для нормальной работы достаточно скопировать в каталог, в котором хранится ваш проект, файл build/OpenLayers.js и каталоги theme и img, на этом установка завершена.

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

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

Заготовка для карты

Сначала нужно подготовить исходный файл, в который будет встроен объект OpenLayers, отвечающий за отображение карт (OpenLayers поддерживает встраивание карт в любой блочный элемент html-кода). Кроме этого, в текст странички нужно вставить тег со ссылкой на скрипт из библиотеки OpenLayers:

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

Создание объекта, отображающего карту

Понятно, что предыдущего примера еще не достаточно, чтобы отобразить карту на страничке. Нужно создать еще объект, который будет отвечать за отображение карты:

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

В конструкторе объекта map используется один аргумент - название элемента html, связанного с картой, или ID этого элемента.

Следующим шагом будет добавление слоев к объекту map. OpenLayers поддерживает множество различных форматов, в этом примере мы рассмотрим слой WMS предоставляемый ресурсом MetaCarta:

var wms = new OpenLayers.Layer.WMS(
  "http://labs.metacarta.com/wms/vmap0",
  {'layers':'basic'} );
map.addLayer(wms);

Здесь первый параметр в конструкторе - адрес WMS сервера. Второй аргумент - объект, хранящий параметры для добавления их к строке WMS-запроса.

Наконец, для того, чтобы вывести карту, нужно указать ее центр и масштаб (zoom). В нашем примере мы разместим карту на всей площади окна (точнее,элемента "map"), для этого воспользуемся функцией zoomToMaxExtent. В итоге должен получиться следующий файл:

<html>
<head>
  <title>OpenLayers Example</title>
    <script
    src="http://openlayers.org/api/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( "OpenLayers WMS",
            "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
        map.addLayer(wms);
        map.zoomToMaxExtent();
      </script>
</body>
</html>

А вот что из этого получилось.

Добавление еще одного слоя

К только что созданной карте можно добавить еще один слой, который будет отображаться совместно с первым (посмотреть можно здесь):

<html>
<head>
  <title>OpenLayers Example</title>
    <script
    src="http://openlayers.org/api/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( "OpenLayers WMS",
            "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
	var twms = new OpenLayers.Layer.WMS( "GIS-Lab Test WMS",
        "http://gis-lab.info/cgi-bin/wmsworld?",
        { transparent: 'true', layers: 'world',
        format: 'png'} );
	map.addLayers([twms,wms]);
    map.zoomToMaxExtent();
      </script>
</body><script type="text/javascript">
        var lon = 35;
        var lat = 59;
        var zoom = 0;
        var map, layer;

        function init(){
            OpenLayers.DOTS_PER_INCH = 72;
            var options = {

// Несколько возможностей указать разрешение: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.00137329101],
//                          scales: [50000000, 10000000],
//                          maxResolution: 0.17578125,
//                          minResolution: 0.0439453125,
//                          maxScale: 10000000,
//                          minScale: 50000000,
//                          numZoomLevels: 5,
//		        units: "dd",
                            minResolution: "auto",
                            minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
                            maxResolution: "auto",
                            maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
                            controls: [new OpenLayers.Control.MouseDefaults()]
                          };

            map = new OpenLayers.Map( 'map' , options);
            map.addControl(new OpenLayers.Control.PanZoomBar());
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'});
            map.addLayer(layer);
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
        }
</script>
</html>
<script type="text/javascript">
        var lat = 900863;
        var lon = 235829;
        var zoom = 6;
        var map, layer;

        function init(){
            map = new OpenLayers.Map( 'map' );
            var basemap = new OpenLayers.Layer.WMS( "Boston",
                "http://boston.freemap.in/cgi-bin/mapserv?",
                {
                 map: '/www/freemap.in/boston/map/gmaps.map',
                 layers: 'border,water,roads,rapid_transit,buildings',
                 format: 'png',
                 transparent: 'off'
                },
		//Очень важные моменты при создании карты не в проекции epsg-4326:
		//обязательно нужно указать Maxextent (прямоугольник, ограничивающий карту),
		//maxResolution  и, собственно, код самой проекции
                {
                  maxExtent: new OpenLayers.Bounds(33861, 717605, 330846, 1019656),
                  maxResolution: 296985/1024, // Можно также указать "auto" - автоматически
                                              // растянуть карту
                  projection:"EPSG:2805",     // Код будет использоваться в запросах к WMS/WFS серверу.
                  units: "m"                  // Нужно для работаты с масштабами.
                  } );

            map.addLayer(basemap);
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
        }
    </script>

3. Дополнительные примеры

Предыдущих примеров достаточно, чтобы отобразить на собственной карте слои, поставляемые различными WMS серверами. Ниже будут рассмотрены еще несколько скриптов, использующих OpenLayers, все эти примеры идут вместе с пакетом OpenLayers.

Настройка масштаба и центра карты

Можно заранее указать несколько уровней масштаба (разрешение карты), которые впоследствии будут использоваться на панели навигации. Также можно задать максимальный и минимальный допустимый масштаб и число уровней масштабов между ними. Однако есть одна особенность, о которой нужно помнить - умолчанию единицы измерения на карте - дюймы. Ниже приводится пример скрипта:

<script type="text/javascript">
	var lon = 35;
	var lat = 59;
	var zoom = 0;
	var map, layer;

	function init(){
		OpenLayers.DOTS_PER_INCH = 72;
		var options = {

		// Несколько возможностей указать разрешение: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,
		//0.010986328125,0.0054931640625,0.00274658203125,0.00137329101],
		//scales: [50000000, 10000000],
		//maxResolution: 0.17578125,
		//minResolution: 0.0439453125,
		//maxScale: 10000000,
		//minScale: 50000000,
		//numZoomLevels: 5,
		//units: "dd",
		minResolution: "auto",
		minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
		maxResolution: "auto",
		maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
		controls: [new OpenLayers.Control.MouseDefaults()]
        };

		map = new OpenLayers.Map( 'map' , options);
		map.addControl(new OpenLayers.Control.PanZoomBar());
		layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
			"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'});
		map.addLayer(layer);
		map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
	}
</script>

Проекции

При создании карты подразумевается, что все данные хранятся (приходят) в формате широта/долгота (epsg-код: 4326). Однако можно прямо указать, что следует работать в другой проекции:

<script type="text/javascript">
	var lat = 900863; 
	var lon = 235829;
	var zoom = 6;
	var map, layer;

	function init(){
		map = new OpenLayers.Map( 'map' );
		var basemap = new OpenLayers.Layer.WMS( "Boston", 
			"http://boston.freemap.in/cgi-bin/mapserv?",
			{
				map: '/www/freemap.in/boston/map/gmaps.map', 
				layers: 'border,water,roads,rapid_transit,buildings', 
				format: 'png', 
				transparent: 'off'
			},
		//Очень важные моменты при создании карты не в проекции epsg-4326:
		//обязательно нужно указать Maxextent (прямоугольник, ограничивающий карту),
		//maxResolution  и, собственно, код самой проекции
		{
			maxExtent: new OpenLayers.Bounds(33861, 717605, 330846, 1019656), 
			maxResolution: 296985/1024, // Можно также указать "auto" - автоматически растянуть карту
			projection:"EPSG:2805",     // Код будет использоваться в запросах к WMS/WFS серверу.
			units: "m"                  // Нужно для работаты с масштабами.
		} );                
			map.addLayer(basemap);
			map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
			map.addControl(new OpenLayers.Control.LayerSwitcher());
        }
</script>

Дополнительные элементы управления

Примеры использования дополнительных элементов управления можно посмотреть в следующем скрипте:

<script type="text/javascript">
      var map;
      function init(){
          map = new OpenLayers.Map('map', { controls: [] });

      // шкала для выбора заранее настроенного масштаба
	  map.addControl(new OpenLayers.Control.PanZoomBar());

      // панель инструментов (сдвиг и масштабирование)
	  map.addControl(new OpenLayers.Control.MouseToolbar());

	  // переключатель видимости слоев
      map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));

	  // ссылка внизу карты на текущее положение/масштаб
      map.addControl(new OpenLayers.Control.Permalink());
	  map.addControl(new OpenLayers.Control.Permalink('permalink'));

      // координаты текущего положения мыши
      map.addControl(new OpenLayers.Control.MousePosition());

	  // обзорная карта
      map.addControl(new OpenLayers.Control.OverviewMap());

   	  // горячие клавиши
      map.addControl(new OpenLayers.Control.KeyboardDefaults());


      var ol_wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
             "http://labs.metacarta.com/wms/vmap0",
             {layers: 'basic'} );
      var jpl_wms = new OpenLayers.Layer.WMS("NASA Global Mosaic",
              "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
              {layers: "landsat7"});
      var dm_wms = new OpenLayers.Layer.WMS("DM Solutions Demo",
              "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
              {layers: "bathymetry,land_fn,park,drain_fn,drainage," +
              "prov_bound,fedlimit,rail,road,popplace",
              transparent: "true", format: "image/png" });

      jpl_wms.setVisibility(false);
      dm_wms.setVisibility(false);

      map.addLayers([ol_wms, jpl_wms, dm_wms]);
      if (!map.getCenter()) map.zoomToMaxExtent();
      }
</script>

Обсудить в форуме Комментариев — 88

Последнее обновление: June 25 2012

Дата создания: 04.01.2008
Автор(ы): Дмитрий Колесов


(Геокруг)

Если Вы обнаружили на сайте ошибку, выберите фрагмент текста и нажмите Ctrl+Enter