Plotting Points ved hjelp av Yahoo! Maps og RSS
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen, vil jeg vise deg hvordan du kommer i gang med Yahoo! Maps API i Flash. Vi vil legge i et par RSS feeds og plotte noen naturkatastrofe advarsler ved hjelp av sine lengdegrader og breddegrader
Trinn 1:. Få en App ID
Gå til http://developer.yahoo.com/flash/maps/og registrere deg for en App ID
Trinn 2:. Last ned Component
På Yahoo Kart AS3 Component side, laste ned den nyeste versjonen av komponenten
Trinn 3:. Installer Component
Når filen er lastet ned, pakke ut zip-filen. Naviger til Flash mappen og installere MXP filen
Trinn 4:. Flytt til Flash
Start-Flash og åpne en ny Actionscript 3.0-fil, og lagre den i en ny mappe som "yahoo_map. fla "
Trinn 5:. Sett opp dokument
Endre scenen størrelsen til 640x480. Naviger til fanen komponenter og dra en kopi av YahooMaps komponent til scenen. Når det er på scenen, må du slette den. Som vil sette en kopi i biblioteket, slik at vi kan få tilgang til det derfra
Trinn 6:. Tekstområdet
Dra en kopi av textarea fra kategorien komponenter. I egenskapsvinduet, endre størrelsen på tekstfeltet til en bredde på 640px og høyde på 100px. Gi den en X posisjon på 0 og en Y stilling 330. Til slutt gir det en forekomst navnet "textarea"
Trinn 7:. Radioknappene
Deretter drar en kopi av den radioknappen fra kategorien komponenter. Kopiere og lime den tre ganger, slik at det er fire forekomster av radioknappen komponenten på scenen. Justere dem til toppen, og jevnt plass dem ut, slik at de er i en rett linje rett ved siden av hverandre. Deretter drar dem under textarea komponent
Trinn 8:. Alternativknappen Parametere
Velg den første alternativknappen. Gi den en forekomst navnet "radioAll". Med knappen fortsatt er valgt, bytte over til parameterpanelet. Gi det en gruppe navnet "Disasters". Endre etiketten egenskapen til "All" og den valgte egenskapen til "true".
Velg neste alternativknapp. Gi den en forekomst navnet "radioEarth", den samme gruppen navnet "Katastrofer", en merkelappen "Jordskjelv" og la den valgte egenskapen som "false".
Velg det tredje radioknappen. Dens eksempel heter "radioTsu", er navnet på gruppen "Disasters", etiketten er "Tsunamier", og den valgte egenskapen er "false".
Til slutt velger den fjerde alternativknappen. Den har en forekomst navnet "radioVolcano", er dens gruppenavn "Disasters", den har en etikett med "vulkaner", og valgt er "false". Siden vi ønsker å være i stand til å veksle mellom knappene, vi ga dem den samme gruppen navn. Space dem tilsvarende, slik at de er jevnt fordelt
Trinn 9:. The Empty MovieClip
Opprett et eget lag. Plasser lag under lag med textarea og radiobutton komponenter. I biblioteket panelet nederst, velg den nye symbol ikonet. Opprett en ny tomt MovieClip. Dra en forekomst på scenen i den nyopprettede lag, så gi det en forekomst navnet "tom". Dette filmklippet vil holde kartet vårt når det er lastet. Gi den tomme filmklipp en X og Y stilling 0. På den måten den er foret opp med øverste venstre hjørne av scenen
Trinn 10:. Sette opp Document Class
Gå til fil > nytt og velge en ny Actionscript-fil. Lagre filen i samme katalog som din "yahoo_map" FLA fil med navnet "yahoo_map.as". I din yahoo_map FLA dokument, i egenskapsvinduet, skriv "yahoo_map" i Dokument klassen feltet. Dette vil gjøre action fil Document klassen for din yahoo_map FLA
Trinn 11:. Dokument Class Skeleton
Dette er den grunnleggende oppsett for vår dokumentKlasse:
pakke {import flash .display.Sprite; public class yahoo_map strekker Sprite {offentlig funksjon yahoo_map () {}}}
Trinn 12: Yahoo Maps Import Uttalelser
Dette er uttalelser som vil drive YahooMap API
pakke {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 strekker Sprite {offentlig funksjon yahoo_map () {}}}
Trinn 13: Resten av Import Uttalelser
Bare legg disse under YahooMaps importere uttalelse. Sørg for at de er over klassen erklæring
pakke {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; import flash.text.AntiAliasType; import flash.text.Font; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; public class yahoo_map strekker Sprite {offentlig funksjon yahoo_map () {}}}
Trinn 14: Erklærte Variabler
Her skal vi delcare de globale variabler. Vi trenger app id som du fikk fra YahooMaps siden, og vi kommer til å trenge å bruke noen php senere for å gjøre feeds laste inn Flash. Det er derfor vi har CURL konstant. . Sørge for at disse er plassert under klassedeklarasjonen men over hoved offentlig funksjon
public class yahoo_map strekker Sprite {private static konst APPID: String = "DIN APP ID"; private static konst CURL: String = "curl.php"; private Var kartet: YahooMap; private Var ds: DropShadowFilter; private Var geo: kl; private Var tsuArray: Array; private Var tsuCounter: int = 0; private Var farge: ColorTransform; private Var gruppe: RadioButtonGroup; offentlig funksjon yahoo_map ()
Trinn 15: Sette opp vår Init Funksjon
Her vil vi instansierer alle våre variabler. Etter å ha søkt Google, fant jeg fire-RSS-feeder for tsunami advarsler fra weather.gov. Jeg lastet dem inn i tsuArray variabel, slik at jeg kan laste dem en om gangen. Geo navnerom kommer til å hjelpe med å få til breddegrad og lengdegrad for alle RSS-feeds. Også er det en ny RadioButtonGroup som vil håndtere veksling av radiobutton komponenter på scenen. Til slutt, jeg kaller handleMap funksjonen. Som vil starte kartet less
offentlig funksjon yahoo_map () {init ().; } Private funksjon 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 kl ("http://www.georss.org/georss"); ds = new DropShadowFilter (2,90,0x00000,0.75,2,2,1,3); color = ny ColorTransform (); gruppe = new RadioButtonGroup ("Disasters"); handleMap (); }
Trinn 16: Sette opp vår Kart
Det er her vi begynner å arbeide med kartgrunnleggende og hvor vi vil bruke vår app id. Også når vi kaller map.init () -metoden, vi diktere størrelsen vi vil at kartet skal være. Kartet blir bredden av scenen, og har en høyde som berører toppen av Tekstfelt komponenten. Vi også lytte til MAP_INITALIZE hendelsen
privat funksjon handleMap (): void {kartet = new YahooMap ();. map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330); }
Trinn 17: Kartet er klar
Når kartet er initialisert vil det fyre av onInit funksjonen. Her er der vi vil legge kartet til den tomme filmklipp som ble plassert på scenen. På den måten kartet vil laste under tekstfeltet og radioknappen komponenter - bare i tilfelle. Vi legg deretter til zoom, pan, og typen widgets. Disse styrer den typen kart, legge muligheten til å panorere kartet og legge zoomkontrollene. Vi vil sentrere kartet til 0,0.
Kartet er på utkikk etter en ny LatLon variabel som du plugge inn to tall. Jeg brukte 0,0 for å sette kart på hvor ekvator og nullmeridianen møtes. Etter, er kartene zoomnivået satt. Dette er satt til høyeste høyde mulig. På den måten kan vi se alle de naturlige katastrofe advarsler over hele verden. Neste vi kaller funksjonen for å starte lasting vår RSS-feeds
privat funksjon onInit (event: YahooMapEvent): void {empty.addChild (kart);. map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = new LatLon (0,0); vulkaner (); }
Trinn 18: curling Feeds
Vi må gå ut av Flash for en andre og gjøre litt PHP. Da jeg begynte å gjøre dette prosjektet, innså jeg at feedene ville ikke lastes på min hjemmeside. En rask og enkel måte at jeg forbi det var bruke cURL. Jeg fant et nyttig eksempel på kode fra Google. Jeg er ikke så sikker på hvor den kom fra, men jeg har brukt det samme manuset for noen tid nå. Åpne en ny PHP fil, lim inn følgende kode og lagre den som "curl.php"
<? Php $ lm = curl_init (); curl_setopt ($ lm, CURLOPT_URL, $ _POST ['jarl']); curl_setopt ($ lm, CURLOPT_HEADER, 0); curl_exec ($ ch); curl_close ($ ch); >
Trinn 19: Tilbake til Flash
Nå som vi har kalt funksjon for å starte lasting vår vulkanen feed, kan vi ta en titt på hva som skjer inne i funksjon. Enkelt sagt, vi legger i vår curl.php side som laster inn RSS feed. Vi deretter legge en lytter for når siden er ferdig lasting
privat funksjons vulkaner (): void {var url: URLLoader = new URLLoader ();. url.addEventListener (Event.COMPLETE, onVolcano); Var vars: URLVariables = nye 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); }
Trinn 20: The First Feed Lastet
I den første fôr, er det noen interessante funksjoner. Det viktigste er den geo: punkt. Dette er breddegrad og lengdegrad for advarselen. Også i denne strømmen, er det en fargekode for å vise varslingsnivået for aktiviteten. Med fôret lastet, er det to xml lister som skal lastes. Den ene er for breddegrad og lengdegrad. Den andre er for fargekoden.
Listene er loopet gjennom og de nye markørene er opprettet på kartet. Custom filmklipp er lagt til markørene, disse er laget ved hjelp av funksjoner jeg vil beskrive snart. Fargen på nestede filmklipp styres ved å bruke "colorTransform" eiendom. Etter fôret er lastet og markørene er plassert, blir det neste RSS feed satt å laste. Jeg også passere beskrivelsen teksten til den nyopprettede filmklipp, slik at jeg kan få til det senere bruke navnet som ble gitt til filmklippet
privat funksjon onVolcano (hendelse: Hendelse):. Void {var vol: Navnerom = new kl ("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 streng: String; for (var i. uint, jeg
Trinn 21: Legge i Second feed
Nå er det tid for å laste jordskjelv RSS feed Funksjonene fungerer ganske mye på samme måte som før
privat funksjon. jordskjelv (): void {var url: URLLoader = new URLLoader (); Var vars: URLVariables = nye 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);}
Forskjellene er at det er ingen fargekode for denne feeden. I stedet jeg bare endre fargen manuelt til brun. Også beskrivelsen av varselet har noen html inni den. Jeg brukte et vanlig uttrykk for at jeg kom over fra Google en stund tilbake å strippe all HTML ut av det. Uten å gjøre det, vil textarea komponent laste et bilde, som jeg ikke ønsker.
En ting å merke seg er at dette er en annen type RSS feed. For noen grunn (i min erfaring) Atom feeds liker ikke å analysere riktig. Veien rundt dette var å klatre ned barnet treet til det første elementet. Dessuten har elementet noden ikke alltid har samme antall barn. Jeg har lagt en enkel hvis Det er her vi begynner å laste tsunamien feeds Vi skapte en tsuCounter slik at vi kan øke antall hver gang en feed er lastet. Når telleren når slutten av tsuArray, vil vi legge endrings lyttere til RadioButtonGroup som ble opprettet. Siden jeg ønsker å være i stand til å få tilgang til hver markør opprettet i hver rekke, la jeg tsuCounter til begynnelsen av navnet på filmklipp. På den måten vil jeg være i stand til å få tilgang til beskrivelsen fra 0Tsunami1 og 1Tsunami1. Til slutt, når alle feeds har blitt lastet, vi legge til hendelsen lytteren til RadioButtonGroup Dette er funksjoner som legger til markørene, kontrollere utseendet på markørene, innstilling av lengde- og breddegrad av markører og skaper filmklipp i markørene. Den drawMarker funksjonen lager en ny markør, legger en skygge, deretter legger filmklipp til det, går det samme navnet som MovieClip til det, får lengde- og breddegrad fra loaded RSS feed og til slutt legger hendelses lyttere. Markøren er lagt til den markerManager på kartet. Den drawcircle funksjonen bare tegner en sirkel 10 piksler bredt. Den getLatlon funksjonen tar strengen som sendes til det, bryter den fra hverandre og returnerer LatLon. Den siste funksjonen, theColor, håndterer de ulike fargene gått til det gjennom vulkanen fôret Når brukeren ruller over markør, er beskrivelsen av advarsel vises i tekstdelen. Dette håndteres gjennom onOver funksjonen. Målet er kastet som en markør å bruke navnet som ble vedtatt den. Så vi får beskrivelsen teksten som ble vedtatt til MovieClip nestet inne i markøren og sende det til textarea komponent. Onclick hendelsen panorerer kartet til hvilken markør ble klikket. Dette gjøres ved hjelp av map.panToLatLon () -metoden Den siste begivenheten er onChange hendelsen. Denne hendelsen slår av alle filmklipp unntatt de valgte knappene. Det panner også kartet til de siste varslene som ble mottatt i RSS feed Her er den endelige koden ser ut Jeg har knapt riper i overflaten for hva YahooMaps har under panseret. Les dokumentasjonen og gå nuts! Anmeldelser
uttalelse til regnskap for det. Til slutt, vi kaller funksjonen for å laste den siste av RSS feeds
privat funksjon onEarthQuake (hendelse: Hendelse): void {var xml: XML = new XML (event.target.data);. Var liste: XMLList = xml..geo :: point.text (); Var streng: String for (var i:?? uint, jeg < \\ /\\ w + ((\\ s + (\\ w | \\ w [\\ w -] * \\ w) (\\ s * = \\ s * (: \\ " .? * \\ "| '*.?' | [^ '\\" > \\ r] +))) + \\ s * | \\ s *) \\ />? /GI; string = string.replace ( mønster, ""); earth.desc = streng;} tsunamier ();}
Trinn 22:. The Final Sett med Feeds
privat funksjon tsunamier (): void {var url: URLLoader = new URLLoader (); Var vars: URLVariables = nye 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); } Private funksjon onTsu (hendelse: Hendelse): void {tsuCounter ++; if (tsuCounter == tsuArray.length) {group.addEventListener (Event.CHANGE, onChange); } Else {tsunamier (); } Var xml: XML = new XML (event.target.data); Var liste: XMLList = xml..geo :: point.text (); Var streng: String; for (var i: uint; i
Trinn 23: Andre funksjoner
privat funksjon drawMarker (mc: MovieClip, string: String, navn: String): void {var markør. Marker = new Marker (); marker.filters = [ds]; marker.addChild (mc); marker.latlon = getLatlon (string); marker.name = navn; map.markerManager.addMarker (markør); marker.addEventListener (MouseEvent.ROLL_OVER, onOver); marker.addEventListener (MouseEvent.CLICK, onClick); } Private funksjon drawcircle (): MovieClip {var mc: MovieClip = new MovieClip (); mc.graphics.beginFill (0xff0000, 1); mc.graphics.drawCircle (5,5,5); mc.graphics.endFill (); returnere mc; } Private funksjon getLatlon (string: String): LatLon {var matrise: Array = string.split (/[\\ s] /); Var latlon: LatLon = new LatLon (matrise [0], array [1]); returnere latlon; } Private funksjon theColor (string: String): ColorTransform {var int: UINT; bryteren (string) {case "ORANGE": int = 0xFD8000; gå i stykker; case "GREEN": int = 0x225E33; gå i stykker; standard: int = 0xff0000; } Var ct: ColorTransform = new ColorTransform (); ct.color = int; returnere ct; }
Trinn 24: Hendelseshåndtering
privat funksjon onOver (event: MouseEvent):. Void {var markør: Marker = Marker (map.markerContainer.getChildByName (event.target.name)) Var mc: MovieClip = MovieClip (marker.getChildByName (event.target.name)); textArea.htmlText = mc.desc; } Private funksjon onClick (event: MouseEvent): void {var markør: Marker = Marker (map.markerContainer.getChildByName (event.target.name)) map.panToLatLon (marker.latlon); }
privat funksjon onChange (hendelse: Hendelse): void {var g: RadioButtonGroup = RadioButtonGroup (event.target);. Var i: UINT; Var markør: Marker; Var Panto: Marker; bryteren (g.selection.name) {case "radioVolcano": for (i = 0; i
The Final Kode
pakke {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, importere flash.text.AntiAliasType, importere flash.text.Font, importere flash.text. Textfield, import flash.text.TextFieldAutoSize, import flash.text.TextFormat; public class yahoo_map strekker Sprite {private static konst APPID: String = "DIN APP ID"; privat statisk konst CURL: String = "curl.php"; privat Div Kart: YahooMap; private Var ds: DropShadowFilter; private Var geo: kl; private Var tsuArray: Array; private Var tsuCounter: int = 0; private Var farge: ColorTransform; private Var gruppe: RadioButtonGroup; offentlig funksjon yahoo_map () {init (); } Private funksjon 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 kl ("http://www.georss.org/georss"); ds = new DropShadowFilter (2,90,0x00000,0.75,2,2,1,3); gruppe = new RadioButtonGroup ("Disasters"); handleMap (); } Private funksjon handleMap (): void {kartet = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330); } Private funksjon onInit (event: YahooMapEvent): void {empty.addChild (kart); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = new LatLon (0,0); vulkaner (); } Private funksjon vulkaner (): void {var url: URLLoader = new URLLoader (); url.addEventListener (Event.COMPLETE, onVolcano); Var vars: URLVariables = nye 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); } Private funksjon onVolcano (hendelse: Hendelse): void {var vol: kl = new kl ("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 streng: String; for (var i:??.? uint; i < \\ /\\ w + ((\\ s + (\\ w | \\ w [\\ w -] * \\ w) (\\ s * = \\ s * (: \\ "* \\ "| '*.?' | [^ '\\" > \\ r] +))) + \\ s * | \\ s *) \\ />? /GI; string = string.replace (mønster "," ); earth.desc = streng;} tsunamier ();} private funksjon tsunamier (): void {var url: URLLoader = new URLLoader (); Var vars: URLVariables = nye 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);} private funksjon onTsu (event: hendelse): void {tsuCounter ++; if (tsuCounter == tsuArray.length) {group.addEventListener (Event.CHANGE, onChange);} else {tsunamier ();} Var xml: XML = new XML (event.target.data); Var liste: XMLList = xml..geo :: point.text (); Var streng: String; for (var i: uint; i
Konklusjon