Search code examples
vectoropenlayers-3gmlweb-feature-service

Adding Vector Data - GML format with WFS Transport (possible bug?)


I'm trying to add features to my OpenLayers map, by querying a publicly available WFS server which serves GML data.

// initalize the map
var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            // OpenLayers public map server
            source: new ol.source.OSM()
        }),
    ],
    target: 'map',
    view: new ol.View({
        // center on Murica
        center: [-10997148, 4569099],
        zoom: 4
    })
});

var xmlhttp = new XMLHttpRequest();

// execute this once the remote GML xml document has loaded
xmlhttp.onload = function() {

    console.log("GML XML document retrieved.  executing onload handler:");
    var format = new ol.format.GML3();

    var xmlDoc = xmlhttp.responseXML;

    console.log("you will see multiple features in the xml: ");
    console.log(xmlDoc);

    // Read and parse all features in XML document
    var features = format.readFeatures(xmlDoc, {
        featureProjection: 'EPSG:4326',
        dataProjection: 'EPSG:3857'
    });

    console.log("for some reason only a single feature will have been added: ")
    console.log(features);
    console.log("Why is this?");

    var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
            format: format
        })
    });

    // Add features to the layer's source
    vector.getSource().addFeatures(features);

    map.addLayer(vector);
};

// configure a GET request
xmlhttp.open("GET", "http://geoint.nrlssc.navy.mil/dnc/wfs/DNC-WORLD/feature/merged?version=1.1.0&request=GetFeature&typename=DNC_APPROACH_LIBRARY_BOUNDARIES&srsname=3857",
   true);

// trigger the GET request
xmlhttp.send();

Here is a CodePen with the bug demonstrated.

http://codepen.io/anon/pen/yamOEK

Here you can download it packaged into a single HTML file: https://drive.google.com/open?id=0B6L3fhx8G3H_cmp1d3hHOXNKNHM

I can successfully download an entire feature collection with multiple features into my variable xmlDoc, using a valid typename. However, when I use format.ReadFeatures(xmlDoc), the OpenLayers GML format parser appears to only be extracting a single feature from the feature collection, whereas it should be extracting many more.

It would be wonderful if someone could take a look and see if they can figure out if I'm doing something stupidly wrong or it's a legitimate bug in OpenLayers3. Thanks so much for anyone who's able to help!


Solution

  • Single feature is added because entire document is read so instead of format.readFeatures(xmlDoc) parse each feature.Here is source code:

        var vector;
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
            ],
            target: 'map',
            view: new ol.View({
                center: [-8197020.761224195,8244563.818176944],
                zoom: 4
            })
        });
    
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onload = function() {
            var format = new ol.format.GML3();
            var xmlDoc = xmlhttp.responseXML;
            vector = new ol.layer.Vector({
                source: new ol.source.Vector({
                    format: format
                })
            });
    
            for (var i = 1; i < xmlDoc.children[0].children.length; i++) {
                var features = format.readFeatures(xmlDoc.children[0].children[i], {
                    featureProjection: 'EPSG:4326'
                });
    
    
                features.getGeometry().transform('EPSG:4326', 'EPSG:3857');
                vector.getSource().addFeature(features);
            }
    
            map.addLayer(vector);
            map.getView().fit(vector.getSource().getExtent(), map.getSize())
        };
    
        xmlhttp.open("GET", "http://geoint.nrlssc.navy.mil/dnc/wfs/DNC-WORLD/feature/merged?version=1.1.0&request=GetFeature&typename=DNC_APPROACH_LIBRARY_BOUNDARIES&srsname=3857",
            true);
    
        // trigger the GET request
        xmlhttp.send();
    

    Here is a CodePen result. http://codepen.io/anon/pen/bwXrwJ