Last active
January 20, 2018 11:38
-
-
Save ThomasG77/0142b639a3626c427ba09f7db7f8ecb3 to your computer and use it in GitHub Desktop.
Demo fixing issues in https://gis.stackexchange.com/questions/267468/wfs-not-working-in-openlayers-working-in-qgis-wms-working-ok
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>WFS</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" class="map"></div> | |
| <script> | |
| var vectorSource = new ol.source.Vector({ | |
| format: new ol.format.WFS(), // Fix your wrong `new ol.format.WFS({gmlFormat: new ol.format.GML({srsName: 'Nothing'})}) | |
| loader: function(extent, resolution, projection) { | |
| // Changed the url to use WFS 1.1.0 in order to use GML 3.1.1 (if you use WFS 1.0.0, GML version 2.1.2 and I had some issues) | |
| var url = 'https://mrdata.usgs.gov/cgi-bin/mapserv?map=/mnt/mrt/map-files/ca.map&service=wfs&version=1.1.0&request=getfeature&TYPENAME=lith-low&maxfeatures=10'; | |
| // Use fetch, more simple & modern instead of XMLHttpRequest | |
| fetch(url).then(function(response) { | |
| return response.text(); | |
| }).then(function(text) { | |
| // Reproject feature (EPSG 4326) to map projection e.g EPSG:3857 | |
| var features = vectorSource.getFormat().readFeatures(text, { | |
| dataProjection: 'EPSG:4326', | |
| featureProjection: 'EPSG:3857' | |
| }); | |
| // Add parsed features to vectorSource | |
| vectorSource.addFeatures(features); | |
| }).catch(function(error) { | |
| console.log(error.message); | |
| }) | |
| } | |
| }); | |
| var vector = new ol.layer.Vector({ | |
| source: vectorSource, | |
| // Changed style to fill, yours using ol.style.Stroke with color: null would not work | |
| style: new ol.style.Style({ | |
| fill: new ol.style.Fill({ | |
| color: 'red' | |
| }) | |
| }) | |
| }); | |
| var raster = new ol.layer.Tile({ | |
| source: new ol.source.OSM() | |
| }); | |
| var map = new ol.Map({ | |
| layers: [raster, vector], | |
| target: 'map', | |
| view: new ol.View({ | |
| center: [-13000233,3901982], | |
| maxZoom: 19, | |
| zoom: 6 | |
| }) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment