Share
I den här handledningen visar jag dig hur du kommer igång med Yahoo! Kartor API i Flash. Vi laddar ett par RSS-flöden och plottar några naturkatastrofvarningar med hjälp av deras längder och breddgrader.
Gå till http://developer.yahoo.com/flash/maps/ och registrera dig för ett App-ID.
Ladda ner den nyaste versionen av komponenten på sidan Yahoos AS3-komponent.
När filen är klar nedladdning, extrahera zip-filen. Navigera till Flash-mappen och installera MXP-filen.
Starta Flash och öppna en ny ActionScript 3.0-fil och spara den i en ny mapp som "yahoo_map.fla".
Ändra scenstorleken till 640x480. Navigera till fliken Komponenter och dra en kopia av YahooMaps-komponenten till scenen. När det är på scenen, radera det. Det kommer att sätta en kopia i biblioteket så att vi kan komma åt det därifrån.
Dra en kopia av TextArea från fliken Komponenter. Ändra storleken på TextArea till en bredd på 640px och en höjd på 100px i egenskapspanelen. Ge det en X-position på 0 och ett Y-läge på 330. Slutligen, ge det ett instansnamn för "textArea".
Dra sedan en kopia av RadioButton från fliken Komponenter. Kopiera och klistra in den tre gånger så att det finns fyra instanser av RadioButton-komponenten på scenen. Rikta dem till toppen och placera dem jämnt ut, så att de är i rak linje bredvid varandra. Dra sedan dem under TextArea-komponenten.
Välj den första alternativknappen. Ge det ett förekomstnamn på "radioAll". Med knappen som fortfarande valts växlar du över till parameterns panel. Ge det ett gruppnamn "Katastrofer". Ändra etikettegenskapen till "All" och den valda egenskapen till "true".
Välj nästa radioknapp. Ge det ett förekomstnamn av "radioEarth", samma gruppnamn "Katastrofer", en etikett med "Jordbävningar" och lämna den markerade egenskapen som "falsk".
Välj den tredje alternativknappen. Dess förekomstnamn är "radioTsu", gruppnamnet är "katastrofer", etiketten är "Tsunamis", och den valda egenskapen är "falsk".
Slutligen, välj den fjärde radioknappen. Det har ett förekomstnamn för "radioVolcano", dess gruppnamn är "Katastrofer", den har en etikett på "Vulkaner" och valda är "false". Eftersom vi vill kunna växla mellan knapparna gav vi dem samma gruppnamn. Rymma dem så, så att de är jämnt fördelade.
Skapa ett separat lager. Placera skiktet under skiktet med TextArea och RadioButton-komponenterna. I bibliotekspanelen, längst ner, välj den nya symbolikonen. Skapa en ny tom filmklipp. Dra en instans till scenen i det nyskapade lagret och ge det ett förekomstnamn på "tomt". Detta filmklipp håller vår karta när den är laddad. Ge det tomma filmklippet en X- och Y-position på 0. På så sätt är den kantad med scenens övre vänstra hörn.
Gå till filen> ny och välj en ny ActionScript-fil. Spara filen i samma katalog som din "yahoo_map" FLA-fil med namnet "yahoo_map.as". I ditt yahoo_map FLA-dokument skriver du "yahoo_map" i fältet Dokument klass i egenskapsfältet. Detta kommer att göra din actionscript-fil Dokumentklassen för din yahoo_map FLA.
Det här är den grundläggande inställningen för vår dokumentklass:
paket import flash.display.Sprite; public class yahoo_map utökar Sprite public function yahoo_map ()
Det här är de uttalanden som kommer att driva YahooMap API
paket import com.yahoo.maps.api.YahooMap; importera com.yahoo.maps.api.YahooMapEvent; importera com.yahoo.maps.api.core.location.LatLon; importera com.yahoo.maps.api.markers.Marker; importera flash.display.Sprite; public class yahoo_map utökar Sprite public function yahoo_map ()
Lägg bara till dessa under importen av YahooMaps. Se till att de ligger över klassdeklarationen.
paket import com.yahoo.maps.api.YahooMap; importera com.yahoo.maps.api.YahooMapEvent; importera com.yahoo.maps.api.core.location.LatLon; importera com.yahoo.maps.api.markers.Marker; importera fl.controls.RadioButtonGroup; importera fl.controls.RadioButton; importera flash.display.Sprite; importera flash.display.MovieClip; importera flash.events.Event; importera flash.events.MouseEvent; importera flash.filters.DropShadowFilter; importera flash.geom.ColorTransform; importera flash.net.URLLoader; importera flash.net.URLRequest; importera flash.net.URLRequestMethod; importera flash.net.URLVariabler; importera flash.text.AntiAliasType; importera flash.text.Font; importera flash.text.TextField; importera flash.text.TextFieldAutoSize; importera flash.text.TextFormat; public class yahoo_map utökar Sprite public function yahoo_map ()
Här kommer vi att delcare de globala variablerna. Vi behöver det app-ID som du har från YahooMaps-sidan och vi måste använda några php senare för att ladda flödena till Flash. Det är därför vi har CURL-konstanten. Se till att dessa placeras under klassdeklarationen men ovanför den huvudsakliga offentliga funktionen.
offentlig klass yahoo_map sträcker sig Sprite privat statisk const APPID: String = "DITT APP ID"; privat statisk const CURL: String = "curl.php"; privat var karta: YahooMap; privat var ds: DropShadowFilter; privat var geo: namnrymd; privat var tsuArray: Array; privat var tsuCounter: int = 0; privat var färg: ColorTransform; privat var grupp: RadioButtonGroup; allmän funktion yahoo_map ()
Här instämmer vi alla våra variabler. Efter att ha sökt på Google hittade jag fyra RSS-flöden för tsunami-varningar från weather.gov. Jag lade dem in i tsuArray-variabeln, så att jag kan ladda dem en åt gången. Geo namespace kommer att hjälpa till med att komma till latitud och longitud för alla RSS-flöden. Det finns också en ny RadioButtonGroup som hanterar växling av RadioButton-komponenterna på scenen. Slutligen ringer jag till handtagetMap-funktionen. Det kommer att starta kartläggningsprocessen.
Accentsconagua
allmän funktion yahoo_map () init (); privat 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 = nytt namnrymd ("http://www.georss.org/georss"); ds = ny DropShadowFilter (2,90,0x00000,0,75,2,2,1,3); color = new ColorTransform (); group = new RadioButtonGroup ("Disasters"); handleMap (); Här börjar vi arbeta med kartens grunder och där vi ska använda vårt app-id. Även när vi kallar metoden map.init () dikterar vi den storlek vi vill att kartan ska vara. Kartan blir scenens bredd och har en höjd som berör toppen av TextArea-komponenten. Vi lyssnar också på MAP_INITALIZE-händelsen.
privatfunktionshandbokKort (): void map = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330);
När kartan initialiseras, kommer den att tända onInit-funktionen. Här lägger vi till kartan till det tomma filmklippet som placerades på scenen. På så sätt laddas kartan under TextArea och RadioButton-komponenterna - bara om det är fallet. Vi lägger sedan till zoomningen, panelen och typ widgets. Dessa styr typ av karta, lägg till möjligheten att panorera kartan och lägga till zoomreglagen. Vi centrerar kartan till 0,0.
Kartan letar efter en ny LatLon-variabel där du ansluter två siffror. Jag använde 0,0 för att ställa in kartan där ekvator och Prime Meridian träffas. Därefter är kartan zoomnivå inställd. Detta är inställt på högsta möjliga höjd. På så sätt kan vi se alla naturkatastrofvarningar över hela världen. Nästa kallar vi funktionen för att börja ladda våra RSS-flöden.
privat funktion onInit (händelse: YahooMapEvent): void empty.addChild (map); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = new LatLon (0,0); vulkaner ();
Vi måste gå ut ur Flash för en sekund och göra lite PHP. När jag började göra detta projekt insåg jag att flöden inte skulle ladda på min hemsida. Ett snabbt och enkelt sätt som jag passerade det var att använda cURL. Jag hittade en användbar provkod från Google. Jag är inte säker på var exakt det kom ifrån, men jag har använt samma manus för en tid nu. Öppna en ny PHP-fil, klistra in i följande kod och spara den som "curl.php"
Nu när vi har ringt funktionen för att starta laddning av vårt vulkanmata kan vi titta på vad som händer inom funktionen. Enkelt uttryckt, laddar vi vår curl.php sida som laddar RSS-flödet. Vi lägger sedan till en lyssnare för när sidan är klar att ladda.
privata funktions vulkaner (): void var url: URLLoader = ny URLLoader (); url.addEventListener (Event.COMPLETE, onVolcano); var vars: URLVariables = nya 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 det första flödet finns det några intressanta funktioner. Den viktigaste är geo: punkten. Detta är latitud och longitud för varningen. I det här flödet finns också en färgkod för att visa aktivitetsvarningsnivån. Med matningen laddad finns det två xml-listor som ska laddas. En är för latitud och longitud. Den andra är för färgkoden.
Listorna lutas igenom och de nya markörerna skapas på kartan. Anpassade filmklipp läggs till markörerna, dessa är gjorda med hjälp av funktioner som jag kommer att beskriva snart. Färgen på de kapslade filmklippen styrs med egenskapen "colorTransform". När matningen är laddad och markörerna placeras, är nästa RSS-matning inställd att ladda. Jag skickar också beskrivningstexten till det nyskapade filmklippet, så att jag kan komma till det senare med namnet som gavs till filmklippet.
privat funktion onVolcano (händelse: Händelse): void var vol: Namespace = new Namnrymd ("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 sträng: String; för (var jag: uint; jag Nu är det dags att ladda jordbävningarna RSS-flöde. Funktionerna fungerar ganska mycket på samma sätt som tidigare.
privat funktion earthQuakes (): void var url: URLLoader = ny URLLoader (); var vars: URLVariables = nya 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);
Skillnaderna är att det inte finns någon färgkod för detta flöde. Istället ändrar jag bara färgen manuellt till brunt. Beskrivningen av varningen har också lite html inuti den. Jag använde ett regelbundet uttryck som jag kom över från Google ett tag tillbaka för att radera all HTML ut ur den. Utan att göra det kommer TextArea-komponenten att ladda en bild som jag inte ville ha.
En sak att notera är att det här är en annan typ av RSS-flöde. Av någon anledning (enligt min erfarenhet) gillar Atom-flöden inte att analysera korrekt. Vägen kring detta var att klättra upp barnträet till det första objektet. Objektnoden har inte alltid samma antal barn. Jag lade till en enkel om uttalande att redovisa för det. Slutligen kallar vi funktionen för att ladda den senaste av RSS-flödena.
privat funktion onEarthQuake (händelse: Händelse): void var xml: XML = new XML (event.target.data); var lista: XMLList = xml ... geo :: point.text (); var sträng: String för (var jag: uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ S] +))) + \ s * | \ s *) \ /> / gi??; string = string.replace (mönster, ""); earth.desc = string; tsunamier ();
Här börjar vi ladda tsunaminmatningarna. Vi skapade en tsuCounter så att vi kan öka numret varje gång ett flöde laddas. När räknaren når slutet av tsuArray lägger vi till ändringslyttarna till den RadioButtonGroup som skapades. Eftersom jag vill kunna komma åt varje markör som skapats i varje grupp, lade jag till tsuCounter i början av namnet på filmklippet. På så sätt kan jag komma åt beskrivningen från 0Tsunami1 och 1Tsunami1.
Slutligen, när alla flöden har laddats, lägger vi till händelselisten till RadioButtonGroup
privata funktions-tsunamier (): void var url: URLLoader = ny URLLoader (); var vars: URLVariables = nya 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 funktion onTsu (händelse: händelse): void tsuCounter ++; om (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); annars tsunamier (); var xml: XML = ny XML (event.target.data); var lista: XMLList = xml ... geo :: point.text (); var sträng: String; för (var jag: uint; jag
Det här är de funktioner som lägger till markörerna, kontrollerar markörens utseende, ställer in markörernas längd och bredd och skapar filmklipp i markörerna. DrawMarker-funktionen skapar en ny markör, lägger till en droppskugga, lägger till filmklippet till den, passar samma namn som filmklippet till den, får latitud och longitud från det laddade RSS-flödet och lägger till slut händelsehörarna. Markören läggs till med markörens mappare. DrawCircle-funktionen drar bara en cirkel på 10 pixlar bred. GetLatlon-funktionen tar den sträng som passeras till den, bryter den och skiljer LatLon. Den sista funktionen, theColor, hanterar de olika färgerna som passerat till den genom vulkanmatningen.
privat funktion drawMarker (mc: MovieClip, sträng: String, namn: String): void var marker: Marker = new Marker (); marker.filters = [ds]; marker.addChild (mc); marker.latlon = getLatlon (sträng); markör.namn = namn; map.markerManager.addMarker (markör); marker.addEventListener (MouseEvent.ROLL_OVER, onOver); marker.addEventListener (MouseEvent.CLICK, onClick); privat funktion drawCircle (): MovieClip var mc: MovieClip = ny MovieClip (); mc.graphics.beginFill (0xFF0000, 1); mc.graphics.drawCircle (5,5,5); mc.graphics.endFill (); returnera mc; privat funktion getLatlon (sträng: String): LatLon var array: Array = string.split (/ [\ s] /); var latlon: LatLon = ny LatLon (array [0], array [1]); återvändande latlon; privat funktion theColor (sträng: String): ColorTransform var int: uint; byta (sträng) fall "ORANGE": int = 0xFD8000; ha sönder; fallet "GREEN": int = 0x225E33; ha sönder; standard: int = 0xFF0000; var ct: ColorTransform = ny ColorTransform (); ct.color = int; returnera ct;
När användaren rullar över markören visas beskrivningen av varningen i TextArea-komponenten. Detta hanteras genom onOver-funktionen. Målet kastas som en markör med namnet som passerade det. Därefter får vi beskrivningstexten som skickades till filmklippet nestad inuti markören och skickar den till TextArea-komponenten. OnClick-händelsen pannar kartan till vilken markör som helst. Detta görs genom att använda metoden map.panToLatLon ().
privat funktion onOver (händelse: 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; privat funktion onClick (händelse: MouseEvent): void var marker: Marker = Marker (map.markerContainer.getChildByName (event.target.name)) map.panToLatLon (marker.latlon);
Den sista händelsen är händelsen onChange. Denna händelse stänger av alla filmklipp utom de valda knapparna. Det pannar också kartan till den senaste varningen som mottogs i RSS-flödet.
privat funktion onChange (händelse: Händelse): void var g: RadioButtonGroup = RadioButtonGroup (event.target); var jag: uint; var markör: Marker; var panTo: Marker; switch (g.selection.name) case "radioVolcano": för (i = 0; i
Här är vad den sista koden ser ut.
paket import com.yahoo.maps.api.YahooMap; importera com.yahoo.maps.api.YahooMapEvent; importera com.yahoo.maps.api.core.location.LatLon; importera com.yahoo.maps.api.markers.Marker; importera fl.controls.RadioButtonGroup; importera fl.controls.RadioButton; importera flash.display.MovieClip; importera flash.display.Sprite; importera flash.events.Event; importera flash.events.MouseEvent; importera flash.filters.DropShadowFilter; importera flash.geom.ColorTransform; importera flash.net.URLLoader; importera flash.net.URLRequest; importera flash.net.URLRequestMethod; importera flash.net.URLVariabler; importera flash.text.AntiAliasType; importera flash.text.Font; importera flash.text.TextField; importera flash.text.TextFieldAutoSize; importera flash.text.TextFormat; offentlig klass yahoo_map sträcker sig Sprite privat statisk const APPID: String = "DITT APP ID"; privat statisk const CURL: String = "curl.php"; privat var karta: YahooMap; privat var ds: DropShadowFilter; privat var geo: namnrymd; privat var tsuArray: Array; privat var tsuCounter: int = 0; privat var färg: ColorTransform; privat var grupp: RadioButtonGroup; allmän funktion yahoo_map () init (); privat 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 = nytt namnrymd ("http://www.georss.org/georss"); ds = ny DropShadowFilter (2,90,0x00000,0,75,2,2,1,3); group = new RadioButtonGroup ("Disasters"); handleMap (); privatfunktionshandbokMap (): void map = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330); privat funktion onInit (händelse: YahooMapEvent): void empty.addChild (map); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = new LatLon (0,0); vulkaner (); privata funktions vulkaner (): void var url: URLLoader = ny URLLoader (); url.addEventListener (Event.COMPLETE, onVolcano); var vars: URLVariables = nya 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 funktion onVolcano (händelse: Händelse): void var vol: Namespace = new Namnrymd ("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 sträng: String; för (var jag: uint; jag<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ S] +))) + \ s * | \ s *) \ /> / gi??; string = string.replace (mönster, ""); earth.desc = string; tsunamier (); privata funktions-tsunamier (): void var url: URLLoader = ny URLLoader (); var vars: URLVariables = nya 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 funktion onTsu (händelse: händelse): void tsuCounter ++; om (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); annars tsunamier (); var xml: XML = ny XML (event.target.data); var lista: XMLList = xml ... geo :: point.text (); var sträng: String; för (var jag: uint; jag Jag har knappt repat ytan för vad YahooMaps har under huven. Läs dokumentationen och gå på nötter!
