Skip to content

Instantly share code, notes, and snippets.

@ThomasG77
Last active Jan 20, 2018
Embed
What would you like to do?
Using WMS Capabilities to get layer center (OK only if layer center is not the CRS center but really the layer data center...)
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>WMS Capabilities Parsing</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var parser = new ol.format.WMSCapabilities();
fetch('https://ahocevar.com/geoserver/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities').then(function(response) {
return response.text();
}).then(function(text) {
var result = parser.read(text);
var extent = result.Capability.Layer.Layer.find(l => l.Name === 'topp:states').EX_GeographicBoundingBox;
debugger;
var extent_3857 = ol.proj.transform(extent, 'EPSG:4326', 'EPSG:3857')
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: {'LAYERS': 'topp:states'},
ratio: 1,
serverType: 'geoserver'
})
})
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: ol.extent.getCenter(extent_3857),
zoom: 4
})
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment