Quelltext der Seite OpenLayers 3 - Beispiel

--[[Benutzer:Markus Hentschel|Markus Hentschel]] ([[Benutzer Diskussion:Markus Hentschel|Diskussion]]) 16:27, 9. Nov. 2015 (CET)<br>
OpenLayers3 funktioniert anders als OpenLayers2. Es gibt einige neue Features, dafür aber einige alte nicht mehr. Der Layer-Switcher fehlt z.B. ganz, ebenso die Definition von BaseLayern. Dafür muss man nun selbst sorgen.

Hier ist beispielhaft eine OpenLayers3-Karte, die ohne Änderungen so wie sie ist funktionieren sollte. Es wird dabei auf die Online-Bibliothek von OpenLayers verlinkt - das wird man in einer Produktivumgebung vielleicht [http://openlayers.org/en/v3.10.1/doc/tutorials/custom-builds.html anders machen].

Die Seite ist auf Grundlage der verfügbaren [http://openlayers.org/en/v3.9.0/examples/ Beispiele aus dem Netz] entstanden. Dort findet man auch noch weitere Funktionalitäten.

Das Beispiel beinhaltet einen Vektordaten-WMS, einen Rasterdaten-WMS und einen OSM-WMS. Die Bezeichnungen ''layers[0]'' und ''layers[1]'' sind nötig für die Layer, die als Hintergrundkarten-Layer im Layerswitcher erscheinen sollen. Wenn es nur eine Hintergrundkarte geben soll, ist ein Layerswitcher und damit eine spezielle Bezeichnung des Layers mit ''layers[0]'' nicht nötig.

 <nowiki>
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="description" content="Beispiel-Seite mit OpenLayers3">

  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <link rel="stylesheet" href="http://openlayers.org/en/v3.9.0/css/ol.css" type="text/css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="http://openlayers.org/en/v3.9.0/build/ol.js"></script>

  <title>Test OL3</title>

  <!-- Definition der Karte -->
  <style type="text/css">
    #map {
      width: 800px;
      height: 500px;
    }
  </style>

  <!-- Definition des Layerswitchers und der "Base-Layer" -->
  <style>
  #toolbox {
    position:absolute;
    top:380px;
    left:648px;
    padding:3px;
    border-radius: 4px;
    color:#fff;
    background: rgba(255, 255, 255, 0.4); z-index:100;
  }
  #layerswitcher {
    margin:0;
    padding:8px;
    border-radius:4px;
    background:rgba(0, 60, 136, 0.4); list-style-type:none;
  }
  </style>

  <!-- Definition der Full-Screen-Größe -->
  <style>
  .map:-moz-full-screen {
    height: 100%;
  }
  .map:-webkit-full-screen {
    height: 100%;
  }
  .map:-ms-fullscreen {
    height: 100%;
  }
  .map:fullscreen {
    height: 100%;
  }
  .ol-rotate {
    top: 3em;
  }
  </style>

  <!-- Definition des Popups bei Abfragen -->
  <style>
  .ol-popup {
    position: absolute;
    background-color: #F0F8FF;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
  }
  .ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }
  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }
  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 7px;
  }
  .ol-popup-closer:after {
    background-color: #ccccee;
    content: "X";
    font-weight: bold;
    color: red;
  }
  </style>

  <!-- Änderung des Frames im Popup -->
  <style>
  iframe {
    color: rgba(51, 51, 51, 0.07);
  }
  </style>

  <!-- Definition des Export-PNG-Buttons -->
  <style>
  #exportpng {
    margin-left: 0px;
    margin-top: 7px;
    z-index: 3;
    width: 150px;
    border: 1px solid #CCC;
    background: transparent linear-gradient(#EDF2FF 0%, #D7DDED 100%) repeat scroll 0% 0%;
    line-height: 20px;
    border-radius: 5px;
  }
  </style>
