Share
In questo tutorial, ti mostrerò come iniziare con Yahoo! API di Maps in Flash. Caricheremo un paio di feed RSS e tracciamo alcuni avvisi di disastro naturale utilizzando le loro longitudini e latitudini.
Vai a http://developer.yahoo.com/flash/maps/ e registrati per un ID app.
Nella pagina Componente Yahoo Map AS3, scaricare la versione più recente del componente.
Al termine del download del file, estrai il file zip. Passare alla cartella Flash e installare il file MXP.
Avvia Flash e apri un nuovo file ActionScript 3.0, quindi salvalo in una nuova cartella come "yahoo_map.fla".
Modifica le dimensioni dello stage su 640x480. Passare alla scheda componenti e trascinare una copia del componente YahooMaps sul palco. Una volta sul palco, cancellalo. Questo metterà una copia nella libreria in modo che possiamo accedervi da lì.
Trascina una copia di TextArea dalla scheda dei componenti. Nel pannello delle proprietà, modifica la dimensione di TextArea in una larghezza di 640 px e un'altezza di 100 px. Dagli una posizione X di 0 e una posizione Y di 330. Infine, dagli un nome di istanza di "textArea".
Quindi, trascinare una copia di RadioButton dalla scheda dei componenti. Copia e incolla tre volte, in modo che ci siano quattro istanze del componente RadioButton sullo stage. Allinearli verso l'alto e distribuirli in modo uniforme, in modo che si trovino in linea retta uno accanto all'altro. Successivamente, trascinali sotto il componente TextArea.
Seleziona il primo pulsante di opzione. Dagli un nome di istanza di "radioAll". Con il pulsante ancora selezionato, passa al pannello dei parametri. Dagli il nome di un gruppo di "Disastri". Modifica la proprietà dell'etichetta su "Tutto" e la proprietà selezionata su "true".
Seleziona il prossimo pulsante di opzione. Dagli un nome di istanza di "radioEarth", lo stesso nome di gruppo di "Disasters", un'etichetta di "Earthquakes" e lascia la proprietà selezionata come "false".
Seleziona il terzo pulsante di opzione. Il nome dell'istanza è "radioTsu", il nome del gruppo è "Disasters", l'etichetta è "Tsunamis" e la proprietà selezionata è "false".
Infine, seleziona il quarto pulsante di opzione. Ha un nome di istanza di "radioVolcano", il suo nome di gruppo è "Disasters", ha un'etichetta di "Vulcani" e selezionato è "false". Dal momento che vogliamo essere in grado di passare tra i pulsanti, abbiamo dato loro lo stesso nome di gruppo. Distanziali di conseguenza, in modo che siano equidistanti.
Crea un livello separato. Posiziona il livello sotto il livello con i componenti TextArea e RadioButton. Nel pannello della libreria, in basso, seleziona la nuova icona del simbolo. Crea un nuovo Movie Clip vuoto. Trascina un'istanza sullo stage nel livello appena creato, quindi assegnagli un nome di istanza di "vuoto". Questo filmato manterrà la nostra mappa quando è caricata. Assegna al filmato vuoto una posizione X e Y pari a 0. In questo modo è allineato con l'angolo in alto a sinistra del palcoscenico.
Vai a file> nuovo e seleziona un nuovo file ActionScript. Salva il file nella stessa directory del file FLA "yahoo_map" con il nome "yahoo_map.as". Nel documento FLA di yahoo_map, nel pannello delle proprietà, digita "yahoo_map" nel campo Classe documento. Ciò renderà il tuo file ActionScript la classe Document per il tuo FLA yahoo_map.
Questa è la configurazione di base per la nostra classe di documenti:
pacchetto import flash.display.Sprite; public class yahoo_map estende Sprite public function yahoo_map ()
Queste sono le dichiarazioni che guideranno l'API di YahooMap
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; public class yahoo_map estende Sprite public function yahoo_map ()
Basta aggiungere questi sotto la dichiarazione di importazione di YahooMaps. Assicurati che siano sopra la dichiarazione della classe.
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; importare fl.controls.RadioButtonGroup; importare 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; import flash.text.AntiAliasType; import flash.text.Font; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; public class yahoo_map estende Sprite public function yahoo_map ()
Qui andremo a delcare le variabili globali. Avremo bisogno dell'ID app che hai ricevuto dalla pagina YahooMaps e avremo bisogno di utilizzare qualche php in seguito per caricare i feed in Flash. Questo è il motivo per cui abbiamo la costante CURL. Assicurati che questi siano posizionati sotto la dichiarazione di classe ma sopra la funzione pubblica principale.
public class yahoo_map estende Sprite private static const APPID: String = "YOUR APP ID"; private static const CURL: String = "curl.php"; private var map: YahooMap; private var ds: DropShadowFilter; private var geo: Namespace; private var tsuArray: Array; private var tsuCounter: int = 0; colore var privato: ColorTransform; private var group: RadioButtonGroup; funzione pubblica yahoo_map ()
Qui istanziamo tutte le nostre variabili. Dopo aver cercato su Google, ho trovato quattro feed RSS per gli avvisi di tsunami da weather.gov. Li ho caricati nella variabile tsuArray, in modo che possa caricarli uno alla volta. Il namespace geo aiuterà a raggiungere la latitudine e la longitudine di tutti i feed RSS. Inoltre, c'è un nuovo RadioButtonGroup che gestirà la commutazione dei componenti di RadioButton sul palco. Infine, chiamo la funzione handleMap. Ciò avvierà il processo di caricamento della mappa.
Accentsconagua
public function yahoo_map () init (); funzione privata 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 = new Namespace ("http://www.georss.org/georss"); ds = new DropShadowFilter (2,90,0x00000,0,75,2,2,1,3); color = new ColorTransform (); group = new RadioButtonGroup ("Disasters"); handleMap (); È qui che iniziamo a lavorare con le nozioni di base sulle mappe e dove utilizzeremo il nostro ID app. Inoltre, quando chiamiamo il metodo map.init (), diamo la dimensione che vogliamo che sia la mappa. La mappa avrà la larghezza dello stage e avrà un'altezza che tocca la parte superiore del componente TextArea. Ascoltiamo anche l'evento MAP_INITALIZE.
private function handleMap (): void map = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330);
Quando la mappa è inizializzata, attiverà la funzione onInit. Qui è dove aggiungeremo la mappa al filmato vuoto che è stato posizionato sul palco. In questo modo la mappa verrà caricata sotto i componenti TextArea e RadioButton - per ogni evenienza. Quindi aggiungiamo zoom, pan e digitiamo i widget. Questi controllano il tipo di mappa, aggiungono la possibilità di eseguire una panoramica della mappa e aggiungere i controlli dello zoom. Centra la mappa a 0,0.
La mappa sta cercando una nuova variabile LatLon a cui inserisci due numeri. Ho usato 0,0 per impostare la mappa dove si incontrano Equator e Prime Meridian. Successivamente, viene impostato il livello di zoom delle mappe. Questo è impostato sulla massima altitudine possibile. In questo modo possiamo vedere tutti gli avvisi di disastri naturali in tutto il mondo. Successivamente chiamiamo la funzione per iniziare a caricare i nostri feed RSS.
funzione privata onInit (evento: YahooMapEvent): void empty.addChild (map); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = new LatLon (0,0); vulcani ();
Dobbiamo uscire da Flash per un secondo e fare un po 'di PHP. Quando ho iniziato a fare questo progetto, mi sono reso conto che i feed non sarebbero stati caricati sul mio sito web. Un modo semplice e veloce per ignorarlo era usare cURL. Ho trovato un utile codice di esempio da Google. Non sono troppo sicuro da dove provenga esattamente, ma ho usato lo stesso script da un po 'di tempo. Apri un nuovo file PHP, incolla il seguente codice e salvalo come "curl.php"
Ora che abbiamo chiamato la funzione per iniziare a caricare il nostro feed vulcano, possiamo dare un'occhiata a cosa sta succedendo all'interno della funzione. In poche parole, stiamo caricando la nostra pagina curl.php che sta caricando il feed RSS. Quindi aggiungiamo un listener per quando la pagina è stata caricata.
private function vulcanoes (): void var url: URLLoader = new URLLoader (); url.addEventListener (Event.COMPLETE, onVolcano); var vars: URLVariables = new URLVariables (); var req: URLRequest = new URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = "http://volcanoes.usgs.gov/rss/vhpcaprss.xml" req.data = vars; url.load (req);
Nel primo feed, ci sono alcune caratteristiche interessanti. Il più importante è il geo: point. Questa è la latitudine e la longitudine dell'avviso. Inoltre, in questo feed, c'è un codice colore per mostrare il livello di allerta dell'attività. Con il feed caricato, ci sono due liste xml che stanno per essere caricate. Uno è per la latitudine e la longitudine. L'altro è per il codice colore.
Gli elenchi vengono fatti scorrere e i nuovi indicatori vengono creati sulla mappa. I clip film personalizzati vengono aggiunti ai marcatori, questi vengono creati utilizzando le funzioni che descriverò a breve. Il colore dei clip filmato nidificati viene controllato utilizzando la proprietà "colorTransform". Una volta caricato il feed e posizionati i marker, il successivo feed RSS viene impostato per il caricamento. Passerò anche il testo della descrizione al clip filmato appena creato, in modo che possa arrivare in seguito usando il nome che è stato dato al clip filmato.
funzione privata onVolcano (evento: Evento): void var vol: Namespace = new Namespace ("http://volcano.wr.usgs.gov/rss/volcanons/1.0"); var xml: XML = new XML (event.target.data); var pointList: XMLList = xml ... geo :: point.text (); var colorList: XMLList = xml ... vol :: colorcode.text (); var string: String; per (var i: uint; i Ora è il momento di caricare il feed RSS dei terremoti. Le funzioni funzionano più o meno allo stesso modo di prima.
funzione privata earthQuakes (): void var url: URLLoader = new URLLoader (); var vars: URLVariables = new URLVariables (); var req: URLRequest = new 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);
Le differenze sono che non esiste un codice colore per questo feed. Invece, cambio semplicemente il colore manualmente in marrone. Inoltre, la descrizione dell'avviso contiene alcuni html al suo interno. Ho usato un'espressione regolare che mi è capitato di incontrare Google per rimuoverne tutto l'HTML. Senza farlo, il componente TextArea caricherà un'immagine, che non volevo.
Un'altra cosa da notare è che questo è un tipo diverso di feed RSS. Per qualche ragione (nella mia esperienza) i feed Atom non amano analizzare correttamente. Il modo per aggirare questo era di scendere l'albero del bambino fino al primo oggetto. Inoltre, il nodo dell'articolo non ha sempre lo stesso numero di figli. Ho aggiunto un semplice Se dichiarazione per renderlo conto Infine, chiamiamo la funzione per caricare l'ultimo dei feed RSS.
funzione privata onEarthQuake (event: Event): void var xml: XML = new XML (event.target.data); elenco var: XMLList = xml ... geo :: point.text (); var string: String per (var i: uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ S] +))) + \ s * | \ s *) \ /> / gi??; string = string.replace (modello, ""); earth.desc = stringa; tsunamis ();
Qui è dove iniziamo a caricare i feed di tsunami. Abbiamo creato un tsuCounter in modo da poter aumentare il numero ogni volta che viene caricato un feed. Quando il contatore raggiunge la fine di tsuArray, aggiungeremo i listener di modifiche al RadioButtonGroup che è stato creato. Dato che voglio poter accedere a tutti i marker creati in ogni array, ho aggiunto tsuCounter all'inizio del nome del clip filmato. In questo modo sarò in grado di accedere alla descrizione da 0Tsunami1 e 1Tsunami1.
Infine, quando tutti i feed sono stati caricati, aggiungiamo il listener di eventi a RadioButtonGroup
funzione privata tsunamis (): void var url: URLLoader = new URLLoader (); var vars: URLVariables = new URLVariables (); var req: URLRequest = new URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = tsuArray [tsuCounter] req.data = vars; url.addEventListener (Event.COMPLETE, onTsu); url.load (req); funzione privata onTsu (event: Event): void tsuCounter ++; if (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); else tsunamis (); var xml: XML = new XML (event.target.data); elenco var: XMLList = xml ... geo :: point.text (); var string: String; per (var i: uint; i
Queste sono le funzioni che aggiungono i marker, controllano l'aspetto dei marker, impostano la longitudine e la latitudine dei marker e creano i clip nei marker. La funzione drawMarker crea un nuovo marker, aggiunge un'ombreggiatura, quindi aggiunge il clip filmato ad esso, passa lo stesso nome del MovieClip su di esso, ottiene la latitudine e la longitudine dal feed RSS caricato e infine aggiunge i listener di eventi. Il marcatore viene aggiunto al markerManager della mappa. La funzione drawCircle disegna solo un cerchio di 10 pixel di larghezza. La funzione getLatlon prende la stringa che gli viene passata, la separa e restituisce LatLon. L'ultima funzione, theColor, gestisce i diversi colori passati attraverso il feed del vulcano.
private function drawMarker (mc: MovieClip, string: String, name: String): void var marker: Marker = new Marker (); marker.filters = [ds]; marker.addChild (mc); marker.latlon = getLatlon (stringa); marker.name = nome; map.markerManager.addMarker (marker); marker.addEventListener (MouseEvent.ROLL_OVER, onOver); marker.addEventListener (MouseEvent.CLICK, onClick); private function drawCircle (): MovieClip var mc: MovieClip = new MovieClip (); mc.graphics.beginFill (0xFF0000, 1); mc.graphics.drawCircle (5,5,5); mc.graphics.endFill (); return mc; private function getLatlon (string: String): LatLon var array: Array = string.split (/ [\ s] /); var latlon: LatLon = new LatLon (array [0], array [1]); ritorno latlon; private function theColor (string: String): ColorTransform var int: uint; switch (string) case "ORANGE": int = 0xFD8000; rompere; caso "VERDE": int = 0x225E33; rompere; predefinito: int = 0xFF0000; var ct: ColorTransform = new ColorTransform (); ct.color = int; ritorno ct;
Quando l'utente esegue il rollover dell'indicatore, la descrizione dell'avviso viene visualizzata nel componente TextArea. Questo è gestito attraverso la funzione onOver. Il bersaglio è lanciato come un segnalino usando il nome che lo ha passato. Quindi riceviamo il testo descrittivo che è stato passato al MovieClip annidato all'interno dell'indicatore e lo invia al componente TextArea. L'evento onClick esegue il panning della mappa su qualsiasi marker selezionato. Questo viene fatto usando il metodo map.panToLatLon ().
funzione privata onOver (event: 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; funzione privata onClick (event: MouseEvent): void var marker: Marker = Marker (map.markerContainer.getChildByName (event.target.name)) map.panToLatLon (marker.latlon);
L'evento finale è l'evento onChange. Questo evento disattiva tutti i filmati tranne i pulsanti selezionati. Inoltre, esegue la panoramica della mappa sull'avviso più recente ricevuto nel feed RSS.
funzione privata onChange (event: Event): void var g: RadioButtonGroup = RadioButtonGroup (event.target); var i: uint; var marker: Marker; var panTo: Marker; switch (g.selection.name) case "radioVolcano": per (i = 0; i
Ecco come appare il codice finale.
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; importare fl.controls.RadioButtonGroup; importare 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; import flash.text.AntiAliasType; import flash.text.Font; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; public class yahoo_map estende Sprite private static const APPID: String = "YOUR APP ID"; private static const CURL: String = "curl.php"; private var map: YahooMap; private var ds: DropShadowFilter; private var geo: Namespace; private var tsuArray: Array; private var tsuCounter: int = 0; colore var privato: ColorTransform; private var group: RadioButtonGroup; public function yahoo_map () init (); funzione privata 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 = new Namespace ("http://www.georss.org/georss"); ds = new DropShadowFilter (2,90,0x00000,0,75,2,2,1,3); group = new RadioButtonGroup ("Disasters"); handleMap (); private function handleMap (): void map = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330); funzione privata onInit (evento: YahooMapEvent): void empty.addChild (map); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = new LatLon (0,0); vulcani (); private function vulcanoes (): void var url: URLLoader = new URLLoader (); url.addEventListener (Event.COMPLETE, onVolcano); var vars: URLVariables = new URLVariables (); var req: URLRequest = new URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = "http://volcanoes.usgs.gov/rss/vhpcaprss.xml" req.data = vars; url.load (req); funzione privata onVolcano (evento: evento): void var vol: Namespace = new Namespace ("http://volcano.wr.usgs.gov/rss/volcanons/1.0"); var xml: XML = new XML (event.target.data); var pointList: XMLList = xml ... geo :: point.text (); var colorList: XMLList = xml ... vol :: colorcode.text (); var string: String; per (var i: uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ S] +))) + \ s * | \ s *) \ /> / gi??; string = string.replace (modello, ""); earth.desc = stringa; tsunamis (); funzione privata tsunamis (): void var url: URLLoader = new URLLoader (); var vars: URLVariables = new URLVariables (); var req: URLRequest = new URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = tsuArray [tsuCounter] req.data = vars; url.addEventListener (Event.COMPLETE, onTsu); url.load (req); funzione privata onTsu (event: Event): void tsuCounter ++; if (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); else tsunamis (); var xml: XML = new XML (event.target.data); elenco var: XMLList = xml ... geo :: point.text (); var string: String; per (var i: uint; i Ho appena scalfito la superficie per ciò che YahooMaps ha sotto il cofano. Leggi la documentazione e impazzisci!
