Animert kart med JavaScript

For øyeblikket varierer mangfoldet av applikasjoner vi kan finne på nettet fra de enkleste til de mest komplekse, noe som kan representere forskjellige scenarier som takket være ny teknologi er mye lettere å oppnå.

Et av disse mange scenariene er muligheten for å representere ruter på et kart, og selv om det kan høres ut som en oppgave som kan ta oss uker å fullføre, takket være biblioteket til amCharts vi kan gjøre det uten minst mulig innsats.

HTML -kode

Koden vår HTML Det vil være ganske enkelt, det vil ha en standard struktur og det som er viktig å gjøre i det er å gjøre inkluderingene av biblioteket til amChartssamt stilarket og .js -filen. som vil være der vi skal gjøre det meste av arbeidet:

 Animert kart med JavaScript

En av de grunnleggende delene av vår HTML er å legge til en div som vil ha ID -en som vi vil bruke for å gjengi kartet vårt, og det er det vi vil koble til i vår .js, i dette tilfellet kaller vi det animert kart.

Stilark

Stilarket vårt vil være ganske enkelt, der vil vi bare definere bredden og høyden for å vise kartet vårt, i dette tilfellet vil vi gjøre det i fullskjerm:

 body, html {bredde: 100%; høyde: 100%; margin: 0} #AnimationMap {bredde: 100%; høyde: 100%; }

Når dette er gjort, la oss passere kjernen i vårt eksempel, som ville være koden JavaScript.

JavaScript -kode

Først må vi initialisere kartet vårt med funksjonen makeChart og innenfor det definere de generelle alternativene for dette, siden vi med denne funksjonen ikke bare kan lage kart, men også forskjellige grafikker av alle slag. For dette definerer vi typen, kartmodellen, zoomnivåene og til og med skriften for tekstene:

 AmCharts.makeChart ("Animert kart", {type: "map", fontSize: 20, ballong: {horizontalPadding: 20, verticalPadding: 15}, creditsPosition: "øverst til høyre", dataProvider: {map: "worldLow", zoomLevel: 3,5, zoomLengdegrad: -55, zoomLatitude: 42,});

I tillegg til dette kan vi endre andre alternativer på kartet, for eksempel farger, linjer og varighet på animasjonene som vi kan bruke i henhold til kartet vi har valgt, i dette tilfellet er det et kart for å representere flykart slik at vi kan hvordan raskt kan det gå flyikonet og hvor langt du kan stå mellom punkt og punkt.

 areasSettings: {unlistedAreasColor: "# 9bc5f5"}, imagesSettings: {color: "# 4e985c", rollOverColor: "# 4e985c", selectedColor: "# 4e985c", pauseDuration: 0.2, animationDuration: 2.5, adjustAnimationSpeed: 2.5 {color: "# 4e985c", alfa: 0.4}

Når vi er fornøyd med alternativene vi har plassert, må vi bare se hvordan det animerte kartet vårt ser ut i nettleseren.

Hvordan vi ser det ser ganske bra ut og vil tillate oss å gi applikasjonen vår en annen stil for å representere vanskelige scenarier på en enkel måte, dette ved å bruke fordelene av JavaScript og tredjepartsbiblioteker som gjør livet mye lettere for oss.

animert kart JavaScript.zip 1.86K 169 Nedlastinger