You are here

Display Vector layer from GeoServer WFS on OSM with GeoExt&OpenLayers

Supposed that you know what is GeoExt, GeoServer and Openlayers.

Preparation:
GeoServer with geo data under SRS 'EPSG:31467'

Purpose:
Display vector layer from WFS of GeoServer on OSM(Open Street Map).

Problem:
Can not display vector layer on OSM map, but no problem for displaying vector layer on a normal WMS map.

Codes(only key part) for displaying vector layer on WMS map:

============For WMS=====================

vectorLayer = new OpenLayers.Layer.Vector(
"vector"    );

store = new GeoExt.data.FeatureStore({
layer: vectorLayer,
autoLoad: true,
fields: [
{name: 'city', type: 'string'},
{name: 'street', type: 'string'}
],
proxy: new GeoExt.data.ProtocolProxy({
protocol: new OpenLayers.Protocol.WFS({
url: "/geoserver/wfs"
,version: "1.1.0"
,srsName: "EPSG:31467"
,featurePrefix:"cite"
,featureType: "v_street"
,featureNS: "http://www.opengeospatial.net/cite"
,geometryName: "rsgeom"
})
})
});

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

var layerosm = new OpenLayers.Layer.OSM("OSM Map");

var mapPanel = new GeoExt.MapPanel({
title: ""
,renderTo: "streetmap"
,width: 800
,height: 300
,layout:'fit'
,frame:true
,border:false
,map: {theme: null }
,layers: [
layerwms,
//layerosm,
vectorLayer
]
,center: [9.978333,48.412112]
,zoom: 12
});
==========Code end========================

After one days' stuck, i found the reason: OSM use SphericalMercator projection, so i need add special projection for it in Openlayers.

============For OSM=====================

vectorLayer = new OpenLayers.Layer.Vector(
"vector"    );

store = new GeoExt.data.FeatureStore({
layer: vectorLayer,
autoLoad: true,
fields: [
{name: 'city', type: 'string'},
{name: 'street', type: 'string'}
],
proxy: new GeoExt.data.ProtocolProxy({
protocol: new OpenLayers.Protocol.WFS({
url: "/geoserver/wfs"
,version: "1.1.0"
,srsName: "EPSG:3857"//OSM SphericalMercator
,featurePrefix:"cite"
,featureType: "v_street"
,featureNS: "http://www.opengeospatial.net/cite"
,geometryName: "rsgeom"
})
})
});

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

var layerosm = new OpenLayers.Layer.OSM("OSM Map");

   //For OSM need reprojection, and load WFS layer under SRS: 'EPSG:3857'
var aliasproj = new OpenLayers.Projection ("EPSG:3857");
layerosm.projection = aliasproj;

// set transformation functions from/to alias projection
OpenLayers.Projection.addTransform("EPSG:4326", "EPSG:3857", OpenLayers.Layer.SphericalMercator.projectForward);
OpenLayers.Projection.addTransform("EPSG:3857", "EPSG:4326", OpenLayers.Layer.SphericalMercator.projectInverse);

var mapPanel = new GeoExt.MapPanel({
title: ""
,renderTo: "streetmap"
,width: 800
,height: 300
,layout:'fit'
,frame:true
,border:false
,map: {theme: null }
,layers: [
//layerwms,
layerosm,
vectorLayer
]
,center: [1108594.758211, 6169072.3184791]
,zoom: 12
});
==========Code end========================

WFS OSM GeoExt 

Ref:

http://trac.osgeo.org/openlayers/wiki/SphericalMercator
http://dev.geoext.org/trunk/geoext/examples/feature-grid.html
http://openlayers.org/dev/examples/select-feature.html