OpenLayers Transform Function
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<body onload="init()">
<div id="transformation">Centerpoint 4326:
<div id="centerpoint4326"></div>
<br />Centerpoint 3857:
<div id="centerpoint3857"></div>
<br />
<button value="zoom to point2" onclick="myFunction()">Zoom To Point 2</button>
</div>
<div id="map"></div>
</body>
CSS
#map {
width: 600px;
height: 600px;
}
#transformation div {
font-weight:bold;
}
button
{
margin-bottom:10px;
}
JavaScript
var lon = 13.31576;
var lat = 52.3209;
var zoom = 16;
var map;
function init() {
map = new OpenLayers.Map('map', {
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
});
var vlayer = new OpenLayers.Layer.Vector("Point", {
displayOutsideMaxExtent: true
});
map.addLayers([new OpenLayers.Layer.OSM(), vlayer]);
var center_4326 = new OpenLayers.LonLat(lon, lat);
document.getElementById("centerpoint4326").innerHTML = center_4326.toString();
var centerpoint = center_4326.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject());
document.getElementById("centerpoint3857").innerHTML = centerpoint.toString();
// wgs84-coordinates that need to be reprojected
var point1 = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()));
// epsg3857-Coordinates without the need to reproject
var point2 = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(4193332, 7486473));
vlayer.addFeatures([point1,point2]);
console.log(vlayer.features[0]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(centerpoint, zoom);
}
function myFunction() {
var lat = 7486473;
var lon = 4193332;
var lonlat = new OpenLayers.LonLat(lon, lat);
map.setCenter(lonlat);
}