Animowana mapa z JavaScript

Obecnie różnorodność aplikacji, które możemy znaleźć w sieci waha się od najprostszych do najbardziej złożonych, które mogą reprezentować różne scenariusze, które dzięki nowym technologiom są znacznie łatwiejsze do osiągnięcia.

Jednym z tych wielu scenariuszy jest możliwość reprezentowania tras na mapie i chociaż może to brzmieć jak zadanie, którego wykonanie może zająć nam tygodnie, dzięki bibliotece amCharts możemy to zrobić bez najmniejszego możliwego wysiłku.

Kod HTML

Nasz kod HTML Będzie to dość proste, będzie miało standardową strukturę i ważne jest, aby wtrącenia z biblioteki były amChartsa także nasz arkusz stylów i plik .js. gdzie wykonamy większość pracy:

 Animowana mapa z JavaScript

Jedna z podstawowych części naszego HTML jest dodanie div, który będzie miał identyfikator, którego użyjemy do renderowania naszej mapy, i to ten, który będziemy linkować w naszym .js, w tym przypadku nazywamy go animowana mapa.

Arkusz stylów

Nasz arkusz stylów będzie dość prosty, tam określimy tylko szerokość i wysokość do wyświetlenia naszej mapy, w tym przypadku zrobimy to na pełnym ekranie:

 treść, html {szerokość: 100%; wzrost: 100%; margines: 0} #AnimationMap {szerokość: 100%; wzrost: 100%; }

Gdy to zrobimy, przekażmy rdzeń naszego przykładu, którym byłby kod JavaScript.

Kod JavaScript

Najpierw musimy zainicjować naszą mapę funkcją makeChart i w nim zdefiniować ogólne opcje tego, ponieważ za pomocą tej funkcji możemy nie tylko tworzyć mapy, ale także różne grafiki wszelkiego rodzaju. W tym celu definiujemy typ, model mapy, poziomy powiększenia, a nawet czcionkę tekstów:

 AmCharts.makeChart ("Animatedmap", {type: "map", fontSize: 20, balloon: {horizontalPadding: 20, verticalPadding: 15}, creditsPosition: "top-right", dataProvider: {map: "worldLow", zoomLevel: 3,5, zoomLongitude: -55, zoomLatitude: 42,});

Oprócz tego możemy modyfikować inne opcje mapy, takie jak kolory, linie i czas trwania animacji, które możemy wykorzystać zgodnie z wybraną przez nas mapą, w tym przypadku jest to mapa reprezentująca mapy lotów, dzięki czemu możemy jak szybko może przejść ikonę samolotu i jak daleko możesz stanąć między punktem a punktem.

 areaSettings: {unlistedAreasColor: "# 9bc5f5"}, imagesSettings: {color: "# 4e985c", rollOverColor: "# 4e985c", selectedColor: "# 4e985c", pauseCzas trwania: 0,2, animacjaCzas trwania: 2,5, dostosujAnimationSpeed: 2,5,dostosujAnimationSpeed: linie {kolor: "# 4e985c", alfa: 0,4}

Gdy już jesteśmy zadowoleni z umieszczonych przez nas opcji, musimy tylko zobaczyć, jak nasza animowana mapa wygląda w przeglądarce.

Jak widzimy wygląda to całkiem nieźle i pozwoli nam nadać naszej aplikacji inny styl, aby w prosty sposób przedstawić trudne scenariusze, korzystając z zalet JavaScript oraz biblioteki firm trzecich, które znacznie ułatwiają nam życie.

animowana mapa JavaScript.zip 1.86K 169 pobrań