JavaScript ile animasyonlu harita

Şu anda, web'de bulabileceğimiz uygulamaların çeşitliliği, en basitinden en karmaşığa kadar uzanmaktadır ve bu, yeni teknolojiler sayesinde elde edilmesi çok daha kolay olan farklı senaryoları temsil edebilir.

Bu birçok senaryodan biri, rotaları bir harita üzerinde temsil etme olasılığıdır ve kütüphane sayesinde tamamlamamız haftalar alabilecek bir görev gibi görünse de. amCharts mümkün olan en az çaba sarf etmeden yapabiliriz.

HTML Kodu

Kodumuz HTML Oldukça basit olacak, standart bir yapıya sahip olacak ve içinde önemli olan kütüphanenin inklüzyonlarını yapmaktır. amChartsstil sayfamız ve .js dosyamızın yanı sıra. işin çoğunu yapacağımız yer burası olacak:

 JavaScript ile Hareketli Harita

Bizim temel parçalarımızdan biri HTML haritamızı oluşturmak için kullanacağımız kimliğe sahip olacak bir div eklemektir ve bu, .js'mizde bağlayacağımız kişidir, bu durumda buna diyoruz animasyonlu harita.

Stil sayfası

Stil sayfamız oldukça basit olacak, orada sadece haritamızı görüntülemek için genişlik ve yüksekliği tanımlayacağız, bu durumda bunu tam ekran yapacağız:

 gövde, html {genişlik: %100; yükseklik: %100; kenar boşluğu: 0} #AnimationMap {width: %100; yükseklik: %100; }

Bu yapıldıktan sonra, kod olacak örneğimizin çekirdeğini geçelim. JavaScript.

JavaScript kodu

İlk önce haritamızı fonksiyonla başlatmamız gerekiyor makeChart ve içinde bunun genel seçeneklerini tanımlar, çünkü bu fonksiyonla sadece haritalar değil, aynı zamanda her türden çeşitli grafikler de oluşturabiliriz. Bunun için metinlerin tipini, harita modelini, yakınlaştırma seviyelerini ve hatta yazı tipini tanımlıyoruz:

 AmCharts.makeChart ("Animatedmap", {type: "map", fontSize: 20, balon: {horizontalPadding: 20, verticalPadding: 15}, CreditsPosition: "top-right", dataProvider: {map: "worldLow", zoomLevel: 3.5, zoomBoylam: -55, zoomEnlem: 42,});

Buna ek olarak, haritanın diğer seçeneklerini seçtiğimiz haritaya göre kullanabileceğimiz animasyonların renkleri, çizgileri ve süreleri gibi değiştirebiliriz, bu durumda uçuş haritalarını temsil eden bir haritadır, böylece nasıl yapabiliriz. uçak ikonuna hızlı gidebiliyor ve nokta ile nokta arasında ne kadar mesafe durabiliyorsunuz.

 areaSettings: {unlistedAreasColor: "# 9bc5f5"}, imagesSettings: {color: "# 4e985c", rollOverColor: "# 4e985c", selectedColor: "# 4e985c", duraklamaDuration: 0.2, animasyonDuration: 2.5, AdjustAnimationSpeed: 2.5, AdjustAnimationSpeed: satır {renk: "# 4e985c", alfa: 0.4}

Yerleştirdiğimiz seçeneklerden memnun kaldığımızda, animasyonlu haritamızın tarayıcıda nasıl göründüğünü görmemiz yeterli.

Nasıl gördüğümüz oldukça iyi görünüyor ve zor senaryoları basit bir şekilde temsil etmek için uygulamamıza farklı bir stil vermemize izin verecek, bu JavaScript ve hayatı bizim için çok daha kolay hale getiren üçüncü taraf kütüphaneler.

animasyonlu harita JavaScript.zip 1.86K 169 İndirilenler