Dažos gadījumos lapai vai vietnei ir jāpaplašina šī funkcionalitāte, un Google Maps to nenodrošina. Šajos gadījumos mēs varam izmantot Daudzkartes, grāmatnīca Javascript bezmaksas un atvērtā pirmkoda, ar kuru mēs savā vietnē varam ieviest jebkura veida un funkcionalitātes kartes.
Pateicoties tās tehnoloģijai, Polymaps ir ideāli piemērots informācijas parādīšanai dažādos valstu, pilsētu un pat atsevišķu ielu līmeņos Svg (Mērogojama vektorgrafikas), kas ir nekas vairāk kā vektorizēts attēla formāts, pamatojoties uz XML kas nodrošina atbalstu divdimensiju grafikas mijiedarbībai un animācijai, jau redzot, ka tas nedaudz iet Daudzkartes Apskatīsim tās metodes, kontroli un dažus tās ieviešanas piemērus.
Tūlītēja poligrāfija
Katrs Daudzkarte sākas ar metodes eksemplāru karte (), bet pirms kartes izveidošanas mēs importējam nosaukumvietu vietējā mainīgajā:
var po = org.polimapi;
Polymaps neizmanto tradicionālos Javascript konstruktorus, tādā gadījumā Polymaps nodrošina mūs ar metodēm, kas paātrina metodes iekšēji. Turklāt tiek izmantota metožu ķēdēšana, visas metodes atgriež kartes () instanci. Mēs varam arī ievietot jaunā SVG dokumentā un pēc tam pievienot attēlam tagu:
var karte = po.map () .container (document.body.appendChild (po.svg ("svg")))) .add (po.image (). url (…)) Mēs arī nevaram neko nosūtīt metodē konteiners un kartes gadījums atgriezīs ar lauku saistīto vērtību un kalpos gan kā noteicējs, gan kā ieguvējs:map.container ();Slāņi
Vienkāršākajos gadījumos kartēm ir viens slānis, taču tās var sastāvēt no vairākiem slāņiem, kas atrodas viens virs otra, pieņemamie parametri ir šādi:
- {X} - kolonnas koordināta.
- {Y} - rindas koordinātas.
- {B} - ierobežojošā kaste.
- {Z} - tālummaiņas līmenis.
- {S} - saimnieks.
Bāla rītausma
Šai kartei ir ierobežots dizains, kas labi darbojas ar daudzām informācijas vietām, tā ir vairāk vērsta uz priekšplāna informācijas izcelšanu. Šī karte ir veidota ar vienu slāni, ar koordinātām, un tai ir dažas pamata interaktīvās vadīklas, un tas ir labs sākumpunkts, lai sāktu tās pielāgošanu:
Šeit ir pilns avota kods:
var po = org.polimapi; var karte = po.map () .container (document.getElementById ("karte"). 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 pārsteidzošs/[Y-lex.europa.eu.png.webp ") .hosts ([" a. "," B. "," C. "," "] ))); map.add (po.compass () .pan ("nav")); Tagad apskatīsim daudz pilnīgāku piemēru
Flīžu režģis
Šajā piemērā mums ir dažādi tālummaiņas veidi, kā arī dažādu slāņu pārvaldība, turklāt mēs varam pagriezt kartes apgabalu un tādējādi redzēt citus apgabalus tajā, apskatīsim dažus tā attēlus:
Visbeidzot, pirmkodu, lai jūs varētu to izmēģināt pats:
var po = org.polimapi; var div = document.getElementById ("karte"), svg = div.appendChild (po.svg ("svg")), g = svg.appendChild (po.svg ("g")); var karte = po.map () .container (g) .tileSize ({x: 128, y: 128}) .angle (.3) .add (po.interact ()) .on ("mainīt izmērus", mainīt izmērus) ; mainīt izmērus (); map.add (po.layer (režģis)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("platums", "50%"); rect.setAttribute ("augstums", "50%"); function resize () {if (resize.ignore) atgriezties; var x = div.clientWidth / 2, y = div.clientHeight / 2; g.setAttribute ("pārveidot", "tulkot (" + (x / 2) + "," + (y / 2) + ")"); resize.ignore = true; map.size ({x: x, y: y}); resize.ignore = false; } funkciju režģis (flīze) {var g = tile.element = po.svg ("g"); var rect = g.appendChild (po.svg ("rect")), size = map.tileSize (); rect.setAttribute ("platums", izmērs.x); rect.setAttribute ("augstums", izmērs.y); var teksts = g.appendChild (po.svg ("teksts")); 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); funkciju taustiņš (e) {slēdzis (e.keyCode) {65. gadījums: spin = e.type == "keydown"? -.004: 0; pārtraukums; 68. gadījums: spin = e.type == "keydown"? .004: 0; pārtraukums; }} window.addEventListener ("keydown", atslēga, true); window.addEventListener ("keyup", key, true); window.addEventListener ("mainīt izmērus", mainīt izmērus, nepatiesi);
Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu
