Share
In deze zelfstudie laat ik u zien hoe u aan de slag kunt gaan met de Yahoo! Maps API in Flash. We laden een aantal RSS-feeds in en brengen een aantal natuurrampwaarschuwingen uit met behulp van hun lengte- en breedtegraden.
Ga naar http://developer.yahoo.com/flash/maps/ en meld u aan voor een app-ID.
Download de nieuwste versie van de component op de Yahoo Map AS3 Component-pagina.
Wanneer het bestand klaar is met downloaden, extraheert u het zipbestand. Navigeer naar de Flash-map en installeer het MXP-bestand.
Start Flash en open een nieuw ActionScript 3.0-bestand en sla het vervolgens op in een nieuwe map als "yahoo_map.fla".
Verander de stage-grootte naar 640x480. Navigeer naar het tabblad Componenten en sleep een kopie van de component YahooMaps naar het werkgebied. Zodra het op het podium staat, verwijder het dan. Dat zet een kopie in de bibliotheek, zodat we vanaf daar toegang hebben.
Sleep een kopie van de TextArea vanaf het tabblad Componenten. Wijzig in het eigenschappenvenster de grootte van de TextArea naar een breedte van 640 px en een hoogte van 100 px. Geef het een X-positie van 0 en een Y-positie van 330. Geef ten slotte een instantienaam van "textArea".
Sleep vervolgens een kopie van de RadioButton vanaf het tabblad Componenten. Kopieer het en plak het drie keer, zodat er vier instanties van de RadioButton-component op het podium zijn. Lijn ze uit naar de bovenkant en spreid ze gelijkmatig uit, zodat ze recht in een rechte lijn naast elkaar staan. Sleep ze vervolgens onder de component TextArea.
Selecteer het eerste keuzerondje. Geef het een instantienaam van "radioAll". Terwijl de knop nog steeds is geselecteerd, schakelt u over naar het parametervenster. Geef het een groepsnaam van "Rampen". Wijzig de labelproperty in "All" en de geselecteerde eigenschap in "true".
Selecteer het volgende keuzerondje. Geef het een instantienaam van "radioEarth", dezelfde groepsnaam "Rampen", een label van "Aardbevingen" en laat de geselecteerde eigenschap als "false".
Selecteer het derde keuzerondje. De instantienaam is "radioTsu", de groepsnaam is "Ramp", het label is "Tsunamis" en de geselecteerde eigenschap is "false".
Selecteer ten slotte het vierde keuzerondje. Het heeft een instantienaam van "radioVolcano", de groepsnaam is "Rampen", het heeft een label van "Vulkanen" en geselecteerd is "false". Omdat we kunnen schakelen tussen de knoppen, hebben we ze dezelfde groepsnaam gegeven. Plaats ze overeenkomstig, zodat ze gelijkmatig verdeeld zijn.
Maak een aparte laag. Plaats de laag onder de laag met TextArea- en RadioButton-componenten. Selecteer onderaan in het bibliotheekpaneel het nieuwe symboolpictogram. Maak een nieuwe lege filmclip. Sleep een instantie naar het werkgebied in de nieuw gemaakte laag en geef deze een instantienaam van "leeg". Deze filmclip houdt onze kaart vast wanneer deze is geladen. Geef de lege filmclip een X- en Y-positie van 0. Op die manier staat hij in de linkerbovenhoek van het werkgebied.
Ga naar bestand> nieuw en selecteer een nieuw ActionScript-bestand. Bewaar het bestand in dezelfde map als uw "yahoo_map" FLA-bestand met de naam "yahoo_map.as". Typ "yahoo_map" in het veld Documentklasse in uw yahoo_map FLA-document in het eigenschappenvenster. Hierdoor wordt uw actionscript-bestand de klasse Document voor uw yahoo_map FLA.
Dit is de basisconfiguratie voor onze documentklasse:
pakket import flash.display.Sprite; public class yahoo_map breidt Sprite uit public function yahoo_map ()
Dit zijn de uitspraken die de YahooMap API zullen aansturen
pakket 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 breidt Sprite uit public function yahoo_map ()
Voeg deze gewoon toe onder de importverklaring van YahooMaps. Zorg ervoor dat ze hoger zijn dan de klasseverklaring.
pakket 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 breidt Sprite uit public function yahoo_map ()
Hier gaan we de globale variabelen delcare. We hebben de app-ID nodig die je van de YahooMaps-pagina hebt gekregen en we zullen later wat php moeten gebruiken om de feeds in Flash te laden. Dat is waarom we de CURL constant hebben. Zorg ervoor dat deze onder de klasseverklaring worden geplaatst, maar boven de openbare hoofdfunctie.
public class yahoo_map breidt Sprite uit private static const APPID: String = "UW APP-ID"; private static const CURL: String = "curl.php"; persoonlijke var-kaart: YahooMap; privé var ds: DropShadowFilter; private var geo: Namespace; private var tsuArray: Array; private var tsuCounter: int = 0; privé var kleur: ColorTransform; privé var-groep: RadioButtonGroup; openbare functie yahoo_map ()
Hier zullen we al onze variabelen instantiëren. Na het zoeken naar Google, vond ik vier RSS-feeds voor tsunami-waarschuwingen van weather.gov. Ik heb die in de tsuArray-variabele geladen, zodat ik ze een voor een kan laden. De geo-naamruimte helpt om de breedtegraad en lengtegraad van alle RSS-feeds te bereiken. Er is ook een nieuwe RadioButtonGroup die het omschakelen van de RadioButton-componenten op het werk afhandelt. Ten slotte noem ik de handleMap-functie. Hiermee wordt het laden van de kaart gestart.
Accentsconagua
openbare functie yahoo_map () init (); private function 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 = nieuwe naamruimte ("http://www.georss.org/georss"); ds = nieuwe DropShadowFilter (2,90,0x00000,0.75,2,2,1,3); color = new ColorTransform (); group = new RadioButtonGroup ("Disasters"); handleMap (); Hier gaan we aan de slag met de basisbeginselen van de kaart en gebruiken we onze app-ID. Wanneer we de methode map.init () aanroepen, dicteren we de grootte die we willen dat de kaart is. De kaart is de breedte van het werkgebied en heeft een hoogte die de bovenkant van het TextArea-onderdeel raakt. We luisteren ook naar het MAP_INITALIZE-evenement.
private function handleMap (): void map = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330);
Wanneer de kaart wordt geïnitialiseerd, wordt de onInit-functie geactiveerd. Hier zullen we de kaart toevoegen aan de lege filmclip die op het podium is geplaatst. Op die manier laadt de kaart onder de componenten TextArea en RadioButton - voor het geval dat. Vervolgens voegen we de widgets voor zoomen, pannen en typen toe. Deze bepalen het type kaart, voegen de mogelijkheid toe om de kaart te verschuiven en de zoomknoppen toe te voegen. We centreren de kaart naar 0,0.
De kaart zoekt naar een nieuwe LatLon-variabele waaraan u twee nummers koppelt. Ik gebruikte 0,0 om de kaart in te stellen op de plek waar de evenaar en de meridiaan samenkomen. Daarna wordt het zoomniveau van de kaarten ingesteld. Dit is ingesteld op de hoogst mogelijke hoogte. Op die manier kunnen we alle natuurrampwaarschuwingen overal ter wereld bekijken. Vervolgens bellen we met de functie om onze RSS-feeds te laden.
private function onInit (event: YahooMapEvent): void empty.addChild (map); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = nieuwe LatLon (0,0); vulkanen ();
We moeten een seconde uit Flash stappen en een beetje PHP doen. Toen ik aan dit project begon, besefte ik dat de feeds niet op mijn website konden worden geladen. Een snelle en gemakkelijke manier om dit te omzeilen was om cURL te gebruiken. Ik heb een bruikbare voorbeeldcode van Google gevonden. Ik weet niet zeker waar het precies vandaan is gekomen, maar ik gebruik al een tijdje hetzelfde script. Open een nieuw PHP-bestand, plak de volgende code in en bewaar deze als "curl.php"
Nu we de functie hebben gebeld om te beginnen met het laden van onze vulkaanvoeding, kunnen we een kijkje nemen naar wat er in de functie gebeurt. Simpel gezegd, we laden onze curl.php-pagina die de RSS-feed laadt. We voegen vervolgens een luisteraar toe voor wanneer de pagina klaar is met laden.
private function vulkanen (): 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);
In de eerste feed zijn er een paar interessante functies. De belangrijkste is het geo: punt. Dit is de breedtegraad en lengtegraad van de waarschuwing. Ook is er in deze feed een kleurcode om het waarschuwingsniveau van de activiteit weer te geven. Wanneer de feed is geladen, zijn er twee XML-lijsten die worden geladen. Eén is voor de breedte- en lengtegraad. De andere is voor de kleurcode.
De lijsten worden doorgelust en de nieuwe markeringen worden op de kaart gemaakt. Aangepaste filmclips worden toegevoegd aan de markeringen, deze worden gemaakt met behulp van functies die ik binnenkort zal beschrijven. De kleur van de geneste filmclips wordt beheerd met behulp van de eigenschap "colorTransform". Nadat de feed is geladen en de markeringen zijn geplaatst, wordt de volgende RSS-feed ingesteld om te laden. Ik geef de beschrijvende tekst ook door aan de nieuw gemaakte filmclip, zodat ik deze later kan openen met de naam die aan de filmclip is gegeven.
private function onVolcano (event: Event): void var vol: Namespace = new Namespace ("http://volcano.wr.usgs.gov/rss/volcanons/1.0"); var xml: XML = nieuwe XML (event.target.data); var pointList: XMLList = xml ... geo :: point.text (); var colorList: XMLList = xml ... vol :: colorcode.text (); var string: String; for (var i: uint; i Nu is het tijd om de RSS-feed voor aardbevingen te laden. De functies werken vrijwel hetzelfde als voorheen.
private function 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);
Het verschil is dat er geen kleurcode is voor deze feed. In plaats daarvan verander ik de kleur handmatig in bruin. Ook bevat de beschrijving van de waarschuwing wat html erin. Ik gebruikte een reguliere expressie die ik een tijdje geleden tegenkwam bij Google om alle HTML eruit te verwijderen. Zonder dat te doen laadt de TextArea-component een afbeelding, wat ik niet wilde.
Nog een ding om op te merken is dat dit een ander type RSS-feed is. Om een of andere reden (in mijn ervaring) houden Atom-feeds niet van goed parseren. De manier om dit heen was om de onderliggende boom naar het eerste item te klimmen. Ook heeft het itemknooppunt niet altijd hetzelfde aantal kinderen. Ik voegde een simpele toe als verklaring om er rekening mee te houden. Ten slotte noemen we de functie om de laatste RSS-feeds te laden.
private function onEarthQuake (event: Event): void var xml: XML = nieuwe XML (event.target.data); var list: XMLList = xml ... geo :: point.text (); var string: String for (var i: uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ S] +))) + \ s * | \ s *) \ /> / gi?; string = string.replace (patroon, ""); earth.desc = string; tsunamis ();
Dit is waar we de tsunami-feeds beginnen te laden. We hebben een tsuCounter gemaakt, zodat we het aantal kunnen verhogen telkens een feed wordt geladen. Wanneer de teller het einde van de tsuArray bereikt, voegen we de change listeners toe aan de RadioButtonGroup die is gemaakt. Omdat ik toegang wil hebben tot elke markering die in elke array is gemaakt, heb ik tsuCounter toegevoegd aan het begin van de naam van de filmclip. Op die manier krijg ik toegang tot de beschrijving van 0Tsunami1 en 1Tsunami1.
Ten slotte voegen we, wanneer alle feeds zijn geladen, de gebeurtenislistener toe aan de RadioButtonGroup
private function 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); private function onTsu (event: Event): void tsuCounter ++; if (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); else tsunamis (); var xml: XML = nieuwe XML (event.target.data); var list: XMLList = xml ... geo :: point.text (); var string: String; for (var i: uint; i
Dit zijn de functies die de markeringen toevoegen, het uiterlijk van de markeringen regelen, de lengtegraad en breedtegraad van de markeringen instellen en de filmclips in de markeringen maken. De functie DrawMarker maakt een nieuwe markering, voegt een slagschaduw toe, voegt er vervolgens de filmclip aan toe, geeft dezelfde naam door als de filmclip, haalt de breedtegraad en lengtegraad van de geladen RSS-feed en voegt uiteindelijk de gebeurtenislisteners toe. De markering is de markerManager van de kaart. De functie drawCircle tekent gewoon een cirkel van 10 pixels breed. De functie getLatlon neemt de tekenreeks door die eraan wordt doorgegeven, breekt deze uit elkaar en retourneert de LatLon. De laatste functie, de Color, verwerkt de verschillende kleuren die er door de vulkaanvoeding aan worden doorgegeven.
private functie drawMarker (mc: MovieClip, string: String, naam: String): void var marker: Marker = new Marker (); marker.filters = [ds]; marker.addChild (mc); marker.latlon = getLatlon (string); marker.name = naam; 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 (); terugkeer mc; private function getLatlon (string: String): LatLon var array: Array = string.split (/ [\ s] /); var latlon: LatLon = new LatLon (array [0], array [1]); return latlon; private function theColor (string: String): ColorTransform var int: uint; switch (string) case "ORANGE": int = 0xFD8000; breken; hoofdletter "GROEN": int = 0x225E33; breken; standaard: int = 0xFF0000; var ct: ColorTransform = new ColorTransform (); ct.color = int; return ct;
Wanneer de gebruiker over de markering rolt, wordt de beschrijving van de waarschuwing weergegeven in de component TextArea. Dit wordt afgehandeld via de functie onOver. Het doelwit wordt gegoten als een markering met behulp van de naam die is doorgegeven. Vervolgens ontvangen we de beschrijvende tekst die is doorgegeven aan de filmclip die is genest in de markering en deze naar de component TextArea stuurt. De onClick-gebeurtenis pans de kaart naar welke marker werd geklikt. Dit wordt gedaan met behulp van de methode map.panToLatLon ().
private function 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; private functie onClick (event: MouseEvent): void var marker: Marker = Marker (map.markerContainer.getChildByName (event.target.name)) map.panToLatLon (marker.latlon);
Het laatste evenement is de gebeurtenis onChange. Met deze gebeurtenis worden alle filmclips uitgeschakeld, behalve de geselecteerde knoppen. Het paneert ook de kaart naar de meest recente waarschuwing die werd ontvangen in de RSS-feed.
private function onChange (event: Event): void var g: RadioButtonGroup = RadioButtonGroup (event.target); var i: uint; var marker: Marker; var panTo: Marker; schakelen (g.selection.name) case "radioVolcano": for (i = 0; i
Hier is hoe de definitieve code eruit ziet.
pakket 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; import flash.text.AntiAliasType; import flash.text.Font; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; public class yahoo_map breidt Sprite uit private static const APPID: String = "UW APP-ID"; private static const CURL: String = "curl.php"; persoonlijke var-kaart: YahooMap; privé var ds: DropShadowFilter; private var geo: Namespace; private var tsuArray: Array; private var tsuCounter: int = 0; privé var kleur: ColorTransform; privé var-groep: RadioButtonGroup; openbare functie yahoo_map () init (); private function 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 = nieuwe naamruimte ("http://www.georss.org/georss"); ds = nieuwe 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); private function onInit (event: YahooMapEvent): void empty.addChild (map); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = nieuwe LatLon (0,0); vulkanen (); private functie vulkanen (): 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); private function onVolcano (event: Event): void var vol: Namespace = new Namespace ("http://volcano.wr.usgs.gov/rss/volcanons/1.0"); var xml: XML = nieuwe XML (event.target.data); var pointList: XMLList = xml ... geo :: point.text (); var colorList: XMLList = xml ... vol :: colorcode.text (); var string: String; for (var i: uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ S] +))) + \ s * | \ s *) \ /> / gi?; string = string.replace (patroon, ""); earth.desc = string; tsunamis (); private function 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); private function onTsu (event: Event): void tsuCounter ++; if (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); else tsunamis (); var xml: XML = nieuwe XML (event.target.data); var list: XMLList = xml ... geo :: point.text (); var string: String; for (var i: uint; i Ik heb nauwelijks het oppervlak bekrast voor wat YahooMaps onder de motorkap heeft. Lees de documentatie en word gek!
