Animēta karte ar JavaScript

Pašlaik tīmeklī atrodamo lietojumprogrammu daudzveidība svārstās no vienkāršākajām līdz sarežģītākajām, kas var atspoguļot dažādus scenārijus, kurus, pateicoties jaunajām tehnoloģijām, ir daudz vieglāk sasniegt.

Viens no šiem daudzajiem scenārijiem ir iespēja attēlot maršrutus kartē, un, lai gan tas var izklausīties pēc uzdevuma, kura izpilde var aizņemt nedēļas, pateicoties bibliotēkai amCharts mēs to varam izdarīt bez mazākās piepūles.

HTML kods

Mūsu kods HTML Tas būs pavisam vienkārši, tam būs standarta struktūra, un tajā ir svarīgi veikt bibliotēkas ieslēgumus. amChartskā arī mūsu stila lapu un .js failu. kur mēs veiksim lielāko daļu darba:

 Animēta karte ar JavaScript

Viena no mūsu galvenajām daļām HTML ir pievienot div, kam būs ID, ko mēs izmantosim savas kartes atveidošanai, un tas ir tas, kuru mēs saistīsim savā .js, šajā gadījumā mēs to saucam animēta karte.

Stila lapa

Mūsu stila lapa būs diezgan vienkārša, tur mēs definēsim tikai platumu un augstumu, lai parādītu mūsu karti, šajā gadījumā mēs to darīsim pilnekrāna režīmā:

 pamatteksts, html {platums: 100%; augstums: 100%; piemale: 0} #AnimationMap {platums: 100%; augstums: 100%; }

Kad tas ir izdarīts, nodosim mūsu piemēra kodolu, kas būtu kods JavaScript.

JavaScript kods

Vispirms mums ir jāinicializē karte ar funkciju makeChart un tajā definējiet šīs vispārīgās iespējas, jo ar šo funkciju mēs varam izveidot ne tikai kartes, bet arī dažādas visu veidu grafikas. Šim nolūkam mēs definējam tekstu veidu, kartes modeli, tālummaiņas līmeņus un pat fontu:

 AmCharts.makeChart ("Animatedmap", {type: "map", fontSize: 20, balloon: {horizontalPadding: 20, verticalPadding: 15}, creditsPosition: "top-right", dataProvider: {map: "worldLow", zoomLevel: 3,5, tālummaiņas garums: -55, tālummaiņas platums: 42,});

Papildus tam mēs varam mainīt citas kartes iespējas, piemēram, krāsas, līnijas un animāciju ilgumu, ko varam izmantot atbilstoši mūsu izvēlētajai kartei, šajā gadījumā tā ir karte, kas attēlo lidojuma kartes, lai mēs varētu ātri tas var aiziet uz lidmašīnas ikonas un cik tālu jūs varat stāvēt starp punktu un punktu.

 laukumiIestatījumi: {unlistedAreasColor: "# 9bc5f5"}, imagesSettings: {color: "# 4e985c", rollOverColor: "# 4e985c", selectedColor: "# 4e985c", pauseDuration: 0.2, animationDuration: 2.5: AdjustAnimationSpeed {color: "# 4e985c", alfa: 0.4}

Kad esam apmierināti ar mūsu piedāvātajām iespējām, mums vienkārši jāredz, kā mūsu animētā karte izskatās pārlūkprogrammā.

Tas, kā mēs to redzam, izskatās diezgan labi un ļaus mūsu lietojumprogrammai piešķirt atšķirīgu stilu, lai vienkāršā veidā attēlotu sarežģītus scenārijus, izmantojot šīs priekšrocības JavaScript un trešo pušu bibliotēkas, kas mums daudz atvieglo dzīvi.

animēta karte JavaScript.zip 1.86K 169 lejupielādes