Share
I denne veiledningen vil jeg vise deg hvordan du kommer i gang med Yahoo! Kart-API i Flash. Vi legger inn et par RSS-feeder og tar opp noen naturkatastrofer med deres lengder og breddegrader.
Gå til http://developer.yahoo.com/flash/maps/ og registrer deg for en app-ID.
Last ned den nyeste versjonen av komponenten på Yahoo Map AS3 Components-siden.
Når filen er ferdig nedlasting, trekk ut zip-filen. Naviger til Flash-mappen og installer MXP-filen.
Start Flash og åpne en ny ActionScript 3.0-fil, og lagre den i en ny mappe som "yahoo_map.fla".
Endre scenestørrelsen til 640x480. Naviger til komponentfanen og dra en kopi av YahooMaps-komponenten til scenen. Når det er på scenen, slett det. Det vil sette en kopi i biblioteket slik at vi får tilgang til det derfra.
Dra en kopi av TextArea fra komponentfanen. I egenskapspanelet må du endre størrelsen på TextArea til en bredde på 640px og en høyde på 100px. Gi den en X-posisjon på 0 og en Y-posisjon på 330. Til slutt, gi den et eksempelnavn på "textArea".
Deretter drar du en kopi av RadioButton fra komponentfanen. Kopier og lim den inn tre ganger, slik at det finnes fire forekomster av RadioButton-komponenten på scenen. Juster dem til toppen og jevnt plasser dem ut, slik at de er i en rett linje rett ved siden av hverandre. Deretter drar du dem under TextArea-komponenten.
Velg den første alternativknappen. Gi det et forekomstnavn på "radioAll". Med knappen fortsatt valgt, bytt til parameterpanelet. Gi det et gruppe navn på "katastrofer". Endre etikettegenskapen til "Alle" og den valgte eiendommen til "sant".
Velg neste radioknapp. Gi det et forekomstnavn på "radioEarth", det samme gruppenavnet "Disasters", en etikett av "Earthquakes" og la den valgte egenskapen være "false".
Velg den tredje alternativknappen. Eksempelnavnet er "radioTsu", gruppenavnet er "katastrofer", etiketten er "Tsunamis", og den valgte egenskapen er "falsk".
Til slutt velger du den fjerde alternativknappen. Den har et forekomstnavn på "radioVolcano", dets gruppenavn er "Katastrofer", den har en etikett på "Vulkaner", og valgt er "falskt". Siden vi vil kunne bytte mellom knappene, ga vi dem samme gruppenavn. Plasser dem tilsvarende, slik at de er jevnt fordelt.
Lag et eget lag. Plasser laget under laget med TextArea og RadioButton-komponentene. I bibliotekspanelet, nederst, velg det nye symbolikonet. Lag en ny tom filmklipp. Dra en forekomst på scenen i det nyopprettede laget, og gi det et forekomstnavn på "tom". Dette filmklippet vil holde kartet vårt når det er lastet. Gi det tomme filmklippet en X- og Y-posisjon på 0. På den måten er den lined opp med scenens øverste venstre hjørne.
Gå til fil> nytt og velg en ny ActionScript-fil. Lagre filen i samme katalog som din "yahoo_map" FLA-fil med navnet "yahoo_map.as". I ditt yahoo_map FLA-dokument, i egenskapspanelet, skriv "yahoo_map" i feltet Dokumentklasse. Dette vil gjøre din actionscript-fil Dokument-klassen for yahoo_map FLA.
Dette er det grunnleggende oppsettet for vår dokumentklasse:
pakke import flash.display.Sprite; offentlig klasse yahoo_map utvider Sprite offentlig funksjon yahoo_map ()
Dette er uttalelsene som vil drive YahooMap API
pakke import com.yahoo.maps.api.YahooMap; importer com.yahoo.maps.api.YahooMapEvent; importer com.yahoo.maps.api.core.location.LatLon; importer com.yahoo.maps.api.markers.Marker; importer flash.display.Sprite; offentlig klasse yahoo_map utvider Sprite offentlig funksjon yahoo_map ()
Bare legg til disse under YahooMaps import uttalelsen. Pass på at de er over klassedeklarasjonen.
pakke import com.yahoo.maps.api.YahooMap; importer com.yahoo.maps.api.YahooMapEvent; importer com.yahoo.maps.api.core.location.LatLon; importer com.yahoo.maps.api.markers.Marker; importere fl.controls.RadioButtonGroup; importere fl.controls.RadioButton; importer flash.display.Sprite; importer flash.display.MovieClip; importere flash.events.Event; importer flash.events.MouseEvent; importer flash.filters.DropShadowFilter; importer flash.geom.ColorTransform; importer flash.net.URLLoader; importere flash.net.URLRequest; importere flash.net.URLRequestMethod; importer flash.net.URLVariabler; importer flash.text.AntiAliasType; importer flash.text.Font; importer flash.text.TextField; importere flash.text.TextFieldAutoSize; importer flash.text.TextFormat; offentlig klasse yahoo_map utvider Sprite offentlig funksjon yahoo_map ()
Her skal vi delcare de globale variablene. Vi trenger app-ID-en som du har fra YahooMaps-siden, og vi må bruke noen php senere for å lage feedsbelastningen til Flash. Det er derfor vi har CURL-konstanten. Pass på at disse plasseres under klassedeklarasjonen, men over hovedfunksjonen.
offentlig klasse yahoo_map strekker seg Sprite private static const APPID: String = "DIN APP ID"; privat statisk const CURL: String = "curl.php"; privat var kart: YahooMap; private var ds: DropShadowFilter; private var geo: navnegruppe; privat var tsuArray: Array; privat var tsuCounter: int = 0; privat var farge: ColorTransform; privat var gruppe: RadioButtonGroup; offentlig funksjon yahoo_map ()
Her vil vi sette opp alle våre variabler. Etter å ha søkt på Google, fant jeg fire RSS-feeder for tsunami-advarsler fra weather.gov. Jeg lastet dem inn i tsuArray-variabelen, slik at jeg kan laste dem en om gangen. Geo namespace skal hjelpe til med å komme til bredde og lengdegrad av alle RSS-feeds. Det er også en ny RadioButtonGroup som håndterer bytte av RadioButton-komponentene på scenen. Til slutt, jeg ringer til håndtakskortfunksjonen. Det vil starte kartlastingsprosessen.
Accentsconagua
offentlig funksjon yahoo_map () init (); privat 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 = nytt navneglass ("http://www.georss.org/georss"); ds = ny DropShadowFilter (2,90,0x00000,0,75,2,2,1,3); farge = ny ColorTransform (); group = new RadioButtonGroup ("Disasters"); handleMap (); Det er her vi begynner å jobbe med kartets grunnleggende og hvor vi skal bruke vårt app-id. Også, når vi kaller map.init () -metoden, dikterer vi størrelsen vi vil at kartet skal være. Kartet vil være scenens bredde og ha en høyde som berører toppen av TextArea-komponenten. Vi lytter også etter MAP_INITALIZE-hendelsen.
privatfunksjon handleMap (): void map = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, scene.stageWidth, 330);
Når kartet er initialisert, vil det brenne onInit-funksjonen. Her er hvor vi legger til kartet til det tomme filmklippet som ble lagt på scenen. På den måten lastes kartet under komponentene TextArea og RadioButton - bare i tilfelle. Vi legger til zoom, pan og skriv widgets. Disse kontrollerer typen kart, legger til muligheten til å panorere kartet og legge til zoomkontrollene. Vi senterer kartet til 0,0.
Kartet leter etter en ny LatLon-variabel som du kobler inn to tall. Jeg brukte 0,0 for å sette kartet der ekvator og premier Meridian møtes. Etterpå er kartet zoomnivået satt. Dette er satt til høyeste høyde mulig. På den måten kan vi se alle naturkatastrofer i hele verden. Deretter kaller vi funksjonen for å begynne å laste inn våre RSS-feeder.
privat funksjon onInit (event: YahooMapEvent): void empty.addChild (map); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = new LatLon (0,0); vulkaner ();
Vi må gå ut av Flash for et sekund og gjøre litt PHP. Da jeg begynte å gjøre dette prosjektet, innså jeg at feeds ikke ville laste inn på nettstedet mitt. En rask og enkel måte som jeg passerte på, var å bruke cURL. Jeg fant en nyttig prøvekode fra Google. Jeg er ikke så sikker på hvor akkurat det kommer fra, men jeg har brukt det samme skriptet en stund nå. Åpne en ny PHP-fil, lim inn i følgende kode og lagre den som "curl.php"
Nå som vi har kalt funksjonen for å begynne å laste inn vulkanen, kan vi se på hva som skjer i funksjonen. Enkelt sagt, vi laster vår curl.php side som laster inn RSS-feed. Vi legger da til en lytter for når siden er ferdig lastet.
private funksjons vulkaner (): void var url: URLLoader = ny URLLoader (); url.addEventListener (Event.COMPLETE, onVolcano); var vars: URLVariables = nye URLVariables (); var req: URLRequest = ny URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = "http://volcanoes.usgs.gov/rss/vhpcaprss.xml" req.data = vars; url.load (req);
I første feed er det noen interessante funksjoner. Den viktigste er geo: punktet. Dette er lengdegrad og lengdegrad for advarselen. I denne feeden er det også en fargekode for å vise aktivitetsnivået for aktiviteten. Med innmatingen lastet, er det to xml lister som skal lastes. Den ene er for breddegrad og lengdegrad. Den andre er for fargekoden.
Lister er gjennomløpt og de nye markørene er opprettet på kartet. Tilpassede filmklipp legges til markørene, disse er laget med funksjoner jeg vil beskrive snart. Fargen på de nestede filmklippene styres ved å bruke egenskapen "colorTransform". Etter at feedet er lastet og markørene er plassert, er neste RSS-feed satt til å lastes. Jeg sender også beskrivelsesteksten til det nyopprettede filmklippet, slik at jeg kan komme til det senere ved å bruke navnet som ble gitt til filmklippet.
privat funksjon onVolcano (hendelse: hendelse): void var vol: Namespace = new Name space ("http://volcano.wr.usgs.gov/rss/volcanons/1.0"); var xml: XML = ny XML (event.target.data); var pointList: XMLList = xml ... geo :: point.text (); var colorList: XMLList = xml ... vol :: colorcode.text (); var streng: streng; for (var jeg: uint; jeg Nå er det på tide å laste jordskjelvene RSS-feed. Funksjonene fungerer ganske mye på samme måte som før.
privat funksjon earthQuakes (): void var url: URLLoader = ny URLLoader (); var vars: URLVariables = nye URLVariables (); var req: URLRequest = ny 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 ikke er fargekode for denne feeden. I stedet endrer jeg bare fargen manuelt til brun. Også beskrivelsen av varselet har noen html i den. Jeg brukte et vanlig uttrykk som jeg kom over fra Google en stund tilbake for å fjerne all HTML ut av den. Uten å gjøre det, vil TextArea-komponenten laste et bilde som jeg ikke vil ha.
En ting å merke seg er at dette er en annen type RSS-feed. Av en eller annen grunn (i min erfaring) Atom feeds liker ikke å analysere riktig. Veien rundt dette var å klatre ned barnetreet til det første elementet. Objektnoden har ikke alltid samme antall barn. Jeg la til en enkel hvis uttalelse for å ta hensyn til det. Til slutt kaller vi funksjonen for å laste den siste av RSS-feeder.
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 jeg: uint; jeg<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ S] +))) + \ s * | \ s *) \ /> / GI?; string = string.replace (mønster, ""); earth.desc = string; tsunamier ();
Det er her vi begynner å laste tsunami-matene. Vi opprettet en tsuCounter slik at vi kan øke tallet hver gang en feed er lastet. Når telleren når slutten av tsuArray, legger vi til endringslytterne til RadioButtonGroup som ble opprettet. Siden jeg vil kunne få tilgang til hver markør som er opprettet i alle grupper, la jeg til tsuCounter til begynnelsen av navnet på filmklippet. På den måten får jeg tilgang til beskrivelsen fra 0Tsunami1 og 1Tsunami1.
Til slutt, når alle feeds er lastet, legger vi hendelseslytteren til RadioButtonGroup
private funksjon tsunamier (): void var url: URLLoader = ny URLLoader (); var vars: URLVariables = nye URLVariables (); var req: URLRequest = ny URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = tsuArray [tsuCounter] req.data = vars; url.addEventListener (Event.COMPLETE, onTsu); url.load (req); privat funksjon onTsu (hendelse: hendelse): void tsuCounter ++; hvis (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); ellers tsunamier (); var xml: XML = ny XML (event.target.data); var liste: XMLList = xml ... geo :: point.text (); var streng: streng; for (var jeg: uint; jeg
Dette er funksjonene som legger til markørene, styrer utseendet på markørene, angir lengdegrad og breddegrad av markørene og lager filmklippene i markørene. DrawMarker-funksjonen lager en ny markør, legger til en dråpeskygge, legger deretter filmklippet til den, passerer samme navn som filmklippet til den, får breddegrad og lengdegrad fra det innlastede RSS-feedet og til slutt legger til hørelyttene. Markøren er lagt til markørManager på kartet. DrawCircle-funksjonen trekker bare en sirkel på 10 piksler bredt. GetLatlon-funksjonen tar strengen som sendes til den, bryter den fra hverandre og returnerer LatLon. Den siste funksjonen, theColor, håndterer de forskjellige fargene som sendes til den gjennom vulkanmaten.
privat funksjon drawMarker (mc: MovieClip, streng: String, navn: String): void var markør: Marker = new Marker (); marker.filters = [ds]; marker.addChild (mc); marker.latlon = getLatlon (streng); marker.name = navn; map.markerManager.addMarker (markør); marker.addEventListener (MouseEvent.ROLL_OVER, overOver); marker.addEventListener (MouseEvent.CLICK, onClick); privat funksjon drawCircle (): MovieClip var mc: MovieClip = ny MovieClip (); mc.graphics.beginFill (0xFF0000, 1); mc.graphics.drawCircle (5,5,5); mc.graphics.endFill (); returnere mc; privat funksjon getLatlon (streng: streng): LatLon var array: Array = string.split (/ [\ s] /); var latlon: LatLon = ny LatLon (array [0], array [1]); retur latlon; privat funksjon theColor (streng: String): ColorTransform var int: uint; bytt (streng) tilfelle "ORANGE": int = 0xFD8000; gå i stykker; saken "GREEN": int = 0x225E33; gå i stykker; standard: int = 0xFF0000; var ct: ColorTransform = ny ColorTransform (); ct.color = int; returnere ct;
Når brukeren ruller over markøren, vises beskrivelsen av varselet i TextArea-komponenten. Dette håndteres gjennom onOver-funksjonen. Målet er kastet som en markør ved å bruke navnet som ble sendt det. Da mottar vi beskrivelsesteksten som ble sendt til filmklippet nestet inne i markøren, og send den til TextArea-komponenten. OnClick-hendelsen panner kartet til hvilken markør som ble klikket. Dette gjøres ved å bruke metoden map.panToLatLon ().
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; privat funksjon onClick (event: MouseEvent): void var markør: Marker = Marker (map.markerContainer.getChildByName (event.target.name)) map.panToLatLon (marker.latlon);
Den endelige hendelsen er onChange-hendelsen. Denne hendelsen slår av alle filmklippet unntatt de valgte knappene. Det panner også kartet til det siste varselet som ble mottatt i RSS-feeden.
privat funksjon onChange (event: Event): void var g: RadioButtonGroup = RadioButtonGroup (event.target); var jeg: uint; var markør: Marker; var panTo: Marker; bytt (g.selection.name) case "radioVolcano": for (i = 0; i
Her ser ut hva den endelige koden ser ut.
pakke import com.yahoo.maps.api.YahooMap; importer com.yahoo.maps.api.YahooMapEvent; importer com.yahoo.maps.api.core.location.LatLon; importer com.yahoo.maps.api.markers.Marker; importere fl.controls.RadioButtonGroup; importere fl.controls.RadioButton; importer flash.display.MovieClip; importer flash.display.Sprite; importere flash.events.Event; importer flash.events.MouseEvent; importer flash.filters.DropShadowFilter; importer flash.geom.ColorTransform; importer flash.net.URLLoader; importere flash.net.URLRequest; importere flash.net.URLRequestMethod; importer flash.net.URLVariabler; importer flash.text.AntiAliasType; importer flash.text.Font; importer flash.text.TextField; importere flash.text.TextFieldAutoSize; importer flash.text.TextFormat; offentlig klasse yahoo_map strekker seg Sprite private static const APPID: String = "DIN APP ID"; privat statisk const CURL: String = "curl.php"; privat var kart: YahooMap; private var ds: DropShadowFilter; private var geo: navnegruppe; privat var tsuArray: Array; privat var tsuCounter: int = 0; privat var farge: ColorTransform; privat var gruppe: RadioButtonGroup; offentlig funksjon yahoo_map () init (); privat 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 = nytt navneglass ("http://www.georss.org/georss"); ds = ny 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, scene.stageWidth, 330); privat funksjon onInit (event: YahooMapEvent): void empty.addChild (map); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = new LatLon (0,0); vulkaner (); private funksjons vulkaner (): void var url: URLLoader = ny URLLoader (); url.addEventListener (Event.COMPLETE, onVolcano); var vars: URLVariables = nye URLVariables (); var req: URLRequest = ny URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = "http://volcanoes.usgs.gov/rss/vhpcaprss.xml" req.data = vars; url.load (req); privat funksjon onVolcano (hendelse: hendelse): void var vol: Namespace = new Name space ("http://volcano.wr.usgs.gov/rss/volcanons/1.0"); var xml: XML = ny XML (event.target.data); var pointList: XMLList = xml ... geo :: point.text (); var colorList: XMLList = xml ... vol :: colorcode.text (); var streng: streng; for (var jeg: uint; jeg<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ S] +))) + \ s * | \ s *) \ /> / GI?; string = string.replace (mønster, ""); earth.desc = string; tsunamier (); private funksjon tsunamier (): void var url: URLLoader = ny URLLoader (); var vars: URLVariables = nye URLVariables (); var req: URLRequest = ny URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = tsuArray [tsuCounter] req.data = vars; url.addEventListener (Event.COMPLETE, onTsu); url.load (req); privat funksjon onTsu (hendelse: hendelse): void tsuCounter ++; hvis (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); ellers tsunamier (); var xml: XML = ny XML (event.target.data); var liste: XMLList = xml ... geo :: point.text (); var streng: streng; for (var jeg: uint; jeg Jeg har knapt riper overflaten for hva YahooMaps har under hetten. Les dokumentasjonen og bruk nøtter!
