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========================
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