OpenLayers投影

Question

I have a little problem with OpenLayers 3. I have the following script:

var map = new ol.Map({
    view : new ol.View({
        center : [5.611155, 52.238879],
        projection : 'EPSG:4326',
        zoom : 8.5,
        minZoom : 8.5,
        maxZoom : 12.5
    }),
    layers : [
        new ol.layer.Tile({
            source : new ol.source.OSM()
        }),

    ],
    target : 'map'
});

This should, if I am not mistaken, show a map centred on a place in The Netherlands. But instead of showing a map, I only see blue. Even if I set the zoom to 1, there is no world to see.

The problem doesn't seem to be there if I remove the projection attribute from the view. But then of course I should give all coordinates in another coordinate system, which is not possible because I depend on other systems as well.

When I removed the projection attribute from the view attribute and loaded a GeoJSON file like this:

new ol.layer.Vector({
  source: new ol.source.GeoJSON({
    projection: 'EPSG:4326',
    url: 'data/map.geojson'
  })
})

It should place a layer on top of The Netherlands, but instead the GeoJSON was shown somewhere in Africa.

Can someone help me?

Answer 1

Openstreetmap has a different projection than OL3. OSM uses EPSG:900913 and when you uses it as background you have to use it as your main projection.

This will work for the first part of your problem:

var centerpos = [5.611155, 52.238879]; // Your original position in LatLon
var newpos = ol.proj.transform(centerpos,'EPSG:4326','EPSG:900913');
var map = new ol.Map({
    view : new ol.View({
        projection : 'EPSG:900913', // OSM projection
        center : newpos,
        zoom : 8.5,
        minZoom : 8.5,
        maxZoom : 12.5
    }),
    layers: [
        new ol.layer.Tile({
               source: new ol.source.OSM()
            })
         ],
   target : 'map'
});

For your last problem about GeoJson I think it will work because you set the projection (eventually set the projection in the source), but I haven't tested it.