[GIS] Simple Website to show WMS with Openlayers

openlayersopenlayers-2web-mappingwms

i want a simple website to show a WMS and want to use Openlayers.
I started with Quick Start from Openlayers newest version, but got errors.
So i took an old workspace (openlayers version 2) and edited this:

<!DOCTYPE html>
<html>
  <head>
    <title>OpenLayers Demo</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.3.1/css/ol.css" type="text/css">
    <style type="text/css">
      html, body, #basicMap {
          width: 600px;
          height: 600px;
          margin: 10;
      }
    </style>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  </head>
  <body onload="init();">
    <div id="basicMap"></div>
        <script>
      function init() {}
        map = new OpenLayers.Map("basicMap");
        map.addLayer(new OpenLayers.Layer.OSM());
        var mv = new OpenLayers.Layer.WMS( 
            "WMS MV",
            "https://www.geodaten-mv.de/dienste/alkis_wms?", 
            {
                layers: 'adv_alkis_flurstuecke', 
                version:"1.1.1", 
                format:"image/png"
            }, 
            {isBaseLayer: false} 
        );  
        map.addLayers([mv]);
        map.setCenter(new OpenLayers.LonLat(11.5043,53.594) // Center of the map
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            new OpenLayers.Projection("EPSG:3857") // to Spherical Mercator Projection
          ),
          16 // Zoom level
        );
        map.addControl( new OpenLayers.Control.LayerSwitcher() );
        var ctrl_1 = new OpenLayers.Control.MousePosition({displayProjection: 'EPSG:4326'});
        map.addControl( ctrl_1 );
    </script>
  </body>
</html>

So i got an little div with a map, but without the WMS.

I tested the WMS on this enter link description here

THE URL for WMS: https://www.geodaten-mv.de/dienste/alkis_wms?request=GetCapabilities&SERVICE=WMS&version=1.3.0

What am I doing wrong? I don't have to use Version 2 from OpenLayers!
I need a simple local website to Show WMS as layer.
Maybe there is a problem with projection… 

[1]: http://gis.ibbeck.de/ginfo/apps/OLExamples/OL212/wms_example/add_WMSlayer.asp

Another try with Openlayers 4 and WMS from this site (https://www.geoportal-mv.de/portal/Geowebdienste/Fachthemen/Tourismus_und_Freizeit):

<!doctype html>
<html lang="de">
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.4.2/css/ol.css" type="text/css">
<style>
  .map {
    height: 600px;
    width: 800px;
  }
</style>
<script src="https://openlayers.org/en/v4.4.2/build/ol.js" type="text/javascript"></script>
<title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      new ol.layer.Tile({
          extent: [-13884991, 2870341, -7455066, 6338219],
          source: new ol.source.TileWMS({
            url: 'https://ahocevar.com/geoserver/wms',
            params: {'LAYERS': 'topp:states', 'TILED': true},
            serverType: 'geoserver'
          })
        }),
    new ol.layer.Tile({
      extent: [33290156, 5948802, 33369558, 6001737],
      source: new ol.source.TileWMS({
        url: 'https://www.umweltkarten.mv-regierung.de/script/mv_a2_landplan_wms.php?',
        params: {
            'LAYERS': 't2_boden1',
            'FORMAT': 'image/png',
            'VERSION': '1.1.1',
            'SRS': 'EPSG:5650',
            'WIDTH': '300',
            'HEIGHT': '200'
        }
      })
    })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([11.5, 53.9]), 
      zoom: 11
    })
  });
</script>

The WMS isn't visible on the map, the Image from WMS isn't empty.
Maybe, anyone else can help!?

Best Answer

You have to pass some parameters to WMS service, thats all required.

For example

https://www.geodaten-mv.de/dienste/alkis_wms?request=GetMap&SERVICE=WMS&version=1.3.0&CRS=EPSG%3A3857&BBOX=1137794.83221942,6967662.42046048,1658813.45554506,7332932.41531642&WIDTH=573&HEIGHT=662&FORMAT=image%2Fpng&TRANSPARENT=true

I passed CRS,BBOX,WIDTH,HEIGHT,FORMAT and TRANSPARENT parameters and got an image but its empty. Also your request parameter must be "GetMap". You can pass right parameters like this and try to get an image.

Openlayers pass some parameters automatically but you have to check projection and bbox values. I am working an example with your WMS service, if I completed, I will add here.

Related Question