Added an example that shows how to use the popular Proj4JS library.

2011-11-18 23:48:20 +01:00
parent f63e5fe060
commit c0138022fa
2 changed files with 207 additions and 0 deletions
--- a/examples/using-proj4js.js
+++ b/examples/using-proj4js.js
@@ -0,0 +1,115 @@
+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 <a href="http://spatialreference.org/ref/epsg/' 
+                    + '31467/">EPSG:31467</a>)'
+            }),
+            new OpenLayers.Control.MousePosition({
+                div: $('mouse-position-4326'),
+                displayProjection: new OpenLayers.Projection('EPSG:4326'),
+                prefix: 'Coordinates: ',
+                suffix: ' (in <a href="http://spatialreference.org/ref/epsg/' 
+                    + '4326/">EPSG:4326</a>)'
+            })
+        ],
+        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 withoud restrictions by '
+                + '<a href="http://www.metaspatial.net/">MetaSpatial</a>'
+        }
+    );
+    
+    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 += '<br /><code style="font-weight: bold">  ' 
+        + geometry.toString() + '</code> to';
+    
+    geometry.transform(
+        new OpenLayers.Projection('EPSG:4326'), 
+        new OpenLayers.Projection('EPSG:31467')
+    );
+    
+    status += '<br /><code style="font-weight: bold">  ' 
+        + geometry.toString() + '</code>.';
+    $('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;
+}