1

I spent hours trying to figure out the following problem, I hope someone can help me.

You can see here that this WMS has different Projections available: http://www.webatlasde.de/arcgis/services/Maps4BW/MapServer/WMSServer?SERVICE=WMS&request=GetCapabilities

(here you can find even more information and an example map http://www.webatlasde.de/ArcGIS/rest/services/Maps4BW/MapServer )

How do I have to set up my map-object or layers so that the webatlas.de and OSM (or Google) are displayed in one Map with the correct projection?

Can't I use EPSG:3857 as an substitut for EPSG:900913?

In fact I can only get webaltas.de working without spatial distortion with the following configuration:

Proj4js.defs["EPSG:31467"] = "+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0 +ellps=bessel +datum=potsdam +units=m +no_defs";

var extent1 = new OpenLayers.Bounds(3364573, 5257369, 3635262, 5536211);

function Map_main(){

    map = new OpenLayers.Map("mapdiv",{

        projection: new OpenLayers.Projection('EPSG:31467'),
        displayProjection: new OpenLayers.Projection('EPSG:31467'),       
        controls: [new OpenLayers.Control.Navigation(),
              new OpenLayers.Control.PanZoomBar(),
              new OpenLayers.Control.ScaleLine({ bottomOutUnits:'',bottomInUnits:'',maxWidth:150}),
              new OpenLayers.Control.MousePosition(),
              new OpenLayers.Control.LayerSwitcher()],      
        units: "m",
        maxExtent: extent1
    });

    webatlasde = new OpenLayers.Layer.WMS("Webatlas", "http://www.webatlasde.de/arcgis/services/Maps4BW/MapServer/WMSServer", {
        layers: 'Halbtonvariante',
        format: 'image/png'
    });

    map.addLayer(webatlasde);

}

If I try this, the map is distorted

Proj4js.defs["EPSG:31467"] = "+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0 +ellps=bessel +datum=potsdam +units=m +no_defs";

var leftBottom = new OpenLayers.LonLat(3364573, 5257369).transform(new OpenLayers.Projection("EPSG:31467"), new OpenLayers.Projection("EPSG:4326") );
var rightTop = new OpenLayers.LonLat(3635262, 5536211).transform(new OpenLayers.Projection("EPSG:31467"), new OpenLayers.Projection("EPSG:4326") );
var extent2 = new OpenLayers.Bounds(leftBottom.lon, leftBottom.lat, rightTop.lon, rightTop.lat);

function Map_main2(){

    map = new OpenLayers.Map("mapdiv",{

        projection: new OpenLayers.Projection('EPSG:4326'),
        displayProjection: new OpenLayers.Projection('EPSG:4326'),       
        controls: [new OpenLayers.Control.Navigation(),
              new OpenLayers.Control.PanZoomBar(),
              new OpenLayers.Control.ScaleLine({ bottomOutUnits:'',bottomInUnits:'',maxWidth:150}),
              new OpenLayers.Control.MousePosition(),
              new OpenLayers.Control.LayerSwitcher()],      
        units: "m",
        maxExtent: extent2
    });

    webatlasde = new OpenLayers.Layer.WMS("Webatlas", "http://www.webatlasde.de/arcgis/services/Maps4BW/MapServer/WMSServer", {
        layers: 'Halbtonvariante',
        projection: new OpenLayers.Projection('EPSG:31467'),
        displayProjection: new OpenLayers.Projection('EPSG:4326'), 
        format: 'image/png'
    });

    map.addLayer(webatlasde);    
}

Can someone tell me how to correctly change the projection for the webatlas.de WMS? Or do I even have to use its REST-Interface with OpenLayers (I tried but miserably failed)?

I hope I could make explain myself.

Have a nice day! All the best Gregor

0

1 Answer 1

1

There were a couple of Issues that need to be tackled, before we use the ArcGIS Server's WMS service on top of OpenStreetMaps.

  1. We need to call the WMS service in OSM's projection, i.e. EPSG:3857
  2. We need to make sure that the WMS service is transparent. This was done by using layer options, where we requested images in png format, and with a transparent=true option.

I can use the following code to show he given WMS service on top of OSM layer:

<!DOCTYPE html>
<html>
  <head>
    <title>OpenLayers Map</title>
    <link rel="stylesheet" href="http://openlayers.org/dev/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/dev/OpenLayers.js"></script>
    <script type="text/javascript">
    var map, layer;
    function init(){
        map = new OpenLayers.Map('map', {projection: new OpenLayers.Projection("EPSG:3857")});
        layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
        map.addLayer(layer);

        var wmsLayer = new OpenLayers.Layer.WMS( "ArcGIS WMS",
                "http://www.webatlasde.de/ArcGIS/services/Maps4BW/MapServer/WMSServer", 
                {layers: 'Halbtonvariante', FORMAT:"image/png", transparent:"TRUE"},
                {isBaseLayer: false});

        map.addLayer(wmsLayer);
        map.zoomToExtent([807292,6012131,1249140,6277886], true); 
    }
    </script>
<style>
    #map{
        width:650px;
        height:400px;
    }
</style>

  </head>
  <body onload="init()">
   <div id="map" ></div>
  </body>
</html>
1
  • awesome, thank you very much for your quick answer.
    – Gregor
    Commented May 1, 2013 at 19:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.