Skip to content

Instantly share code, notes, and snippets.

@nmandery
Last active April 4, 2018 12:54
Show Gist options
  • Save nmandery/0c05871cc4707452d96bafb39eb9139d to your computer and use it in GitHub Desktop.
Save nmandery/0c05871cc4707452d96bafb39eb9139d to your computer and use it in GitHub Desktop.
EOC Flood using WMS + click
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>
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" : "";
});
<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>
<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment