openlayers

WMS in openlayers

WMS projizieren

Problem: WMS muss projected angezogen werden

Lösung: Verwendung von OpenLayers.Layer.WMS

Beispiel:

function init(){
            map = new OpenLayers.Map( 'map' );
            var basemap = new OpenLayers.Layer.WMS.Untiled( "DNM Berlin-Brbg", 
                "http://isk.geobasis-bb.de/ows/dnm.php?",
                {
                 layers: 'bg,siedlung,vegetation,gewaesser,transport,strassennamen,ortsnamen,gewaessernamen', 
                 format: 'png', 
                 transparent: 'off'
                },
 
                // These are the important parts for creating a non-epsg:4326
                // map: Maxextent is the boundary of the map/tile loading area,
                // maxResolution is the units/pixel at the highest zoom, and 
                // projection is the projection to be used in WMS/WFS Requests.
                {
                  maxExtent: new OpenLayers.Bounds(247000, 5686000, 487000, 5935000), 
                  maxResolution: 296985/1024, // Another alternative is 'auto', which 
                                              // will automatically fit the map: you can 
                                              // then check map.baseLayer.resolutions[0] for
                                              // a reasonable value.
                  projection:"EPSG:25833",     // Used in WMS/WFS requests.   
                                   // Only neccesary for working with scales.
                });
 
            map.addLayer(basemap);
 
            map.addControl(new OpenLayers.Control.MousePosition());
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
        }

Kachelung unterdrücken

Etliche WMS versehen die Karten mit Beschriftungen. Diese werden aber bei der Kachelung mehrfach angezeigt, was das Kartenbild zerstört.

Lösung:

OpenLayers.Layer.WMS.Untiled verwenden
OpenLayers.Layer.WMS.Untiled
  Parameters
    name	{String}
    url	{String}
    params	{Object}
    options	{Object}

Beispiel:

function init(){
            map = new OpenLayers.Map( 'map' );
            var basemap = new OpenLayers.Layer.WMS.Untiled( "DNM Berlin-Brbg", 
                "http://isk.geobasis-bb.de/ows/dnm.php?",
                {
                 layers: 'bg,siedlung,vegetation,gewaesser,transport,strassennamen,ortsnamen,gewaessernamen', 
                 format: 'png', 
                 transparent: 'off'
                },
                # usw. ...

WMS auf der Startseite

Die Karte auf der Startseite wurde mit folgendem Code eingebaut:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
 
    <style type="text/css">
        #map {
            width: 500px;
            height: 350px;
            border: 1px solid gray;
        }
        p {
            width: 500px;
        }
        div.olControlMousePosition {
            font-family: Verdana;
            font-size: 0.5em;
            color: red;
        }
 
    </style>
 
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var lat = 5814000; 
        var lon = 360000;
        var zoom = 1;
        var map, layer;
 
        function init(){
            map = new OpenLayers.Map( 'map');
 
            var dnm = new OpenLayers.Layer.WMS.Untiled( "DNM Berlin-Brbg", 
                "http://isk.geobasis-bb.de/ows/dnm.php?",
                {
                 layers: 'bg,siedlung,vegetation,gewaesser,transport,strassennamen,ortsnamen,gewaessernamen', 
                 format: 'png', 
                 transparent: 'off'
                },
 
                // These are the important parts for creating a non-epsg:4326
                // map: Maxextent is the boundary of the map/tile loading area,
                // maxResolution is the units/pixel at the highest zoom, and 
                // projection is the projection to be used in WMS/WFS Requests.
                {
                  maxExtent: new OpenLayers.Bounds(247000, 5686000, 487000, 5935000), 
                  maxResolution: 296985/1024, // Another alternative is 'auto', which 
                                              // will automatically fit the map: you can 
                                              // then check map.baseLayer.resolutions[0] for
                                              // a reasonable value.
                  projection:"EPSG:25833",     // Used in WMS/WFS requests.   
                                   // Only neccesary for working with scales.
                });
 
			map.addLayer(dnm);
 
            map.addControl(new OpenLayers.Control.MousePosition());
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
        }
    </script>
  </head>
 
<body onload="init()">
    <div id="map"></div>
 
</body>
</html>

Tests irgendwann 2007

Zwei Tests durchgeführt. Inhalt war es zu testen, inwieweit blankes javascript als WMS-Client taugt. Aufwand jeweils ne knappe Stunde.

Openlayers:

Beispiele: also in den Examples in der funktion init() folgendes einbauen:

var dm_wms = new OpenLayers.Layer.WMS( "BB-BE 250", -> Name der zu sehen ist
"http://isk.geobasis-bb.de/ows/dnm250.php?", -> URL des WMS
{layers: "siedlung,transport,vegetation,gewaesser", -> Layer des WMS
transparent: "true", format: "image/png" }); -> Bildformat

unten noch:

map.addLayers([ol_wms, jpl_wms, dm_wms, dm100_wms, dm25_wms, ue750mv_wms, tk50mv_wms]); 

eintragen und das wars.

hier ansehen (nach Brandenburg zoomen und dann das + oben rechts öffnen)

WMS javascript library:

runterladen, auspacken. in der example_layers.js eintragen:

var JPL = {
URL: 'http://isk.geobasis-bb.de/ows/dnm250.php?', -> URL
LAYERS: ['siedlung,transport,vegetation,gewaesser'], -> Layer
FORMAT: 'image/jpeg', -> Grafikformat
SRS: 'EPSG:4326', -> SRS, also Koordinatensystem
STYLES: [],
BBOX: [11.842,51.318,14.700,53.159] -> anpassen, so das was zu sehen ist ...
};
 
dann in der (z.B.) ex1.html den Service (hier JPL) angeben:
 
<script type=text/javascript>
var wmap = new WMap('map',[JPL]);
</script>

tja, und das wars erstmal - sollte dann schon gehen …

hier ansehen. (zoom in mit + und zoom out mit -)

Für diese Anwendungen muss auf dem Webserver nix laufen, ist ja nur HTML mit javascript. Natürlich muss man sich die Dienste zusammesuchen … z.B. hier.

openlayers.txt · Zuletzt geändert: 2008/03/15 22:20 von kbl