[GIS] Reprojecting vector layer in OpenLayers

coordinate systemopenlayers-2proj

I have a simple OpenLayers map, where I would like to display the OSM map (the base map, in EPSG:900913) with some points on top of it (a vector layer, in EPSG:3763).

I use proj4js. I do convert a point from EPSG:3763 to EPSG:900913, to set the map center. I also added the MousePosition control, and I can see the coordinates in the displayProjection system. so, the conversion runs fine between the two EPSGs.

I created a new vector layer, with the EPSG:3763 projection. I add a point to that layer pragmatically, in the layer projection EPSG:3763.

The point in the layer goes to Africa, into the ocean, around 0,0.

My questions is:
Does OpenLayers can reproject the entire layer? If it does, what am I doing wrong?

From the documentation, it not not clear if OL does the reprojection or not of the layer. In one example, the reprojection is done by MapServer. On the other, the reprojection is done when reading the geojson.

An alternative solution, is to convert the point coordinates to EPSG:900913 before adding them to the vector layer. But I really would like to see how to reproject an entire vector layer, in a different coordinate system.

My code is:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Multiple projections</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-compressed.js"></script>
        <script src="http://spatialreference.org/ref/epsg/3763/proj4js/"></script>
        <link rel="stylesheet" type="text/css" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/theme/default/style.css" />
        <script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/lib/OpenLayers.js"></script>
        <script>
            var map = null;
            function init() {
                var options = {
                    controls : [new OpenLayers.Control.MousePosition(), new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoom(), new OpenLayers.Control.LayerSwitcher()],
                    units : "m",
                    maxExtent : new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34),
                    maxResolution : 156543.0399,
                    numZoomLevels : 19,
                    projection : "EPSG:900913",
                    displayProjection : new OpenLayers.Projection("EPSG:3763")
                };
                map = new OpenLayers.Map('map', options);
                map.addLayer(new OpenLayers.Layer.OSM("Simple OSM Map"));

                var bounds = new OpenLayers.Bounds(-119191.40749999962, -300404.80399999936, 162129.08110000013, 276083.7674000006);
                var vector_layer = new OpenLayers.Layer.Vector("Point", {
                    units : "m",
                    projection : "EPSG:3763",
                    maxExtent : bounds,
                    maxResolution : 2251.90848203125
                });
                vector_layer.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-22000, 108000), {
                    name : "foo",
                    description : "bar"
                })]);
                map.addLayer(vector_layer);

                var fromProjection = map.displayProjection;
                var toProjection = new OpenLayers.Projection("EPSG:900913");
                var position = new OpenLayers.LonLat(-22000, 108000).transform(fromProjection, toProjection);
                console.log(position);
                map.setCenter(position, 8);
            }
        </script>
    </head>
    <body onload="init()">
        <div id='map' style='width: 400px; height: 500px;'></div>
    </body>
</html>

Happy mapping!

Best Answer

OpenLayers can reproject entire layer, but only at load time (from file or a server). Features added manually (using the addFeatures method) must have their geometries reprojected before adding to a layer.

Related Question