[GIS] How should I work with Layers with different projections in openlayers-3

coordinate systemopenlayerstile-layervector-layer

I'm using openlayers-3.8.2. I have some ol.layer.Tile layers and ol.layer.Vector layers. The projection of ol.layer.Tile layers and ol.layer.Vector layers are different. ol.layer.Tile layers work with EPSG:3857 and ol.layer.Vector layers work with EPSG:4326.

What's the best solution for working with these two layers? Should I reproject ol.layer.Vector to EPSG:3857? How can I do that?

Best Answer

It depends on the use case of your application. Make some considerations:

  • Raster warping is not supported by OpenLayers. Is your map server propagating layers also in EPSG:4326? If not, you cannot use that projection.
  • If you can choose between the projections, which one suits you application better? Usual users are more familiar with Web Mercator (EPSG:3857), as it is widely used in the most popular web mapping applications, but it is basically useless for professional mapping, as it distorts the maps in every possible way, especially at lower latitudes. Equirectangular projection (EPSG:4326) has a lesser distortion, but it still unwanted for professional applications (e.g. cadastral mapping).
  • If you make a general web mapping application, which projection is more visually appealing for you, and your users?

After going through these considerations (maybe also some polling), you will surely know the answer for you question. For the vector transformation, it depends on how you construct the layers. If you use a static source, you can define the data projection in the format object:

new ol.format.GeoJSON({
    defaultDataProjection: 'EPSG:4326'
})

OpenLayers 3 will automatically transform the coordinates to the map's projection. If you load the data dynamically, you can define the projections, when you use the format object's readFeatures method:

var format = new ol.format.GeoJSON();
format.readFeatures(sourceToRead, {
    dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:3857'
})