</head>
<body>

  <div>
    <div>
      <div>
        <div id="map">
        </div>
        <div id="popup" class="ol-popup">
          <a href="#" id="popup-closer" class="ol-popup-closer"></a>
          <div id="popup-content"></div>
        </div>
    </div>
    </div>

    <!-- Definition der Layer im Layerswitcher -->
    <div id="toolbox">
      <ul id="layerswitcher">
       <li><label><input type="radio" name="layer" value="0" checked> OpenStreetMap</label></li>
       <li><label><input type="radio" name="layer" value="1"> Luftbild</label></li>
      </ul>
    </div>

    <!-- PNG-Export-Link der Karte -->
    <div id="exportpng" align="center"><a id="export-png" download="map.png">Als Bild exportieren</a></div>

    <script type="text/javascript">

    <!-- Funktion für den Layer-Switcher -->
    function switchLayer()
    {
      var checkedLayer = $('#layerswitcher input[name=layer]:checked').val();
      for (i = 0, ii = layers.length; i < ii; ++i) layers[i].setVisible(i==checkedLayer);
    }
    $(function() { switchLayer() } );
    $("#layerswitcher input[name=layer]").change(function() { switchLayer() } );

    <!-- Definitionen für die Objektabfrage -->
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var closer = document.getElementById('popup-closer');
    closer.onclick = function() {
      overlay.setPosition(undefined);
      closer.blur();
      return false;
    };
    var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
      element: container,
      autoPan: true,
      autoPanAnimation: {
        duration: 250
      }
    }));

    <!------------ Layer-Definitionen ------------>

    var layers = [];

    <!-- Definition des WMS-Layers Naturschutzflächen -->
    var wmsSourceNSF = new ol.source.ImageWMS({
      url: 'http://geodienste.landkreis-vorpommern-ruegen.de/cgi-bin/mapserv?map=/home/fgs/fgs/www/wms/naturschutz.map',
      params: {
        'LAYERS': 'naturschutzgebiete',
        'VERSION': '1.1.1',
        'FORMAT': 'image/png',
        'TILED': true
      },
      serverType: 'mapserver',
      crossOrigin: ''
    });
    wmsLayerNSF = new ol.layer.Image({
      source: wmsSourceNSF
    });

    <!-- Definition des WMS-Layers Kreisgrenze -->
    var wmsSourceKreisgrenze = new ol.source.ImageWMS({
      url: 'http://geodienste.landkreis-vorpommern-ruegen.de/cgi-bin/mapserv?map=/home/fgs/fgs/www/wms/regis/kreisgrenze.map',
      params: {
        'LAYERS': 'regismv_kreis',
        'VERSION': '1.1.1',
        'FORMAT': 'image/png',
        'TILED': true
      },
      serverType: 'mapserver',
      crossOrigin: ''
    });

    wmsLayerKreisgrenze = new ol.layer.Image({
      source: wmsSourceKreisgrenze
    });

    <!-- Definition des OSM-Layers -->
    layers[0] = new ol.layer.Tile({
      source: new ol.source.OSM()
    });

    <!-- Definition des DOP-Layers -->
    var wmsSourceDOP = new ol.source.ImageWMS({
      url: 'http://www.geodaten-mv.de/dienste/adv_dop?language=ger',
      params: {
        'LAYERS': 'WMS_MV_DOP',
        'VERSION': '1.1.1',
        'FORMAT': 'image/png',
        'TILED': true
      },
       serverType: 'mapserver'
    });
    layers[1] = new ol.layer.Image({
      source: wmsSourceDOP
    });


    <!------------ Ende Layer-Definitionen ------------>


    <!-- Definition des Bildmittelpunkts, des Zooms und der min-/max Zoomstufen -->
    var view = new ol.View({
      center: ol.proj.transform([12.99, 54.32], 'EPSG:4326', 'EPSG:3857'),
      zoom: 9,
      minZoom: 8,
      maxZoom: 15
    });

    <!-- Definition der Maßstabsleiste -->
    var scaleLineControl = new ol.control.ScaleLine();

    <!-- Definition des Attribution-Button -->
    var attribution = new ol.control.Attribution({
      collapsible: true,
      label: '©',
      collapsed: true,
      tipLabel: 'Zuordnungen'
    });

    <!-- Definition der Karte -->
    var map = new ol.Map({
      controls: ol.control.defaults({
        attribution: false <!-- verhindert den Standard-Attributions-Button -->
      }).extend([
        attribution, <!-- setzt den eigenen Attributions-Button -->
        scaleLineControl, <!-- hier wird die Maßstabsleiste der map hinzugefügt -->
        new ol.control.FullScreen({ <!-- bringt einen Button für die Full-Screen-Anzeige -->
          tipLabel: 'Auf ganzen Bildschirm' <!-- deutscher Tooltip für den Button -->
        })
      ]),
      overlays: [overlay],
      target: 'map',
      layers: [layers[0], layers[1], wmsLayerKreisgrenze, wmsLayerNSF], <!-- Definition der Layer und der Layerreihenfolge -->
      view: view
    });

    <!-- Definition des GetFeatureInfo -->
    map.on('singleclick', function(evt) {
      var coordinate = evt.coordinate;
      var viewResolution = /** @type {number} */ (view.getResolution());
      var url = wmsSourceNSF.getGetFeatureInfoUrl( <!-- wenn mehrere abzufragende WMS eingebunden werden, muss das hier anders! -->
        evt.coordinate, viewResolution, 'EPSG:3857',
        {'INFO_FORMAT': 'text/html'});
      content.innerHTML = '<iframe seamless src="' + url + '"></iframe>';
      overlay.setPosition(coordinate);
    });

    <!-- Definition des PNG-Exports -->
    var exportPNGElement = document.getElementById('export-png');
    if ('download' in exportPNGElement) {
      exportPNGElement.addEventListener('click', function(e) {
        map.once('postcompose', function(event) {
          var canvas = event.context.canvas;
          exportPNGElement.href = canvas.toDataURL('image/png');
        });
        map.renderSync();
      }, false);
    } else {
      var info = document.getElementById('no-download');
      /**
       * display error message
       */
      info.style.display = '';
    }

    </script>

  </body>
</html>
 </nowiki>