1 | var map, vector; |
---|
2 | |
---|
3 | function init(){ |
---|
4 | map = new OpenLayers.Map('map', { |
---|
5 | projection: 'EPSG:31467', |
---|
6 | maxResolution: 3457.03125, |
---|
7 | units: 'm', |
---|
8 | numZoomLevels: 1, |
---|
9 | controls: [ |
---|
10 | new OpenLayers.Control.Attribution({ |
---|
11 | div: document.getElementById('attribution') |
---|
12 | }), |
---|
13 | new OpenLayers.Control.MousePosition({ |
---|
14 | div: document.getElementById('mouse-position-31467'), |
---|
15 | prefix: 'Coordinates: ', |
---|
16 | suffix: ' (in <a href="http://spatialreference.org/ref/epsg/' |
---|
17 | + '31467/">EPSG:31467</a>)' |
---|
18 | }), |
---|
19 | new OpenLayers.Control.MousePosition({ |
---|
20 | div: document.getElementById('mouse-position-4326'), |
---|
21 | displayProjection: new OpenLayers.Projection('EPSG:4326'), |
---|
22 | prefix: 'Coordinates: ', |
---|
23 | suffix: ' (in <a href="http://spatialreference.org/ref/epsg/' |
---|
24 | + '4326/">EPSG:4326</a>)' |
---|
25 | }) |
---|
26 | ], |
---|
27 | maxExtent: new OpenLayers.Bounds(3146150, 5223600, 4031150, 6108600) |
---|
28 | }); |
---|
29 | var germany_gk3 = new OpenLayers.Layer.WMS( |
---|
30 | 'Germany (MetaSpatial)', |
---|
31 | 'http://www.metaspatial.net/cgi-bin/germany-wms', |
---|
32 | { |
---|
33 | layers: 'germany' |
---|
34 | }, |
---|
35 | { |
---|
36 | singleTile: true, |
---|
37 | ratio: 1.0, |
---|
38 | attribution: 'Background WMS offered without restrictions by ' |
---|
39 | + '<a href="http://www.metaspatial.net/">MetaSpatial</a>' |
---|
40 | } |
---|
41 | ); |
---|
42 | |
---|
43 | vector = new OpenLayers.Layer.Vector(); |
---|
44 | map.addLayers( [ germany_gk3, vector ] ); |
---|
45 | |
---|
46 | map.zoomToMaxExtent(); |
---|
47 | } |
---|
48 | |
---|
49 | function addVector(x, y, btn){ |
---|
50 | var status = "Transformed ", |
---|
51 | geometry = new OpenLayers.Geometry.Point(x, y); |
---|
52 | |
---|
53 | status += '<br /><code class="emph"> ' |
---|
54 | + geometry.toString() + '</code> to'; |
---|
55 | |
---|
56 | geometry.transform( |
---|
57 | new OpenLayers.Projection('EPSG:4326'), |
---|
58 | new OpenLayers.Projection('EPSG:31467') |
---|
59 | ); |
---|
60 | |
---|
61 | status += '<br /><code class="emph"> ' |
---|
62 | + geometry.toString() + '</code>.'; |
---|
63 | document.getElementById('status').innerHTML = status; |
---|
64 | |
---|
65 | var feature = new OpenLayers.Feature.Vector(geometry, {}, { |
---|
66 | strokeColor: '#333333', |
---|
67 | strokeOpacity: 1, |
---|
68 | strokeWidth: 2, |
---|
69 | fillColor: '#9966cc', |
---|
70 | fillOpacity: 0.9, |
---|
71 | pointRadius: 12, |
---|
72 | graphicName: 'star' |
---|
73 | }); |
---|
74 | vector.addFeatures([feature]); |
---|
75 | btn.disabled = true; |
---|
76 | } |
---|
77 | function addOutline(btn) { |
---|
78 | var wkt = 'POLYGON((' |
---|
79 | + ' 9.921906 54.983104, 9.939580 54.596642,' |
---|
80 | + '10.950112 54.363607,10.939467 54.008693,11.956252 54.196486,' |
---|
81 | + '12.518440 54.470371,13.647467 54.075511,14.119686 53.757029,' |
---|
82 | + '14.353315 53.248171,14.074521 52.981263,14.437600 52.624850,' |
---|
83 | + '14.685026 52.089947,14.607098 51.745188,15.016996 51.106674,' |
---|
84 | + '14.570718 51.002339,14.307013 51.117268,14.056228 50.926918,' |
---|
85 | + '13.338132 50.733234,12.966837 50.484076,12.240111 50.266338,' |
---|
86 | + '12.415191 49.969121,12.521024 49.547415,13.031329 49.307068,' |
---|
87 | + '13.595946 48.877172,13.243357 48.416115,12.884103 48.289146,' |
---|
88 | + '13.025851 47.637584,12.932627 47.467646,12.620760 47.672388,' |
---|
89 | + '12.141357 47.703083,11.426414 47.523766,10.544504 47.566399,' |
---|
90 | + '10.402084 47.302488, 9.896068 47.580197, 9.594226 47.525058,' |
---|
91 | + ' 8.522612 47.830828, 8.317301 47.613580, 7.466759 47.620582,' |
---|
92 | + ' 7.593676 48.333019, 8.099279 49.017784, 6.658230 49.201958,' |
---|
93 | + ' 6.186320 49.463803, 6.242751 49.902226, 6.043073 50.128052,' |
---|
94 | + ' 6.156658 50.803721, 5.988658 51.851616, 6.589397 51.852029,' |
---|
95 | + ' 6.842870 52.228440, 7.092053 53.144043, 6.905140 53.482162,' |
---|
96 | + ' 7.100425 53.693932, 7.936239 53.748296, 8.121706 53.527792,' |
---|
97 | + ' 8.800734 54.020786, 8.572118 54.395646, 8.526229 54.962744,' |
---|
98 | + ' 9.282049 54.830865, 9.921906 54.983104))', |
---|
99 | feature = new OpenLayers.Format.WKT().read(wkt), |
---|
100 | geometry = feature.geometry.transform( |
---|
101 | new OpenLayers.Projection('EPSG:4326'), |
---|
102 | new OpenLayers.Projection('EPSG:31467') |
---|
103 | ), |
---|
104 | style = { |
---|
105 | strokeColor: '#9966cc', |
---|
106 | strokeOpacity: 1, |
---|
107 | strokeWidth: 5, |
---|
108 | fillColor: '#ffffff', |
---|
109 | fill: false |
---|
110 | }, |
---|
111 | transformedFeature = new OpenLayers.Feature.Vector(geometry, {}, style); |
---|
112 | |
---|
113 | vector.addFeatures([transformedFeature]); |
---|
114 | document.getElementById('status').innerHTML = 'Transformed polygon'; |
---|
115 | btn.disabled = true; |
---|
116 | } |
---|
117 | |
---|
118 | function clearVectors(){ |
---|
119 | vector.removeAllFeatures(); |
---|
120 | var ids = [ |
---|
121 | 'btnCologne', |
---|
122 | 'btnBerlin', |
---|
123 | 'btnHamburg', |
---|
124 | 'btnMunich', |
---|
125 | 'btnGermany' |
---|
126 | ]; |
---|
127 | for (var i = 0, len = ids.length; i < len; i++) { |
---|
128 | var elem = document.getElementById(ids[i]); |
---|
129 | elem.disabled = false; |
---|
130 | } |
---|
131 | document.getElementById('status').innerHTML = ''; |
---|
132 | } |
---|