Last active
January 20, 2018 02:50
-
-
Save ThomasG77/5f9e62d3adeb5602d230a6eacbb9c443 to your computer and use it in GitHub Desktop.
Using WMS Capabilities to get layer center (OK only if layer center is not the CRS center but really the layer data center...)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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