• 
• 
• 
• 
• 
• 
• 
• 0

März 2010

Flash und Geodaten

Ich hier – du da

(Link zum Artikel: http://www.createordie.de/cod/artikel/2930)

Vorab gefragt: Was sind Geodaten überhaupt? Stark vereinfacht geantwortet, stellen Geodaten eine insbesondere durch Computer verarbeitungsfähige Form von Geoinformationen dar und sind digitale Informationen, denen auf der Erdoberfläche eine bestimmte räumliche Lage zugewiesen werden kann. Zweidimensional z. B. hat jeder Punkt eine x- und y-Koordinate, die sich auf einer Ebene, in unserem Fall einer normalen Kartendarstellung, abbilden lassen.

Text: Frank Reitberger

Der Quellcode steht auch als Download bereit.

Diese Kartendarstellung wiederum müssen wir nicht von der Pieke auf selbst entwickeln, sondern können an dieser Stelle bequem auf gängige APIs wie Virtual Earth von Microsoft oder Google Maps zurückgreifen.

Das Kartenmaterial

Ich habe mich kurzerhand für die Google Maps API entschieden, da diese gut dokumentiert ist und es eine Vielzahl an Arbeitsbeispielen und Tutorials für diese API gibt. Eine kleine Hürde gilt es allerdings vorab zu nehmen: Um die Google Maps API verwenden zu können, braucht man einen Maps-API-Schlüssel. Diesen erhält man zwar kostenlos, muss zuvor aber ein Google-Konto eröffnen. Dafür bekommt man letztlich jedoch eine wirklich ausgereifte Anwendung, mit der sich auch sofort arbeiten lässt.

Geographische Länge und Breite bestimmen

Ist man in Besitz des Maps-API-Schlüssels, kann direkt mit dem Setup von Kartenmaterial und GUI losgelegt werden. Hierzu initialisiert man zuerst über new Map() eine neue Karte, verifiziert sich per Maps-API-Schlüssel und richten Basisfunktionalitäten wie den Kartengeländetyp (Karte, Satellit, Hybrid, Gelände) und voreingestellte Zoomstufe ein (Listing 1).

1. package {
4. ///////////////////////////////////
5. // import used classes
6. ///////////////////////////////////
8. import flash.display.BitmapData;
9. import flash.display.Sprite;
10. import flash.display.MovieClip;
11. import flash.display.Bitmap;
12. import flash.geom.Rectangle;
13. import flash.geom.Point;
15. import fl.controls.ComboBox;
16. import fl.controls.TextInput;
17. import fl.controls.Button;
18. import fl.data.DataProvider;
19. import flash.events.Event;
20. import flash.events.MouseEvent;
21. import flash.events.KeyboardEvent;
23. import GeoMapper;
25. import com.google.maps.LatLng;
26. import com.google.maps.Map;
27. import com.google.maps.MapEvent;
28. import com.google.maps.MapType;
29. import com.google.maps.MapMouseEvent;
30. import com.google.maps.services.ClientGeocoder;
31. import com.google.maps.services.GeocodingEvent;
32. import com.google.maps.styles.*;
33. import com.google.maps.overlays.*;
34. import com.google.maps.controls.*;
35. import com.google.maps.wrappers.*;
37. import caurina.transitions.Tweener;
38. import caurina.transitions.properties.FilterShortcuts;
39. import caurina.transitions.properties.DisplayShortcuts;
41. ///////////////////////////////////
42. // class
43. ///////////////////////////////////
45. public class CoreCanvas {
47. [Embed(source = '../lib/markerLogo.png')] private var markerLogo:Class;
49. private var container :Sprite;
50. private var mapNode :Sprite;
51. private var canvas :BitmapData;
53. private var tp_surface :BitmapData;
54. private var lm_surface :BitmapData;
55. private var rm_surface :BitmapData;
56. private var bm_surface :BitmapData;
58. private var markerCanvas :Bitmap = new markerLogo();
60. private var naviNode :MovieClip = new naviBgClip();
62. private var infoNode :MovieClip = new infoWindowClip();
64. public var comboNode :ComboBox;
65. public var typesProvider :DataProvider;
66. public var searchNode :TextInput;
67. public var searchBtn :Button;
69. private var mapper :GeoMapper;
71. public var map :Map;
72. private var geocoder :ClientGeocoder;
73. private var geoDataPool :Array;
74. private var marker :Marker;
76. public var zoomFactor :Number = 10;
78. ///////////////////////////////
79. // class constructor
80. ///////////////////////////////
82. public function CoreCanvas():void { }
85. ///////////////////////////////////
86. // launch
87. ///////////////////////////////////
89. public function launch(container:Sprite):void {
91. this.container = container;
92. this.mapNode = new Sprite();
94. this.tp_surface = new BitmapData( 800, 213, false, 0x000000 );
95. this.lm_surface = new BitmapData( 400, 213, false, 0x000000 );
96. this.rm_surface = new BitmapData( 400, 213, false, 0x000000 );
98. this.bm_surface = new BitmapData( 800, 213, false, 0x000000 );
100. this.canvas = new BitmapData( 800, 640, false, 0x000000 );
102. FilterShortcuts.init();
103. DisplayShortcuts.init();
107. ///////////////////////////////////
108. // setup
109. ///////////////////////////////////
111. setup();
114. ///////////////////////////////////
115. // paint
116. ///////////////////////////////////
118. paint();
121. }
124. ///////////////////////////////////
125. // setup
126. ///////////////////////////////////
128. private function setup():void {
130. initMaps();
131. initNavigation();
133. }
136. ///////////////////////////////////
137. // initialize maps
138. ///////////////////////////////////
140. private function initMaps():void {
143. ///////////////////////////////////
144. // initialize google.map
145. ///////////////////////////////////
147. this.map = new Map();
148. this.map.key = "euer google maps api key hier"
150. this.map.setSize( new Point( 800, 640 ) );
151. this.map.y = 0.0;
154. ///////////////////////////////////
155. // add
156. ///////////////////////////////////
158. this.container.addChild( this.mapNode );
159. this.mapNode.addChild( map );
160. this.mapNode.alpha = 0.05;
162. }
166. private function onMapReady(event:Event):void {
168. this.map.setCenter( new LatLng( 51.26, 6.80 ), this.zoomFactor, MapType[ this.comboNode.selectedItem.data ]);
170. this.geocoder = new ClientGeocoder();
172. this.map.addEventListener( MouseEvent.MOUSE_WHEEL, mapZoom );
174. }
177. ///////////////////////////////////
178. // initialize navigation
179. ///////////////////////////////////
181. private function initNavigation():void {
183. ///////////////////////////////////
184. // get component.assets
185. ///////////////////////////////////
187. this.searchNode = TextInput( this.naviNode.getChildByName( "searchTxt" ) );
189. this.searchBtn = Button( this.naviNode.getChildByName( "searchBtn" ) );
191. this.comboNode = ComboBox( this.naviNode.getChildByName( "mapTypes" ) );
194. ///////////////////////////////////
195. // initialize text.input
196. ///////////////////////////////////
198. this.searchNode.x = 10.0;
199. this.searchNode.y = 8.0;
200. this.searchNode.setSize( 180, 22 );
202. this.searchNode.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler );
205. ///////////////////////////////////
206. // initialize search.button
207. ///////////////////////////////////
209. this.searchBtn.x = 200.0;
210. this.searchBtn.y = 8.0;
211. this.searchBtn.label = "Suche starten."
212. this.searchBtn.setSize( 100, 22 );
214. this.searchBtn.addEventListener( MouseEvent.CLICK, initSearch );
218. ///////////////////////////////////
219. // initialize combo.box data
220. ///////////////////////////////////
222. this.typesProvider = new DataProvider();
224. this.typesProvider.addItem( { label: "Karte", data: "NORMAL_MAP_TYPE" } );
226. this.typesProvider.addItem( { label: "Satellit", data: "SATELLITE_MAP_TYPE" } );
228. this.typesProvider.addItem( { label: "Hybrid", data: "HYBRID_MAP_TYPE" } );
230. this.typesProvider.addItem( { label: "Gelände", data: "PHYSICAL_MAP_TYPE" } );
233. ///////////////////////////////////
234. // initialize combo.box
235. ///////////////////////////////////
237. this.comboNode.x = 650.0;
238. this.comboNode.y = 8.0;
239. this.comboNode.setSize( 140, 22 );
241. this.comboNode.addEventListener( Event.CHANGE, mapTypeSelect );
243. this.comboNode.dataProvider = this.typesProvider;
246. ///////////////////////////////////
247. // initialize info.node
248. ///////////////////////////////////
250. this.infoNode.visible = false;
251. this.infoNode.alpha = 0;
253. }
256. ///////////////////////////////////
257. // zoom map(s)
258. ///////////////////////////////////
260. private function mapZoom( event:MouseEvent ):void {
262. if ( event.delta > 0 ) {
264. this.map.zoomIn();
266. } else {
268. this.map.zoomOut();
270. }
272. }
274. ///////////////////////////////////
275. // paint map
276. ///////////////////////////////////
278. private function paint():void {
280. this.mapper = new GeoMapper();
281. this.mapper.surface_tp = this.tp_surface;
282. this.mapper.surface_lm = this.lm_surface;
283. this.mapper.surface_rm = this.rm_surface;
284. this.mapper.surface_bm = this.bm_surface;
288. ///////////////////////////////////
289. // add
290. ///////////////////////////////////
292. this.mapper.mouseEnabled = false;
293. this.container.addChild( this.mapper );
294. this.container.addChild( this.naviNode );
295. this.mapNode.addChild( this.infoNode );
298. ///////////////////////////////////
299. // event(s)
300. ///////////////////////////////////
302. this.map.addEventListener( MapEvent.MAP_READY, onMapReady );
303. this.container.addEventListener( Event.ENTER_FRAME, onUpdateFrame );
305. }
308. ///////////////////////////////////
309. // change: map material
310. ///////////////////////////////////
312. private function mapTypeSelect( event:Event ):void {
314. this.map.setMapType( MapType[ this.comboNode.selectedItem.data ] );
316. }
318. }
320. }

Der Quellcode steht auch als Download bereit.

• 1
• 2
• 3
• 4

 

• Gute Kommentare werden belohnt.
•   (optional)
•   (Kommentar abonnieren/Gravatar - wird nicht veröffentlicht)
•    Benachrichtige mich bei nachfolgenden Kommentaren per E-Mail
• Dein Kommentar (HTML- und sonstige Codeelemente werden nicht angezeigt)
• -+
• 

• flash,
• frank reitberger,
• geodaten,
• google maps api,
• lbs