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 является набором скриптов, написанных на JavaScript, эта библиотека не требует установки в привычном смысле слова. Поэтому для того, чтобы начать работать с OpenLayers, достаточно скачать библиотеку и распаковать ее в свой домашний каталог. Хотя с библиотекой поставляется множество дополнительных материалов (документация, примеры и т.п.), для начала работы понадобится далеко не все. Для нормальной работы достаточно скопировать в каталог, в котором хранится ваш проект, файл build/OpenLayers.js и каталоги theme и img, на этом установка завершена.
В 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>
Создание объекта, отображающего карту
Понятно, что предыдущего примера еще не достаточно, чтобы отобразить карту на страничке. Нужно создать еще объект, который будет отвечать за отображение карты:
В конструкторе объекта 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>
Предыдущих примеров достаточно, чтобы отобразить на собственной карте слои, поставляемые различными 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
Автор(ы): Дмитрий Колесов
© GIS-Lab и авторы, 2002-2021. При использовании материалов сайта, ссылка на GIS-Lab и авторов обязательна. Содержание материалов - ответственность авторов. (подробнее).