CODEWITHSUNDEEP
gisopenlayers-3
gerric
gerric

Reputation: 2297

Features not showing up

I'm loading features from a server and adding them as source for a vector layer.

var map = new ol.Map({
    target: 'map',
    interactions: ol.interaction.defaults().extend([
        new ol.interaction.DragRotate()
    ]),
    controls: ol.control.defaults().extend([
        new ol.control.FullScreen(),
        new ol.control.ScaleLine()
    ]),
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: 'https://server.com/wms?',
                params: {
                    'LAYERS': 'operational_structures',
                    'TILED': true
                }
            }),
            maxResolution: 500,
            opacity: 0.3
        }),
        new ol.layer.Vector({
            source: new ol.source.Vector({
                url: function (extent, resolution, projection) {
                    return 'https://server/wms?Request=GetFeature&BBOX='
                        + extent.join(',');
                },
                format: new ol.format.GeoJSON(),
                strategy: ol.loadingstrategy.bbox
            }),
            style: new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 10,
                    fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}),
                    stroke: new ol.style.Stroke({color: 'red', width: 1})
                })
            })
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 4
    })
});

everything works fine with the fetching of all features. I can access them using layer.getSource().getFeatures(). My data looks like this:

{
    "type": "FeatureCollection",
    "features": [
    {
        "type": "Feature",
        "properties": {
            "id": 1,
            "ref": "GIS_af05"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [ -119383.2138463442, 7156374.7828825945 ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "id": 2,
            "ref": "GIS_af06" },
        "geometry": {
            "type": "Point",
            "coordinates": [ -117573.06816312684, 7163838.359699009 ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "id": 3,
            "ref": "GIS_af21" },
        "geometry": {
            "type": "Point",
            "coordinates": [ -128431.22137966838, 7169061.1280527115 ]
        }
    }]
}

But for unknown reason they won't show up. Am I missing something?


EDIT:

So I found out that it's messing up with the projections. It tries to convert the feature coordinates from ESPG:4326 to ESPG:3857. The problem is, that they're already ESPG:3857. How can I prevent that?

Upvotes: 0

Views: 1694

Answers (1)

gerric
gerric

Reputation: 2297

I finally got it running now.

The problem was, that the data returned from the GIS-server doesn't specify its projection. So Openlayers3 just used EPSG:4326 as default.

After a long search through the documentation, I found out, that I can set the default projection in the ol.format.GeoJSON (did not expect it there).

The solution looks like this:

new ol.layer.Vector({
    source: new ol.source.Vector({
        url: function (extent, resolution, projection) {
            return 'https://server/wms?Request=GetFeature&BBOX='
                + extent.join(',');
        },
        format: new ol.format.GeoJSON({
            defaultDataProjection: 'EPSG:3857' // added line
        }),
        strategy: ol.loadingstrategy.bbox
    }),
    ...
})

Upvotes: 2

Related Questions