diff --git a/examples/using-proj4js.html b/examples/using-proj4js.html new file mode 100644 index 0000000000..f83fdbc8fc --- /dev/null +++ b/examples/using-proj4js.html @@ -0,0 +1,109 @@ + + + + + + + Using Proj4JS for vector reprojection + + + + + + + + + +

Using Proj4JS for vector reprojection

+
+ projection, proj, proj4js, reprojection, reproject, + transform, transformation, epsg, srs +
+

+ This example shows how to reproject vector features within + OpenLayers. The baselayer shows Germany in the projection + EPSG:31467 (GK 3). When one clicks on the buttons, features with + geometries originally in EPSG:4326 will be transformed to the + projection of the map on-the-fly. +

+

+ The features are internally reprojected with the JavaScript library + Proj4JS. Please note that usually + you would not inlude Proj4JS the way it is done in this example. + In a production environment you would furthermore have a local copy + of the Proj4JS-projection definition that is hotlinked in this + example. +

+
+
+ +
+
+
+ + diff --git a/examples/using-proj4js.js b/examples/using-proj4js.js new file mode 100644 index 0000000000..85232fae3e --- /dev/null +++ b/examples/using-proj4js.js @@ -0,0 +1,131 @@ +var map, vector; +function init(){ + map = new OpenLayers.Map('map', { + projection: 'EPSG:31467', + maxResolution: 3457.03125, + units: 'm', + numZoomLevels: 1, + controls: [ + new OpenLayers.Control.Attribution({ + div: $('attribution') + }), + new OpenLayers.Control.MousePosition({ + div: $('mouse-position-31467'), + prefix: 'Coordinates: ', + suffix: ' (in EPSG:31467)' + }), + new OpenLayers.Control.MousePosition({ + div: $('mouse-position-4326'), + displayProjection: new OpenLayers.Projection('EPSG:4326'), + prefix: 'Coordinates: ', + suffix: ' (in EPSG:4326)' + }) + ], + maxExtent: new OpenLayers.Bounds(3146150, 5223600, 4031150, 6108600) + }); + var germany_gk3 = new OpenLayers.Layer.WMS( + 'Germany (MetaSpatial)', + 'http://www.metaspatial.net/cgi-bin/germany-wms', + { + layers: 'germany' + }, + { + singleTile: true, + ratio: 1.0, + attribution: 'Background WMS offered without restrictions by ' + + 'MetaSpatial' + } + ); + + vector = new OpenLayers.Layer.Vector(); + map.addLayers( [ germany_gk3, vector ] ); + + map.zoomToMaxExtent(); +} + +function addVector(x, y, btn){ + var status = "Transformed ", + geometry = new OpenLayers.Geometry.Point(x, y); + + status += '
' + + geometry.toString() + ' to'; + + geometry.transform( + new OpenLayers.Projection('EPSG:4326'), + new OpenLayers.Projection('EPSG:31467') + ); + + status += '
' + + geometry.toString() + '.'; + $('status').innerHTML = status; + + var feature = new OpenLayers.Feature.Vector(geometry, {}, { + strokeColor: '#333333', + strokeOpacity: 1, + strokeWidth: 2, + fillColor: '#9966cc', + fillOpacity: 0.9, + pointRadius: 12, + graphicName: 'star' + }); + vector.addFeatures([feature]); + btn.disabled = true; +} +function addOutline(btn) { + var wkt = 'POLYGON((' + + ' 9.921906 54.983104, 9.939580 54.596642,' + + '10.950112 54.363607,10.939467 54.008693,11.956252 54.196486,' + + '12.518440 54.470371,13.647467 54.075511,14.119686 53.757029,' + + '14.353315 53.248171,14.074521 52.981263,14.437600 52.624850,' + + '14.685026 52.089947,14.607098 51.745188,15.016996 51.106674,' + + '14.570718 51.002339,14.307013 51.117268,14.056228 50.926918,' + + '13.338132 50.733234,12.966837 50.484076,12.240111 50.266338,' + + '12.415191 49.969121,12.521024 49.547415,13.031329 49.307068,' + + '13.595946 48.877172,13.243357 48.416115,12.884103 48.289146,' + + '13.025851 47.637584,12.932627 47.467646,12.620760 47.672388,' + + '12.141357 47.703083,11.426414 47.523766,10.544504 47.566399,' + + '10.402084 47.302488, 9.896068 47.580197, 9.594226 47.525058,' + + ' 8.522612 47.830828, 8.317301 47.613580, 7.466759 47.620582,' + + ' 7.593676 48.333019, 8.099279 49.017784, 6.658230 49.201958,' + + ' 6.186320 49.463803, 6.242751 49.902226, 6.043073 50.128052,' + + ' 6.156658 50.803721, 5.988658 51.851616, 6.589397 51.852029,' + + ' 6.842870 52.228440, 7.092053 53.144043, 6.905140 53.482162,' + + ' 7.100425 53.693932, 7.936239 53.748296, 8.121706 53.527792,' + + ' 8.800734 54.020786, 8.572118 54.395646, 8.526229 54.962744,' + + ' 9.282049 54.830865, 9.921906 54.983104))', + feature = new OpenLayers.Format.WKT().read(wkt), + geometry = feature.geometry.transform( + new OpenLayers.Projection('EPSG:4326'), + new OpenLayers.Projection('EPSG:31467') + ), + style = { + strokeColor: '#9966cc', + strokeOpacity: 1, + strokeWidth: 5, + fillColor: '#ffffff', + fill: false + }, + transformedFeature = new OpenLayers.Feature.Vector(geometry, {}, style); + + vector.addFeatures([transformedFeature]); + $('status').innerHTML = 'Transformed polygon'; + btn.disabled = true; +} + +function clearVectors(){ + vector.removeAllFeatures(); + var ids = [ + 'btnCologne', + 'btnBerlin', + 'btnHamburg', + 'btnMunich', + 'btnGermany' + ]; + for (var i = 0, len = ids.length; i < len; i++) { + var elem = $(ids[i]); + elem.disabled = false; + } + $('status').innerHTML = ''; +}