Share
In diesem Tutorial zeige ich Ihnen, wie Sie mit Yahoo! Maps-API in Flash. Wir werden ein paar RSS-Feeds laden und Warnungen vor Naturkatastrophen anhand ihrer Längen- und Breitengrade darstellen.
Gehen Sie zu http://developer.yahoo.com/flash/maps/ und melden Sie sich für eine App-ID an.
Laden Sie auf der Seite Yahoo Map AS3 Component die neueste Version der Komponente herunter.
Wenn die Datei vollständig heruntergeladen ist, extrahieren Sie die ZIP-Datei. Navigieren Sie zum Flash-Ordner und installieren Sie die MXP-Datei.
Starten Sie Flash, öffnen Sie eine neue ActionScript 3.0-Datei und speichern Sie sie in einem neuen Ordner als "yahoo_map.fla"..
Ändern Sie die Bühnengröße auf 640x480. Navigieren Sie zur Registerkarte "Komponenten" und ziehen Sie eine Kopie der YahooMaps-Komponente auf die Bühne. Sobald es auf der Bühne ist, löschen Sie es. Dadurch wird eine Kopie in die Bibliothek gestellt, sodass wir von dort darauf zugreifen können.
Ziehen Sie eine Kopie der TextArea von der Komponentenregisterkarte. Ändern Sie im Eigenschaftenfenster die Größe der TextArea auf eine Breite von 640px und eine Höhe von 100px. Geben Sie eine X-Position von 0 und eine Y-Position von 330 an. Geben Sie schließlich den Instanznamen "textArea" an..
Ziehen Sie anschließend eine Kopie des RadioButton von der Komponentenregisterkarte. Kopieren Sie es dreimal, und fügen Sie es ein, so dass vier Instanzen der RadioButton-Komponente auf der Bühne vorhanden sind. Richten Sie sie nach oben aus und platzieren Sie sie gleichmäßig, sodass sie in einer geraden Linie nebeneinander liegen. Ziehen Sie sie anschließend unter die TextArea-Komponente.
Wählen Sie das erste Optionsfeld aus. Vergeben Sie den Instanznamen "radioAll". Wechseln Sie bei noch gewählter Schaltfläche zum Parameterfeld. Vergeben Sie den Gruppennamen "Disasters". Ändern Sie die Label-Eigenschaft in "All" und die ausgewählte Eigenschaft in "True"..
Wählen Sie das nächste Optionsfeld. Vergeben Sie einen Instanznamen für "radioEarth", denselben Gruppennamen für "Disasters", eine Bezeichnung für "Earthquakes" und belassen Sie die ausgewählte Eigenschaft als "false"..
Wählen Sie das dritte Optionsfeld. Sein Instanzname lautet "radioTsu", der Gruppenname ist "Disasters", die Bezeichnung ist "Tsunamis" und die ausgewählte Eigenschaft ist "false"..
Wählen Sie schließlich das vierte Optionsfeld. Es hat den Instanznamen "radioVolcano", der Gruppenname "Disasters", der Name "Volcanoes" und "false". Da wir zwischen den Schaltflächen wechseln können, haben wir ihnen den gleichen Gruppennamen gegeben. Platzieren Sie sie entsprechend, sodass sie gleichmäßig verteilt sind.
Erstellen Sie eine separate Ebene. Platzieren Sie die Ebene mit den TextArea- und RadioButton-Komponenten unter der Ebene. Wählen Sie im Bibliotheksfenster unten das neue Symbolsymbol aus. Erstellen Sie einen neuen leeren Movieclip. Ziehen Sie eine Instanz auf die Bühne in der neu erstellten Ebene und geben Sie ihr den Instanznamen "leer". Dieser Filmclip hält unsere Karte, wenn er geladen wird. Weisen Sie dem leeren Movieclip eine X- und Y-Position von 0 zu. Auf diese Weise wird er an der oberen linken Ecke der Bühne ausgerichtet.
Gehen Sie zu Datei> Neu und wählen Sie eine neue ActionScript-Datei aus. Speichern Sie die Datei in demselben Verzeichnis wie Ihre FLA-Datei "yahoo_map" mit dem Namen "yahoo_map.as". Geben Sie in Ihrem FLA-Dokument yahoo_map im Eigenschaftenfenster "yahoo_map" in das Feld Dokumentklasse ein. Dadurch wird Ihre Actionscript-Datei zur Document-Klasse für Ihre yahoo_map-FLA.
Dies ist die Grundeinstellung für unsere Dokumentenklasse:
package import flash.display.Sprite; öffentliche Klasse yahoo_map erweitert Sprite öffentliche Funktion yahoo_map ()
Dies sind die Anweisungen, die die YahooMap-API steuern werden
package import com.yahoo.maps.api.YahooMap; import com.yahoo.maps.api.YahooMapEvent; import com.yahoo.maps.api.core.location.LatLon; import com.yahoo.maps.api.markers.Marker; import flash.display.Sprite; öffentliche Klasse yahoo_map erweitert Sprite öffentliche Funktion yahoo_map ()
Fügen Sie diese einfach unter der YahooMaps-Importanweisung hinzu. Stellen Sie sicher, dass sie über der Klassendeklaration liegen.
package import com.yahoo.maps.api.YahooMap; import com.yahoo.maps.api.YahooMapEvent; import com.yahoo.maps.api.core.location.LatLon; import com.yahoo.maps.api.markers.Marker; import fl.controls.RadioButtonGroup; import fl.controls.RadioButton; import flash.display.Sprite; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.filters.DropShadowFilter; import flash.geom.ColorTransform; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLRequestMethod; import flash.net.URLVariables; importiere flash.text.AntiAliasType; importiere flash.text.Font; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; öffentliche Klasse yahoo_map erweitert Sprite öffentliche Funktion yahoo_map ()
Hier werden wir die globalen Variablen aufheben. Wir benötigen die App-ID, die Sie von der YahooMaps-Seite erhalten haben, und müssen später PHP verwenden, damit die Feeds in Flash geladen werden. Deshalb haben wir die CURL-Konstante. Stellen Sie sicher, dass diese unter der Klassendeklaration, aber über der öffentlichen Hauptfunktion stehen.
public class yahoo_map erweitert Sprite private statische const APPID: String = "YOUR APP ID"; private statische const-CURL: String = "curl.php"; private var karte: YahooMap; private var ds: DropShadowFilter; private var geo: Namespace; private var tsuArray: Array; private var tsuCounter: int = 0; private var-Farbe: ColorTransform; private var-Gruppe: RadioButtonGroup; öffentliche Funktion yahoo_map ()
Hier werden wir alle unsere Variablen instanziieren. Nach der Suche bei Google habe ich vier RSS-Feeds für Tsunami-Warnungen von weather.gov gefunden. Ich habe diese in die Variable tsuArray geladen, sodass ich sie einzeln laden kann. Der Geo-Namespace hilft dabei, die Breiten- und Längengrade aller RSS-Feeds zu ermitteln. Außerdem gibt es eine neue RadioButtonGroup, die das Umschalten der RadioButton-Komponenten auf der Bühne übernimmt. Zum Schluss rufe ich die handleMap-Funktion auf. Dadurch wird der Kartenladevorgang gestartet.
Accentsconagua
öffentliche Funktion yahoo_map () init (); private Funktion init (): void tsuArray = new Array ("http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_pacific.xml"), http://www.prh.noaa.gov/ptwc /feeds/ptwc_rss_hawaii.xml "," http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_indian.xml "," http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_caribe.xml "); geo = neuer Namespace ("http://www.georss.org/georss"); ds = neuer DropShadowFilter (2,90,0x00000,0,75,2,2,1,3); color = new ColorTransform (); group = new RadioButtonGroup ("Disasters"); handleMap (); An diesem Punkt arbeiten wir mit den Kartengrundlagen und verwenden unsere App-ID. Wenn wir die map.init () -Methode aufrufen, bestimmen wir auch die Größe, die die Map haben soll. Die Karte hat die Breite der Bühne und eine Höhe, die den oberen Rand der TextArea-Komponente berührt. Wir hören auch auf das Ereignis MAP_INITALIZE.
private Funktion handleMap (): void map = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330);
Wenn die Karte initialisiert wird, wird die Funktion onInit ausgelöst. Hier fügen wir die Karte dem leeren Movieclip hinzu, der auf der Bühne platziert wurde. Auf diese Weise wird die Karte unter den TextArea- und RadioButton-Komponenten geladen - für alle Fälle. Dann fügen wir die Widgets für Zoomen, Verschieben und Tippen hinzu. Diese steuern den Kartentyp, fügen die Fähigkeit hinzu, die Karte zu verschieben und die Zoomsteuerungen hinzuzufügen. Wir zentrieren die Karte auf 0,0.
Die Karte sucht nach einer neuen LatLon-Variablen, in die Sie zwei Zahlen einfügen. Ich habe 0,0 verwendet, um die Karte so festzulegen, dass sich Äquator und Prime Meridian treffen. Danach wird die Zoomstufe der Karten eingestellt. Dies ist auf die höchstmögliche Höhe eingestellt. Auf diese Weise können wir alle Warnungen vor Naturkatastrophen auf der ganzen Welt sehen. Als Nächstes rufen wir die Funktion auf, um mit dem Laden unserer RSS-Feeds zu beginnen.
private Funktion onInit (Ereignis: YahooMapEvent): void empty.addChild (map); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = new LatLon (0,0); Vulkane ();
Wir müssen für einen Moment aus Flash aussteigen und ein wenig PHP machen. Als ich mit diesem Projekt begann, wurde mir klar, dass die Feeds nicht auf meiner Website geladen werden. Eine schnelle und einfache Möglichkeit, die ich umgangen habe, war cURL. Ich habe einen nützlichen Beispielcode von Google gefunden. Ich bin mir nicht sicher, wo genau es herkam, aber ich benutze das gleiche Skript schon länger. Öffnen Sie eine neue PHP-Datei, fügen Sie den folgenden Code ein und speichern Sie ihn als "curl.php".
Nachdem wir nun die Funktion aufgerufen haben, um das Laden unseres Vulkanfutters zu starten, können wir uns ansehen, was in der Funktion passiert. Einfach gesagt, wir laden unsere curl.php-Seite, die den RSS-Feed lädt. Dann fügen wir einen Listener hinzu, wenn die Seite vollständig geladen ist.
private function volcanoes (): void var url: URLLoader = neuer URLLoader (); url.addEventListener (Event.COMPLETE, onVolcano); var vars: URLVariables = neue URLVariables (); var req: URLRequest = neue URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = "http://volcanoes.usgs.gov/rss/vhpcaprss.xml" req.data = vars; url.load (req);
Im ersten Feed gibt es einige interessante Features. Der wichtigste ist der geo: point. Dies ist der Längen- und Breitengrad der Warnung. In diesem Feed gibt es auch einen Farbcode, der die Warnstufe der Aktivität anzeigt. Wenn der Feed geladen ist, werden zwei XML-Listen geladen, die geladen werden. Eine ist für die Breite und Länge. Der andere ist für den Farbcode.
Die Listen werden durchlaufen und die neuen Marker werden auf der Karte erstellt. Den Markierungen werden benutzerdefinierte Filmclips hinzugefügt. Diese werden mit Funktionen erstellt, die ich bald beschreiben werde. Die Farbe der verschachtelten Movieclips wird mit der Eigenschaft "colorTransform" gesteuert. Nachdem der Feed geladen und die Marker platziert wurden, wird der nächste RSS-Feed geladen. Ich übergebe den Beschreibungstext auch an den neu erstellten Movieclip, damit ich ihn später anhand des Namens aufrufen kann, der dem Movieclip gegeben wurde.
private Funktion onVolcano (Ereignis: Ereignis): void var vol: Namespace = neuer Namespace ("http://volcano.wr.usgs.gov/rss/volcanons/1.0"); var xml: XML = neues XML (event.target.data); var pointList: XMLList = xml… geo :: point.text (); var colorList: XMLList = xml… vol :: colorcode.text (); var string: String; für (var i: uint; i Nun ist es Zeit, den RSS-Feed der Erdbeben zu laden. Die Funktionen funktionieren ähnlich wie zuvor.
private Funktion earthQuakes (): void var url: URLLoader = neuer URLLoader (); var vars: URLVariables = neue URLVariables (); var req: URLRequest = neue URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = "http://earthquake.usgs.gov/eqcenter/catalogs/1day-M2.5.xml" req.data = vars; url.addEventListener (Event.COMPLETE, onEarthQuake); url.load (req);
Die Unterschiede bestehen darin, dass es für diesen Feed keinen Farbcode gibt. Stattdessen ändere ich die Farbe einfach manuell in braun. Außerdem enthält die Beschreibung der Warnung einige HTML-Dateien. Ich habe einen regulären Ausdruck verwendet, den ich vor einiger Zeit von Google gefunden hatte, um den gesamten HTML-Code zu entfernen. Ohne dies zu tun, lädt die TextArea-Komponente ein Bild, das ich nicht wollte.
Eine weitere Sache ist, dass dies eine andere Art von RSS-Feed ist. Aus irgendeinem Grund (meiner Erfahrung nach) mögen Atom-Feeds nicht richtig analysiert werden. Der Weg dahin war, den Kindbaum zum ersten Punkt hinunterzuklettern. Außerdem hat der Elementknoten nicht immer die gleiche Anzahl von Kindern. Ich habe ein einfaches hinzugefügt ob Erklärung, um es zu berücksichtigen. Zum Schluss rufen wir die Funktion auf, um den letzten RSS-Feed zu laden.
private Funktion onEarthQuake (event: Event): void var xml: XML = neues XML (event.target.data); var list: XMLList = xml… geo :: point.text (); var string: String für (var i: uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ s] +))?) + \ s * | \ s *) \ /?> / gi; string = string.replace (pattern, ""); earth.desc = string; Tsunamis();
Hier beginnen wir die Tsunami-Feeds zu laden. Wir haben einen tsuCounter erstellt, damit wir die Anzahl jedes Mal erhöhen können, wenn ein Feed geladen wird. Wenn der Zähler das Ende des TsuArray erreicht, fügen wir die Änderungslistener der erstellten RadioButtonGroup hinzu. Da ich auf jede in jedem Array erstellte Markierung zugreifen möchte, füge ich tsuCounter am Anfang des Namens des Movieclips hinzu. Auf diese Weise kann ich auf die Beschreibung von 0Tsunami1 und 1Tsunami1 zugreifen.
Wenn alle Feeds geladen wurden, fügen wir den Event-Listener der RadioButtonGroup hinzu
private Funktion tsunamis (): void var url: URLLoader = neuer URLLoader (); var vars: URLVariables = neue URLVariables (); var req: URLRequest = neue URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = tsuArray [tsuCounter] req.data = vars; url.addEventListener (Event.COMPLETE, onTsu); url.load (req); private Funktion onTsu (Ereignis: Ereignis): void tsuCounter ++; if (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); else tsunamis (); var xml: XML = neues XML (event.target.data); var list: XMLList = xml… geo :: point.text (); var string: String; für (var i: uint; i
Mit diesen Funktionen werden die Markierungen hinzugefügt, das Aussehen der Markierungen gesteuert, der Längen- und Breitengrad der Markierungen festgelegt und die Movieclips in den Markierungen erstellt. Die drawMarker-Funktion erstellt eine neue Markierung, fügt einen Schatten hinzu, fügt dann den Movieclip hinzu, übergibt denselben Namen wie der Movieclip, ruft den Breiten- und Längengrad aus dem geladenen RSS-Feed ab und fügt schließlich die Ereignis-Listener hinzu. Der Marker wird im markerManager der Karte hinzugefügt. Die Funktion drawCircle zeichnet nur einen Kreis mit einer Breite von 10 Pixeln. Die getLatlon-Funktion übernimmt die übergebene Zeichenfolge, zerlegt sie und gibt die LatLon zurück. Die letzte Funktion, theColor, behandelt die verschiedenen Farben, die durch den Vulkan-Feed an sie übergeben werden.
private Funktion drawMarker (mc: MovieClip, string: String, Name: String): void var marker: Marker = new Marker (); marker.filters = [ds]; marker.addChild (mc); marker.latlon = getLatlon (Zeichenfolge); marker.name = name; map.markerManager.addMarker (Markierung); marker.addEventListener (MouseEvent.ROLL_OVER, onOver); marker.addEventListener (MouseEvent.CLICK, onClick); private Funktion drawCircle (): MovieClip var mc: MovieClip = neuer MovieClip (); mc.graphics.beginFill (0xFF0000, 1); mc.graphics.drawCircle (5,5,5); mc.graphics.endFill (); Rückkehr mc; private Funktion getLatlon (String: String): LatLon var Array: Array = string.split (/ [\ s] /); var latlon: LatLon = neues LatLon (Array [0], Array [1]); Rückkehr Latlon; private Funktion theColor (string: String): ColorTransform var int: uint; switch (string) case "ORANGE": int = 0xFD8000; brechen; Fall "GRÜN": int = 0x225E33; brechen; Voreinstellung: int = 0xFF0000; var ct: ColorTransform = new ColorTransform (); ct.color = int; Rückkehr ct;
Wenn der Benutzer über die Markierung fährt, wird die Beschreibung der Warnung in der TextArea-Komponente angezeigt. Dies wird über die Funktion onOver erledigt. Das Ziel wird unter Verwendung des übergebenen Namens als Markierung umgewandelt. Dann erhalten wir den Beschreibungstext, der an den in der Markierung geschachtelten Movieclip übergeben wurde, und senden ihn an die TextArea-Komponente. Das onClick-Ereignis schwenkt die Karte zu der markierten Marke. Dies geschieht mithilfe der map.panToLatLon () -Methode.
private Funktion onOver (Ereignis: MouseEvent): void var marker: Marker = Marker (map.markerContainer.getChildByName (event.target.name)) var mc: MovieClip = MovieClip (marker.getChildByName (event.target.name)); textArea.htmlText = mc.desc; private Funktion onClick (Ereignis: MouseEvent): void var marker: Marker = Marker (map.markerContainer.getChildByName (event.target.name)) map.panToLatLon (marker.latlon);
Das letzte Ereignis ist das Ereignis onChange. Dieses Ereignis deaktiviert alle Movieclips mit Ausnahme der ausgewählten Schaltflächen. Außerdem wird die Karte auf die letzte im RSS-Feed empfangene Warnung verschoben.
private Funktion onChange (Ereignis: Ereignis): void var g: RadioButtonGroup = RadioButtonGroup (event.target); var i: uint; var marker: Marker; var panTo: Markierung; switch (g.selection.name) case "radioVolcano": für (i = 0; i
So sieht der endgültige Code aus.
package import com.yahoo.maps.api.YahooMap; import com.yahoo.maps.api.YahooMapEvent; import com.yahoo.maps.api.core.location.LatLon; import com.yahoo.maps.api.markers.Marker; import fl.controls.RadioButtonGroup; import fl.controls.RadioButton; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.filters.DropShadowFilter; import flash.geom.ColorTransform; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLRequestMethod; import flash.net.URLVariables; importiere flash.text.AntiAliasType; importiere flash.text.Font; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; public class yahoo_map erweitert Sprite private statische const APPID: String = "YOUR APP ID"; private statische const-CURL: String = "curl.php"; private var karte: YahooMap; private var ds: DropShadowFilter; private var geo: Namespace; private var tsuArray: Array; private var tsuCounter: int = 0; private var-Farbe: ColorTransform; private var-Gruppe: RadioButtonGroup; öffentliche Funktion yahoo_map () init (); private Funktion init (): void color = new ColorTransform (); tsuArray = new Array ("http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_pacific.xml", "http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_hawaii.xml", " http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_indian.xml "," http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_caribe.xml "); geo = neuer Namespace ("http://www.georss.org/georss"); ds = neuer DropShadowFilter (2,90,0x00000,0,75,2,2,1,3); group = new RadioButtonGroup ("Disasters"); handleMap (); private Funktion handleMap (): void map = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330); private Funktion onInit (Ereignis: YahooMapEvent): void empty.addChild (map); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = new LatLon (0,0); Vulkane (); private function volcanoes (): void var url: URLLoader = neuer URLLoader (); url.addEventListener (Event.COMPLETE, onVolcano); var vars: URLVariables = neue URLVariables (); var req: URLRequest = neue URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = "http://volcanoes.usgs.gov/rss/vhpcaprss.xml" req.data = vars; url.load (req); private Funktion onVolcano (Ereignis: Ereignis): void var vol: Namespace = neuer Namespace ("http://volcano.wr.usgs.gov/rss/volcanons/1.0"); var xml: XML = neues XML (event.target.data); var pointList: XMLList = xml… geo :: point.text (); var colorList: XMLList = xml… vol :: colorcode.text (); var string: String; für (var i: uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ s] +))?) + \ s * | \ s *) \ /?> / gi; string = string.replace (pattern, ""); earth.desc = string; Tsunamis(); private Funktion tsunamis (): void var url: URLLoader = neuer URLLoader (); var vars: URLVariables = neue URLVariables (); var req: URLRequest = neue URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = tsuArray [tsuCounter] req.data = vars; url.addEventListener (Event.COMPLETE, onTsu); url.load (req); private Funktion onTsu (Ereignis: Ereignis): void tsuCounter ++; if (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); else tsunamis (); var xml: XML = neues XML (event.target.data); var list: XMLList = xml… geo :: point.text (); var string: String; für (var i: uint; i Ich habe die Oberfläche kaum zerkratzt, was YahooMaps unter der Haube hat. Lesen Sie die Dokumentation und machen Sie Spass!
