EOC Flood using WMS + click

eoc-flood-using-wms-click.markdown

EOC Flood using WMS + click

Example of using WFS with a BBOX strategy.

A Pen by Nico Mandery on CodePen.

License.

index.html

<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

script.js

var wmsSource = new ol.source.TileWMS({
  url: "https://geoservice.dlr.de/eoc/zki/service/wms",
  params: {
    LAYERS: "riesgos_workshop:flood",
    TILED: true,
    VERSION: "1.1.0" /* geoserver issue. getfeatureinf works only on 1.1.0*/
  },
  serverType: "geoserver",
  crossOrigin: "anonymous"
});
var wmsLayer = new ol.layer.Tile({
  source: wmsSource
});

var bg = new ol.layer.Tile({
  visible: true,
  opacity: 1.0,
  title: "EOC Base Overlay",
  source: new ol.source.WMTS({
    attributions: [
      new ol.Attribution({
        html:
          '| Baseoverlay: Data © <a href="http://openstreetmap.org">OpenStreetMap contributors</a> and <a href="../about#basemaps">others</a>, Rendering © <a href="http://www.dlr.de/eoc">DLR/EOC</a>'
      })
    ],
    url: "https://tiles.geoservice.dlr.de/service/wmts",
    //		crossOrigin: 'Anonymous',
    layer: "eoc:baseoverlay",
    matrixSet: "EPSG:3857",
    format: "image/png",
    projection: ol.proj.get("EPSG:3857"),
    tileGrid: new ol.tilegrid.WMTS({
      extent: [-20037508.3428, -20037508.3428, 20037508.3428, 20037508.3428],
      origin: [-20037508.3428, 20037508.3428],
      resolutions: [
        156543.03392811998,
        78271.51696419998,
        39135.758481959994,
        19567.879241008,
        9783.939620504,
        4891.969810252,
        2445.984905126,
        1222.9924525644,
        611.4962262807999,
        305.74811314039994,
        152.87405657047998,
        76.43702828523999,
        38.21851414248,
        19.109257071295996,
        9.554628535647998,
        4.777314267823999,
        2.3886571339119995
      ],
      matrixIds: [
        "EPSG:3857:0",
        "EPSG:3857:1",
        "EPSG:3857:2",
        "EPSG:3857:3",
        "EPSG:3857:4",
        "EPSG:3857:5",
        "EPSG:3857:6",
        "EPSG:3857:7",
        "EPSG:3857:8",
        "EPSG:3857:9",
        "EPSG:3857:10",
        "EPSG:3857:11",
        "EPSG:3857:12",
        "EPSG:3857:13",
        "EPSG:3857:14",
        "EPSG:3857:15",
        "EPSG:3857:16"
      ],
      tileSize: [256, 256]
    }),
    wrapX: true
  })
});

var view = new ol.View({
  center: [-7201856.245971127, -1992342.4195436193],
  maxZoom: 19,
  zoom: 3
});
var map = new ol.Map({
  layers: [bg, wmsLayer],
  target: document.getElementById("map"),
  view: view
});

map.on("singleclick", function(evt) {
  document.getElementById("info").innerHTML = "";
  var viewResolution = /** @type {number} */ (view.getResolution());
  var url = wmsSource.getGetFeatureInfoUrl(
    evt.coordinate,
    viewResolution,
    "EPSG:3857",
    { INFO_FORMAT: "text/html" }
  );
  if (url) {
    fetch(url)
      .then(function(response) {
        return response.text();
      })
      .then(function(text) {
        document.getElementById("info").innerHTML = text;
      });
  }
});

map.on("pointermove", function(evt) {
  if (evt.dragging) {
    return;
  }
  var pixel = map.getEventPixel(evt.originalEvent);
  var hit = map.forEachLayerAtPixel(pixel, function() {
    return true;
  });
  map.getTargetElement().style.cursor = hit ? "pointer" : "";
});

scripts

<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.5.1/bluebird.js"></script>

styles

<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet" />