Использование WFS-источника Geoserver в своём сайте на Openlayers

Вступление.

Подключить WMS-сервис в OpenLayers очень просто, но вот с WFS начинаются проблемы и я сними столкнулся, т.к. я новичёк в web-программировании. Есть такая вещь - cross-domain security (кому интересно - google в помощь) и она накладывает ограничения на javascript-код OpenLayers. Но всё уже решено до нас!

Отправной точкой стала хорошая статья. Прочтите.

Далее я решил написать маленькую страничку (файл index.html):

<html>
<head>
<title>OpenLayers Example</title>
<script src="OpenLayers/OpenLayers.js"></script>
<script type="text/javascript">
function init(){
var lat = 54.915856,
lon = 37.99599,
zoom = 10,
map = new OpenLayers.Map('map'),
osmMap = new OpenLayers.Layer.OSM('OpenStreetMap'),
lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
layerSwitcher = new OpenLayers.Control.LayerSwitcher(),
layerWayside = new OpenLayers.Layer.Vector('Wayside', {  // это наш слой
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.WFS({
version: '1.1.0',
url: 'http://geo.indorsoft.ru:8080/geoserver/wfs', // реальный адрес WFS
featurePrefix: 'geoportal',
featureType: 'Wayside_ar', // имя слоя Geoserver
featureNS: 'http://geoportal.indorsoft.ru/road', // URI workspace'а
geometryName: 'geom_ar' // в этом случае поле геометрии отличается от стандартного "the_geom"
}),
});
console.log(layerWayside);
console.log(layerWayside.features);
map.addLayers([osmMap, layerWayside]);
map.setCenter (lonLat, zoom);
map.addControl(layerSwitcher);
}
</script>  
</head>
<body onload="init()">
<div style="width:100%; height:100%" id="map"></div>
</body>

</html>
Рядом создал папку OpenLayers и положил туда всё их этого архива, это библиотека OpenLayers.
Но не работает как надо, нет отображения WFS-слоя на карте, только подложка OSM'а.


Решение.

Нужно вначале установить веб-сервер. Я выбрал набор для web-разработки Denwer, так я на работе использую на Windows, а домашний компьютер с Ububtu сломался.
В момент установки (всё по-русски) вас попросят указать папку на диске, куда это всё ставить и имя сетевого диска связанного с ней. Установка очень простая.
Далее, после установки Denver, нужно его запустить через соответствующий ярлык на рабочем столе. На сетевом диске Денвера в папке home создайте папку map.ru. В ней 2 папки: www и cgi-bin. В первую положите index.html и папку Openlayers. Во вторую один файл - proxy.cgi.
В этом файле нужно добавить URL сервера предоставляющего WFS в массиве allowedHosts:


А в файле index.html добавить строчку перед function init() {
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
После этого нужно перезапустить Денвер через соответствующий ярлык на рабочем столе. 
Заходим браузером на http://www.map.ru/.


Коричневые полосы и есть WFS-слой. Картинка кликабельна.

Вот пример от Openlayers - http://openlayers.org/dev/examples/wfs-states.js

Спасибо нашему индорсофтовскому веб-разработчику Андриенко Алексею за помощь!

В ИндорСофт мы используем GeoExt для создания frontend'а из дистрибутива OpenGeo Suite. 
Для использования proxy в OpenGeo Suite SDK необходимо использовать параметр Proxy в app.js. В настройке viewer'а есть параметр proxy, где и необходимо указать строку аналогичную OpenLayers.ProxyHost, т.е. "/cgi-bin/proxy.cgi?url="

Комментарии

Популярные сообщения из этого блога

Apache2 и cgi-bin на Ubintu Server 12.04

Перемещаемые подписи в QGIS