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, которые, вместе с примерами их использования и документаций доступны на официальном сайте.

Оглавление

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

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

Ссылки по теме

Последнее обновление: September 09 2021

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

Наверх

Что нового

Решение задач на сфере: прямая геодезическая задача

Решение задач на сфере: угловая засечка

Задачи на сфере: линейная засечка

Решение задач на сфере: обратная геодезическая задача

Новое на форуме

Все темы форума