0

If I try to import data from WFS service https://mrdata.usgs.gov/services/ca? into qGIS, it is working normally. But when I try to make html/js file on local machine using WFS service functionallity, I have no success. I got WMS to work using ol.

This is the code I used:

<!DOCTYPE html>
<html>
  <head>
    <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>
    <!-- looks like something is loading, based on network transfer -->
      var vectorSource = new ol.source.Vector({
        format: new ol.format.WFS({
          gmlFormat: new ol.format.GML({
            srsName: 'Nothing'})
        }),
        url: 'https://mrdata.usgs.gov/services/ca?version=1.1.0&maxfeatures=50&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=lith-low'
      });
    <!-- url: 'https://mrdata.usgs.gov/services/ca?version=1.1.0&maxfeatures=20&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=lith-low&SRSNAME=EPSG:4326&BBOX=-132.04568113772455717,26.46616766467064963,-101.50074101796406012,47.67616766467065759', -->
    <!-- strategy: ol.loadingstrategy.bbox //default ol.loadingstrategy.all -->



      var vector = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: null,
            width: 5
          })
        })
      });

      var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });

  var map = new ol.Map({
         layers: [raster, vector],
        target: document.getElementById('map'),
        view: new ol.View({
          center: [-13000233,3901982],
          maxZoom: 19,
          zoom: 10
        })
      });
    </script>
  </body>
</html>

Does anyone have any idea what is the problem here?


updated

I've tried it with XMLHttpRequest object, different url and still no success.

Is it possible that GML from the site is not in the correct structure or am I missing something in the readFeatures block of code.

Here is my block of code, if I try it this way, the result is couple of features near crossover of Greenwich and equator, if I try with different projection (uncomment projection key in view), the result is couple of features at south pole, if I try with uncommented readFeatures block, I get no visual result of features, just osm map.

<script>

//var taURL = 'https://mrdata.usgs.gov/services/ca?version=1.1.0&maxfeatures=50&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=lith-low&SRSNAME=EPSG:4326';
var taURL = 'https://mrdata.usgs.gov/cgi-bin/mapserv?map=/mnt/mrt/map-files/ca.map&service=wfs&version=1.0.0&request=getfeature&TYPENAME=lith-low&maxfeatures=5';
var imageExtent = [-122.960350,32.553815 -116.215897,42.008882];
//var imageExtent = [-123.729652,32.553815 -114.783885,42.008882]; //drugi link
window.onload = function(){
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState==4 && xhr.status==200) {
            var xmlDoc = xhr.responseXML;
            //console.log(xhr.responseText);
            //console.log(xmlDoc);

            var gmlFormat = new ol.format.GML2();

            var vector = new ol.layer.Vector({
                source: new ol.source.Vector({
                    format: gmlFormat
                    ,url: taURL,
                  }),
                style: new ol.style.Style({
                  stroke: new ol.style.Stroke({
                    color: [255,0,0, 1],
                    width: 2
                  })
                })
              });

            //still not working  
            //var features = gmlFormat.readFeatures(xmlDoc,{
            //  featureProjection: 'EPSG:3857',
            //  dataProjection: 'EPSG:4326'
            //}); 
            //vector.getSource().addFeatures(features);

            var raster = new ol.layer.Tile({
                source: new ol.source.OSM()
              });

            var map = new ol.Map({
                //layers: [raster, vector],
                layers: [raster],
                target: 'map',
                view: new ol.View({
                    projection: 'EPSG:4326',
                    center: [0,0],
                    //center: ol.extent.getCenter(imageExtent),
                    maxZoom: 30,
                    zoom: 2
                })
            });
            map.addLayer(vector);
        }
    };
    xhr.open("GET",taURL,true);
    xhr.send();
};
</script>

1

Let's make a list of issues:

  • Code below in first sample is false for two reasons: srsName: 'Nothing' is invalid & gmlFormat should be ol.format.GML2 if using WFS 1.0.0

    new ol.format.WFS({
      gmlFormat: new ol.format.GML({
        srsName: 'Nothing'})
    }),
    
  • There was an issue with color: null in your first sample

    new ol.style.Stroke({
        color: null,
        width: 5
    })
    
  • new ol.format.GML2() should be new ol.format.WFS()

  • The biggest issue but not simple to grasp: you are using WFS 1.0.0 in your call to the webservice. Implicitly, it means GML format would be 2.1.2 whereas default in OpenLayers is 3.1.1. I choose to use WFS 1.1.0 to simplify and because I had some issues with WFS 1.0.0.

You will find a working demo fixing your issues. I also choose to use fetch instead of XMLHttpRequest (both are fine)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.