3

I'm currently doing a Proof Of Concept involving OpenLayers and I'm facing an issue.

I follow this official sample to try to load a map with raster and WFS layers : http://openlayers.org/en/latest/examples/vector-wfs.html

I can make this sample works fine with EPSG:4326, I take exactly the same code, only things changed are :

  • vectorSource.url = taking my WFS
  • raster.Source = OMS instead of BingMaps
  • EPSG:4326 instead of EPSG:3857 from the sample

Here is the JavaScript code :

    var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: function (extent) {
            return 'http://localhost:8090/geoserver/ANF/ows?service=WFS&' +
                'version=1.1.0&request=GetFeature&typename=ANF:PARC_BIODEM_SP&' +
                'outputFormat=application/json&srsname=EPSG:4326&' +
                'bbox=' + extent.join(',') + ',EPSG:4326';
        },
        strategy: ol.loadingstrategy.bbox
    });


    var vector = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgba(0, 0, 255, 1.0)',
                width: 2
            })
        })
    });

    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: [6.13, 49.845],
            projection: 'EPSG:4326',
            minZoom: 10,
            maxZoom: 28,
            zoom: 10
        })
    });

Now, I want to display the map in EPSG:2169.

When I set the new projection to the WFS layer (vectorSource), it doesn't display it anymore on the map. And when I set the new projection to the map view itself, the HTML page stays white, and the debugger says an error : "ol.js:68 Uncaught TypeError: Cannot read property 'H' of undefined"

This is the JavaScript code I would like to have, but that is not working :

    var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: function (extent) {
            return 'http://localhost:8090/geoserver/ANF/ows?service=WFS&' +
                'version=1.1.0&request=GetFeature&typename=ANF:PARC_BIODEM_SP&' +
                'outputFormat=application/json&srsname=EPSG:2169&' +
                'bbox=' + extent.join(',') + ',EPSG:2169';
        },
        strategy: ol.loadingstrategy.bbox
    });


    var vector = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgba(0, 0, 255, 1.0)',
                width: 2
            })
        })
    });

    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: [6.13, 49.845],
            projection: 'EPSG:2169',
            minZoom: 10,
            maxZoom: 28,
            zoom: 10
        })
    });

My WFS layer comes from GeoServer, and data from an Oracle database, and I'm sure that the data are well available in EPSG:2169. GeoServer says that the native SRC is EPSG:2169, and an OpenLayers preview (always from GeoServer) shows well the layer.

Any idea of why my WFS looks like well working from GeoServer in EPSG:2169 (OpenLayers preview), but not in my web page with OpenLayers ? Am I missing something ?

Many thanks !

JCB
  • 99
  • 2
  • 11
  • Please, read [this (how to ask)](http://stackoverflow.com/help/how-to-ask) and [this (mcve)](http://stackoverflow.com/help/mcve) before asking, as those will help you get more and better answers from the community. – Bonatti Jul 12 '16 at 13:55
  • I updated my question according to your advices. Many thanks. – JCB Jul 13 '16 at 08:15
  • Your question now is well formulated, but I am having issues understand how to help (openlayers is not a tool I am familiar with). [I also suggest reading this related question](http://stackoverflow.com/questions/11740663/google-map-api-uncaught-typeerror-cannot-read-property-offsetwidth-of-null), mainly, double check that your selectors are correct. Preferably during a debug run. Also, check that you have completely loaded resources before using them. Use a "starter" function, on your DOM `onload` for instance – Bonatti Jul 13 '16 at 11:37
  • add this line of code at the very beggining of your js `Proj4js.defs["EPSG:2169"] = "+proj=tmerc +lat_0=49.83333333333334 +lon_0=6.166666666666667 +k=1 +x_0=80000 +y_0=100000 +ellps=intl +towgs84=-193,13.7,-39.3,-0.41,-2.933,2.688,0.43 +units=m +no_defs";` – pavlos Jul 13 '16 at 16:58
  • Thank you very much @pavlos, it solves my issue in one way Just to mention, the exact syntax was `proj4.defs('EPSG:2169', '+proj=tmerc +lat_0=49.83333333333334 +lon_0=6.166666666666667 +k=1 +x_0=80000 +y_0=100000 +ellps=intl +towgs84=-193,13.7,-39.3,-0.41,-2.933,2.688,0.43 +units=m +no_defs');` with a reference to `proj4.js` In this way, the OSM layer displays well in EPSG:2169, but now my WFS layer doesn't display anymore, even if Fiddler shows that the query returns well the asked features. I'm investigating further. – JCB Jul 14 '16 at 08:07
  • Does the query returns your fetaures projected on `EPSG:2169`? You may have to do a reprojection on your features. – pavlos Jul 14 '16 at 08:29
  • I already did this check and yes, it is well projected, I can see it in Fiddler. I also checked the extent (see vectorSource.url). In EPSG:4326, with a map center at [6.13, 49.845], I get an extent of [4.6973419189453125, 49.05670166015625, 7.5634002685546875, 50.63323974609375]. In EPSG:2169, with a map center at [74000, 96000], I get an extent of [-85284.5818469162, 8398.660701128716, 233406.4160304591, 183701.6149719609]. It looks like correct. – JCB Jul 14 '16 at 13:54

0 Answers0