Există unele ocazii în care pagina sau site-ul web trebuie să extindă această funcționalitate, iar Google Maps nu o oferă. Cu aceste ocazii putem folosi Polymaps, o librarie Javascript sursă gratuită și deschisă cu care putem implementa hărți de orice tip și funcționalitate pe site-ul nostru.
Polymaps este ideal pentru afișarea informațiilor la diferite niveluri de țări, orașe și chiar străzi individuale, datorită tehnologiei sale de Svg (Grafică vectorială scalabilăs) care nu este altceva decât un format de imagine vectorizat bazat pe XML care oferă suport pentru interacțiunea și animația graficelor bidimensionale, deja văzut că merge puțin Polymaps Să vedem metodele, controalele și câteva exemple de implementare a acestuia.
Instantierea Polymaps
Fiecare Polymap începe cu o instanță a metodei Hartă (), dar înainte de a construi o hartă, importăm spațiul de nume într-o variabilă locală:
var po = org.polymaps;
Polymaps nu folosește constructori tradiționali Javascript, în acest caz Polymaps ne oferă metode care instanțiază metodele intern. În plus, folosește metoda de înlănțuire, toate metodele returnează instanța map (). De asemenea, putem insera într-un nou document SVG și apoi putem adăuga o etichetă la imagine:
var map = po.map () .container (document.body.appendChild (po.svg ("svg"))) .add (po.image (). url (…)) De asemenea, nu putem trimite nimic în metoda container iar instanța de hartă va returna valoarea asociată câmpului și va servi atât ca setter, cât și ca getter:map.container ();Straturi
În cele mai simple cazuri, hărțile au un singur strat, dar pot consta din mai multe straturi care sunt una peste alta, parametrii acceptați sunt următorii:
- {X} - Coordonată coloană.
- {Y} - Coordonată de rând.
- {B} - Bounding Box.
- {Z} - Nivel de zoom.
- {S} - Gazdă.
Zori palide
Această hartă are un design restricționat, care funcționează bine cu tone de puncte de informații, este mai concentrată pe evidențierea informațiilor din prim-plan. Această hartă este construită cu un singur strat, coordonate și are câteva controale interactive de bază, este un bun punct de plecare pentru a începe personalizarea acesteia:
Aici codul sursă complet:
var po = org.polymaps; var map = po.map () .container (document.getElementById ("map"). appendChild (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 surprising / [Y-lex.europa.eu.png.webp ") .hosts ([" a. "," B. "," C. "," "] ))); map.add (po.compass () .pan ("none")); Acum să vedem un exemplu mult mai complet
Grila de gresie
În acest exemplu avem diferite tipuri de zoom, precum și gestionarea diferitelor straturi, în plus putem roti zona hărții și astfel putem vedea alte zone din ea, să vedem câteva capturi ale acesteia:
Și, în cele din urmă, codul sursă, astfel încât să îl puteți încerca singuri:
var po = org.polymaps; var div = document.getElementById ("hartă"), 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 ("redimensionare", redimensionare); resize (); map.add (po.layer (grilă)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("lățime", "50%"); rect.setAttribute ("înălțime", "50%"); function resize () {if (resize.ignore) return; var x = div.clientWidth / 2, y = div.clientHeight / 2; g.setAttribute ("transforma", "traduce (" + (x / 2) + "," + (y / 2) + ")"); resize.ignore = adevărat; map.size ({x: x, y: y}); resize.ignore = false; } grila funcțională (țiglă) {var g = țiglă.element = po.svg („g”); var rect = g.appendChild (po.svg ("rect")), size = map.tileSize (); rect.setAttribute ("lățime", size.x); rect.setAttribute ("înălțime", mărime.y); var text = g.appendChild (po.svg ("text")); text.setAttribute ("x", 6); text.setAttribute ("y", 6); text.setAttribute ("dy", ".71em"); text.appendChild (document.createTextNode (tile.key)); } var spin = 0; setInterval (function () {if (spin) map.angle (map.angle () + spin);}, 30); tastă funcțională (e) {comutator (e.keyCode) {caz 65: rotire = e.type == "keydown"? -.004: 0; pauză; caz 68: rotire = e.type == "keydown"? .004: 0; pauză; }} window.addEventListener ("keydown", cheie, adevărat); window.addEventListener ("keyup", cheie, adevărat); window.addEventListener („redimensionare”, redimensionare, fals);
V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv
