Reprojecting base layers in OpenLayers

Question

I have vector/topo/image tiled maps for some places in North America which were published as ArcGIS Server REST service. These maps (A) are based in EPSG:26912 projection. Now I want to use these as base map for my OpenLayers web app; besides, I also want to consume other base map sources (B), e.g., OpenStreetmap, Google Maps, ESRI, etc. Since most of these maps are in EPSG:900913 which is spherical Mercator projection to my knowledge, if I just add these base map layers into OpenLayers map component, the group A and group B won't overlay correctly, which means they are displayed as separate maps.

I know this is something related to projection, and might need some code with proj4js, however, as a newbie, I don't really know what to start with.

Basically, I want to put OSM/Google maps as the base map for the whole world in tier 1, then put EPSG:26912 base maps for some places in North America in tier 2, and put other WMS or WFS in the top tier.

do I need to transform EPSG:26912 to EPSG:900913 or opposite? I guess I should use EPSG:900913 as the base projection.

Answer 1

OpenLayers can transform vector layers (like WFS). If your vector layer is in EPSG:900913 or EPSG:4326 OpenLayers can handle the transformation itself, otherwise, it needs Proj4js included.

There are examples of how to use OpenLayers with Proj4js.

Raster Layers cannot be transformed by OpenLayers. If you need to include them in a different projection, you have to reproject them by yourself or use a reprojecting WMS proxy like GeoWebCache.

Answer 2

Any good WMS should be able to do the reprojection for you. However I have no idea if ArcGIS Server is a good WMS. If it is unable to provide the layer in 900913 then consider using GeoServer or MapServer as a cascading WMS to handle the reprojection for you.

Answer 3

I'm no OpenLayers guru, but you need to specify the projection of the map object. I think it defaults to WGS84....I could be wrong i might even be the source of the first layer added to the map.

Anyway try something like this (Change the bounds as appropriate)

var googleMercator = new OpenLayers.Projection("EPSG:900913");
var wgs84 = new OpenLayers.Projection("EPSG:4326");
var options = {
    projection: googleMercator,
    units: "m",
    numZoomLevels: 18,
    maxResolution: 156543.0339,
    maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34),
    displayProjection: wgs84,
    controls:[new OpenLayers.Control.Navigation()]}

map = new OpenLayers.Map('div', options);

But then remember when you want to set the map center by using a lat,lon you have to project that coordinate from WGS to GoogleMercator like this (using the wgs84 and googleMercator variable from above).

 var mapCenter = new OpenLayers.LonLat(148,-36);
 mapCenter.transform(wgs84, googleMercator);
 map.setCenter(mapCenter,8);

Answer 4

First thing is that define your map projection and display projection as following:

map.projection = "EPSG:23030";
map.displayProjection = new OpenLayers.Projection("EPSG:4326");

Adding coordinate conversion

Once you start using different projections, you have to start thinking about the possibility of converting coordinates from one projection to another, either when displaying those coordinates, or when reading in vector data in a different coordinate system from the map's. As stated before, this conversion logic is not provided by OL, so you have to use Proj4js, which you will have to include in your page:

<script src="http://proj4js.org/lib/proj4js-compressed.js"></script>

Proj4js.defs["EPSG:23030"] = "+proj=utm +zone=30 +ellps=intl +towgs84=-131,-100.3,-163.4,-1.244,-0.020,-1.144,9.39 +units=m +no_defs";

after definition you can do it by transform method:

var lonlat = new OpenLayers.LonLat(-3.57138, 39.8384);
lonlat.transform(map.displayProjection, map.baseLayer.projection);
map.setCenter(lonlat, 5);