I have the following HTML-javascriptJavaScript code and iI have problems reprojectingre-projecting the vector vector layer (WFS) from EPSG:27700 (British National Grid) to EPSG:900913 (googlemapsGoogle Maps).
I managed to project the WMS layer but i have difficulties with the WFS.
With what iI managed to project the WMS layer but I have read so far, to perform this reprojection you need "GeoJSON" and "Proj4js". There is no much documentation and examples using these 2 featuresdifficulties with the WFS.
One more thing to add is that using the existing WFS coding i managed to project the "tasmanian" layers that already exist in GeoserverWith what I have read so far, to perform this re-projection you need "GeoJSON" and "Proj4js". But these are on a different projecting system (EPSG:4326)
Any help would beThere is no much appreciateddocumentation and examples using these 2 features.
GeorgeOne more thing to add is that using the existing WFS coding I managed to project the "Tasmanian" layers that already exist in GeoServer. But these are on a different projecting system (EPSG:4326)
<html>
<head>
<style>
html,body {
height: 99%;
width: 99%;
}
#map {
width: 80%;
height: 80%;
border: 1px solid black;
}
</style>
<title>OpenLayers: Google Layer Example</title>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2 mkt=en-us"></script>
<script src="http://developers.cloudmade.com/attachments/download/58/cloudmade.js"></script>
<script src="http://proj4js.org/lib/proj4js-compressed.js"></script>
<script type="text/javascript">
Proj4js.defs["EPSG:900913"] = "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs";
Proj4js.defs["EPSG:27700"] = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs";
Proj4js.defs["EPSG:4326"] = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
function init() {
//set up projections
// World Geodetic System 1984 projection
var WGS84 = new OpenLayers.Projection("EPSG:4326");
// WGS84 Google Mercator projection
var WGS84_google_mercator = new OpenLayers.Projection("EPSG:900913");
// OS British National Grid
var os = new OpenLayers.Projection("EPSG:27700");
//Initialize the map
var map = new OpenLayers.Map ("map", {
controls:[
//allows the user pan ability
new OpenLayers.Control.Navigation(),
//displays the pan/zoom tools
new OpenLayers.Control.PanZoomBar(),
//displays a layer switcher
new OpenLayers.Control.LayerSwitcher(),
],
projection: WGS84_google_mercator,
displayProjection: WGS84
} );
//base layers
var openstreetmap = new OpenLayers.Layer.OSM();
var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
key: 'BC9A493B41014CAABB98F0471D759707'}
);
var google_maps = new OpenLayers.Layer.Google("Google Maps", {
numZoomLevels: 20}
);
var google_satellite = new OpenLayers.Layer.Google("Google Satellite",
{
type: google.maps.MapTypeId.SATELLITE,
'sphericalMercator': true,
buffer:0,
numZoomLevels: 20}
);
var bing_shaded = new OpenLayers.Layer.VirtualEarth("Bing Maps",
{
type: VEMapStyle.Shaded,
'sphericalMercator': true,
numZoomLevels: 20}
);
var bing_hybrid = new OpenLayers.Layer.VirtualEarth("Bing Satellite", {
type: VEMapStyle.Hybrid,
'sphericalMercator': true,
numZoomLevels: 20}
);
var bing_aerial = new OpenLayers.Layer.VirtualEarth("Bing Aerial", {
type: VEMapStyle.Aerial,
'sphericalMercator': true,
numZoomLevels: 20}
);
// WMS Layers for the projection of the shapefiles
var layer1 = new OpenLayers.Layer.WMS( "National Parks",
"http://localhost:8080/geoserver/wms",
{
srs: 'EPSG:4326',
layers: 'National_Parks',
transparent: 'true',
format: 'image/png',
buffer:0
},
{
'singleTile': true, 'ratio': 1, 'opacity': 0.75, 'isBaseLayer': false, 'wrapDateLine': false,'transitionEffect':'resize', displayInLayerSwitcher : true, 'alwaysInRange': true, 'displayOutsideMaxExtent':true
}
);
// WFS Layers for the projection of the shapefiles
var wfslayer = new OpenLayers.Layer.Vector("National Parks in GB",
{
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
url: "http://localhost:8080/geoserver/wfs",
//featureType: "tasmania_state_boundaries",
featureType: "National_Parks",
//featureNS: "http://www.openplans.org/topp",
featureNS: "http://opengeo.org/protec_are",
version: "1.1.0",
srsName: "EPSG:900913",
})
});
//transformation between coordinate systems (27700 to 900913)
var format = new OpenLayers.Format.GeoJSON({
'internalProjection': new OpenLayers.Projection("EPSG:900913"),
'externalProjection': new OpenLayers.Projection("EPSG:27700")
});
var newfeatures = format.write(wfslayer.features);
var newlayer = new OpenLayers.Layer.Vector("newlayer");
newlayer.addFeatures(format.read(newfeatures));
// Display the layers on the map
map.addLayers([openstreetmap, cloudmade, google_maps, google_satellite,bing_shaded, bing_hybrid, bing_aerial, layer1, newlayer]);
var mapextent = new OpenLayers.Bounds(-16.08,49.06,6.76,58.74).transform(map.displayProjection, map.baseLayer.projection);
map.zoomToExtent(mapextent);
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers: Google Layer Example</h1>
<div id="map" </div>
<div id="coordinates"></div>
</body>
</html>
Senthil iI made the changes that you suggested and iI managed to get the layer on the screen.
As quite lotsa lot of people might have the same problem iI would like to summarise some important things.
--> If the web page(HTML) containing the map (comment from 'iant') that you are creating exists on the same server as WFS/GeoserverGeoServer (e.g when you use the same PC) then you dontdon't need to use proxy.
--> For conversion between projection systems (e.g. from EPSG:27700 to EPSG:900913) you dontdon't need Proj4Js or GeoJsonGeoJSON. WFS Version 1.1.0 will do the trick.
--> Do not run the HTML web page as a file by double clicking on it (e.g file:///E:/GISWork/GISApplication/Geoserver-2.0.3/data_dir/www/GIS.html)
but run it through the server (e.g http://localhost:8080/geoserver/www/GIS.html)
otherwise you wontwon't be able to see the layer on the screen.
G
