0

I was making some tests using Tiger products: I converted one .shp in a PostGIS database using shp2pgsql, then imported the db into GeoServer; the layer works fine with the preview provided by GeoServer.

But when I try to add this layer to a new map, it doesn't work: I obtain an empty map, as if there weren't any other layers. I tried to look for other solutions to the problem, but none worked for me because they're mainly related to previews versions of OL. I'm sure it's only related to my inexperience with OL and JS in general, but still.

Here is the link provided by the GeoServer preview:

http://localhost:8080/geoserver/Test/wms?service=WMS&version=1.1.0&request=GetMap&layers=Test:Mass&styles=&bbox=-73.5018768310547,41.228515625,-69.9055328369141,42.8950424194336&width=768&height=355&srs=EPSG:4269&format=application/openlayers#toggle

And here the script related to the map:

    const wmsBaseLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    const wmsMassLayer = new ol.source.TileWMS({
        url: 'http://localhost:8080/geoserver/Test/wms',
        params: {
            'LAYERS' : 'Test:Mass',
            'TILED' : true,
        },
        serverType: 'geoserver',
        projection: 'EPSG:4269'
    });

    const view = new ol.View({
            center:  ol.proj.fromLonLat([-71.0589, 42.3601]),
            zoom: 8,
    });     

    const map = new ol.Map({
        target: 'map',
        layers: [ wmsBaseLayer, wmsMassLayer],
        view: view
    });

**Edit #1 I forgot to mention that I'm using a Docker architecture for my test. One container hosts GeoServer and one PostGIS. The containers are linked and the connection between them and the localhost works. I also tried to import the layer through both containers (as PostGIS db or as a WMS layer) in QGIS and it all works well. I figured that the problem is related to OL.

I made some digging and these are the errors showed in the Web Developer Console (I use Firefox)

TypeError: t.getLayerStatesArray is not a function
oo</e.prototype.getLayerStatesArray/<     Group.js:209
U</e.prototype.forEach                    Collection.js:137
oo</e.prototype.getLayerStatesArray       Group.js:208
lo</e.prototype.renderFrame_              PluggableMap.js:1198
e/this.animationDelay_<                   PluggableMap.js:191
<anonymous> self-hosted:975:17 

I also checked the Network tab, and it doesn't show any request to the WMS service (as instead happens in the GeoServer preview).

2

OpenLayers needs to make the request for the WMS image in the projection of your map, by adding the line projection: 'EPSG:4269' to your layer you are over ruling it but it doesn't know and so uses the bounding box of the map which will be in meters (EPSG:3857 is the default map projection) so your map is drawn just very small and down by the equator.

  • I understand. But considering that, I at least expected to see the OSM layer as a background and the polygons drawn in a wrong position/scale, not a blank map (which is the result that I have both if I include or exclude the line projection: 'EPSG:4269'). Does this mean that OL rescales even the OSM layer? – D.K. Feb 1 at 19:13
  • The WMS will probably draw a white box where there is no data which will hide your base layer – Ian Turton Feb 2 at 9:37
1

Although it's preferable to use the same projection for source and view OpenLayers can reproject but won't know about EPSG:4269 unless you include the proj4.js library.

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>

EPSG:4269 is predefined in proj4.js but the library must be registered in OpenLayers 5

ol.proj.proj4.register(proj4);

There is also an error in the code, your layer is defined as a source, it should be a layer containing a source:

const wmsMassLayer = new ol.layer.Tile({
    source: new ol.source.TileWMS({
        url: 'http://localhost:8080/geoserver/Test/wms',
        params: {
            'LAYERS' : 'Test:Mass',
            'TILED' : true,
        },
        serverType: 'geoserver',
        projection: 'EPSG:4269'
    })
});

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.