Sayfanın veya web sitesinin bu işlevi genişletmesi gerektiği ve Google haritalarının bunu sağlamadığı bazı durumlar vardır. Bu durumlarda kullanabiliriz Çoklu haritalar, kitapçı Javascript web sitemizde her tür ve işlevsellikteki haritaları uygulayabileceğimiz ücretsiz ve açık kaynak.
Polymaps, farklı düzeylerde ülkeler, şehirler ve hatta tek tek sokaklarda bilgi görüntülemek için idealdir, bu teknoloji sayesinde Svg (Ölçeklenebilir Vektör Grafiğis) temel alınarak vektörleştirilmiş bir görüntü formatından başka bir şey olmayan XML iki boyutlu grafiklerin etkileşimi ve animasyonu için destek sağlayan, zaten biraz ilerlediği görülüyor Çoklu haritalar Yöntemlerini, kontrollerini ve uygulanmasının bazı örneklerini görelim.
Çoklu Haritaları Örnekleme
Her Çoklu harita yöntemin bir örneği ile başlar harita (), ancak bir harita oluşturmadan önce ad alanını yerel bir değişkene aktarırız:
var po = org.polymaps;
Polymaps geleneksel Javascript yapıcılarını kullanmaz, bu durumda Polymaps bize yöntemleri dahili olarak başlatan yöntemler sağlar. Ek olarak, yöntem zincirlemeyi kullanır, tüm yöntemler map() örneğini döndürür. Ayrıca yeni bir SVG belgesine ekleyebilir ve ardından görüntüye bir etiket ekleyebiliriz:
var map = po.map () .container (document.body.appendChild (po.svg ("svg"))) .add (po.image (). url (…)) Ayrıca yönteminde hiçbir şey gönderemeyiz. konteyner ve harita örneği, alanla ilişkili değeri döndürür ve hem ayarlayıcı hem de alıcı olarak hizmet eder:harita.container();Katmanlar
En basit durumlarda, haritalar tek bir katmana sahiptir, ancak üst üste birden fazla katmandan oluşabilirler, kabul edilen parametreler şunlardır:
- {X} - Sütun koordinatı.
- {Y} - Satır koordinatı.
- {B} - Sınırlayıcı Kutu.
- {Z} - Yakınlaştırma düzeyi.
- {S} - Ana bilgisayar.
soluk şafak
Bu harita, tonlarca bilgi noktasıyla iyi çalışan kısıtlı bir tasarıma sahiptir, daha çok ön plan bilgilerini vurgulamaya odaklanır. Bu harita tek bir katmanla oluşturulmuştur, koordinatlar ve bazı temel etkileşimli kontrollere sahiptir, onu özelleştirmeye başlamak için iyi bir başlangıç noktasıdır:
İşte tam kaynak kodu:
var po = org.polymaps; var map = po.map () .container (document.getElementById ("harita").pendChild (po.svg ("svg"))) .add (po.interact ()) .add (po.hash ()); map.add (po.image () .url (po.url ("http: // {S} tile.cloudmade.com" + "/ 1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register + "/ 998) /256/{Z-lex.europa.eu/[X şaşırtıcı/[Y-lex.europa.eu.png.webp ") .hosts ([" a. "," B. "," C. "," "] ))); map.add (po.compass () .pan ("yok")); Şimdi çok daha eksiksiz bir örnek görelim
kiremit ızgarası
Bu örnekte farklı yakınlaştırma türlerine ve farklı katmanların yönetimine sahibiz, ayrıca haritanın alanını döndürebilir ve böylece içindeki diğer alanları görebiliriz, bazı yakalamalarını görelim:
Ve son olarak, kendiniz deneyebilmeniz için kaynak kodu:
var po = org.polymaps; var div = document.getElementById ("harita"), svg = div.appendChild (po.svg ("svg")), g = svg.appendChild (po.svg ("g")); var map = po.map () .container (g) .tileSize ({x: 128, y: 128}) .angle (.3) .add (po.interact ()) .on ("resize", resize); yeniden boyutlandır (); map.add (po.layer (ızgara)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("genişlik", "%50"); rect.setAttribute ("yükseklik", "%50"); function resize() {if (resize.ignore) return; var x = div.clientWidth / 2, y = div.clientHeight / 2; g.setAttribute ("dönüştür", "çevir (" + (x / 2) + "," + (y / 2) + ")"); resize.ignore = doğru; map.size ({x: x, y: y}); resize.ignore = yanlış; } function grid (tile) {var g = tile.element = po.svg ("g"); var rect = g.appendChild (po.svg ("rect")), size = map.tileSize (); rect.setAttribute ("genişlik", size.x); rect.setAttribute ("yükseklik", size.y); var text = g.appendChild (po.svg ("metin")); text.setAttribute ("x", 6); text.setAttribute ("y", 6); text.setAttribute ("dy", ".71em"); text.appendChild (document.createTextNode (tile.key)); } var spin = 0; setInterval (function () {if (döndür) map.angle (map.angle () + döndürme);}, 30); fonksiyon tuşu (e) {switch (e.keyCode) {case 65: spin = e.type == "keydown"? -.004: 0; kırmak; durum 68: spin = e.type == "keydown"? .004: 0; kırmak; }} window.addEventListener ("keydown", anahtar, doğru); window.addEventListener ("keyup", anahtar, doğru); window.addEventListener ("yeniden boyutlandır", yeniden boyutlandır, yanlış);
Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.
