Openlayers 3 Reproject EPSG:4326 vector to EPSG:3857

Question

I am needing to transform GeoJSON vector data from EPSG:4326 to EPSG:3857...

I have a map...

var olMapDiv = document.getElementById('olmap');
            control.map = new ol.Map({
                target: olMapDiv,
                renderer: 'canvas',
                layers: layers,
                interactions: ol.interaction.defaults({
                    altShiftDragRotate: false,
                    dragPan: false,
                    rotate: false
                }).extend([new ol.interaction.DragPan({ kinetic: null })]),
                pixelRatio: 1,
                loadTilesWhileAnimating: true,
                loadTilesWhileInteracting: true,
                view: view
            });

and a view...

var view = new ol.View({
                // make sure the view doesn't go beyond the 22 zoom levels of Google Maps
                maxZoom: 21,
                projection: 'EPSG:3857',
                center: [0, 0],
                zoom: 0
            });

I define my geoJson Object...

var geoJsonObj = {
                        'type': 'Feature',
                        'geometry': JSON.parse(shape),
                        'name': 'V',
                        'id': V.vID

                    }

I try to read the features into a open layers Vector object and provide projection parameters...

var vectorSource = new ol.source.Vector({
                        features: (new ol.format.GeoJSON()).readFeatures(geoJsonObj, {defaultDataProjection:"EPSG:4326",featureProjection:"EPSG:3857"})
                    });

Then I use the "vectorSource" above in a new Vector layer...

vectors = new ol.layer.Vector({                           
                        title: V.vID,
                        source: vectorSource,
                        id: V.vID,
                        name: 'V',
                        label: response.VList[key].Acres,
                        fill: response.VList[key].Shade,
                        stroke: defaultStrokeHex,
                        style: function (feature, resolution) {
                            var text = resolution * 100000 < 10 ? response.VList[key].Acres : '';

                            if (text != "") {
                                styleCache[text] = [new ol.style.Style({
                                    stroke: new ol.style.Stroke({
                                        color: '#319FD3',
                                        width: 1
                                    }),
                                    text: new ol.style.Text({
                                        font: '12px Calibri,sans-serif',
                                        text: text,
                                        fill: new ol.style.Fill({
                                            color: '#000'
                                        }),
                                        stroke: new ol.style.Stroke({
                                            color: '#fff',
                                            width: 3
                                        })
                                    }),
                                    fill: new ol.style.Fill({
                                        color: rcisWebMapUtilities.convertHex(response.VList[key].Shade, '0.5')
                                    })
                                })];
                            }
                            else if (text == "") {
                                styleCache[text] = [new ol.style.Style({
                                    fill: new ol.style.Fill({
                                        color: rcisWebMapUtilities.convertHex(response.VList[key].Shade, '0.5')
                                    })
                                })
                                ]
                            } return styleCache[text];
                        }


                    });

No matter what I do I either see the vector drawn...but in EPSG:4326 or nothing loads...

I've spent way too much time trying to figure out how to get OpenLayers3 to do this...Any help is greatly appreciated!!

Virtuosic

Answer 1

If you use EPSG:4326 in your view then your geojson vector declaration should be

var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject, { 
dataProjection: 'EPSG:4326',
featureProjection:'EPSG:4326' })
});

If you use EPSG:3857 in your view use this:

var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject, { 
dataProjection: 'EPSG:4326',
featureProjection:'EPSG:3857' })
});

Just to explain dataProjection is the source coords. Means the epsg of your coordinates within the geojson file. While featureProjection is the EPSG of your view and thus the EPSG of your map. Means is the EPSG original coords should be trasformed.

So try to remember this rule: featureProjection and ol.View projection declaration should be equal.

Note that I am assuming your geojson coords are projected in EPSG:4326.

Apatetic

Great! Thanks for the response and the help!! Yes, the geojson is projected in EPSG:4326...I have made the edits(See above) you suggested in your response and now the map is not loading at all...for instance I don't even see the "ZoomSlider" added. – Virtuosic

No errors? No firebugs? Just not loading?? Would you like to provide a fiddle, so we can figure out what your problem is – Apatetic

It is working...what I wasn't seeing is that there was another error that was not being thrown that was causing page to load incorrectly...once I resolved the error everything works as expected. Thanks!! – Virtuosic

I was pretty sure there was a different error. That why I was asking for a fiddle. Glad you find your way out. – Apatetic

Thanks a lot for the brilliant explanation! I spent some time figuring this out and your answer was the one that actually helped me figure this out. – Excessive