Es gibt Fälle, in denen die Seite oder Website diese Funktionalität erweitern muss und Google Maps sie nicht bereitstellt. Bei diesen Gelegenheiten können wir Polymaps, ein Buchladen Javascript kostenlos und Open Source, mit der wir Karten jeglicher Art und Funktionalität auf unserer Website implementieren können.
Polymaps ist ideal für die Anzeige von Informationen auf verschiedenen Ebenen von Ländern, Städten und sogar einzelnen Straßen, dies dank seiner Technologie von Svg (Skalierbare Vektorgrafiks) was nichts anderes ist als ein vektorisiertes Bildformat basierend auf XML was die Interaktion und Animation von zweidimensionalen Grafiken unterstützt, schon gesehen, dass es ein bisschen geht Polymaps Sehen wir uns seine Methoden, Steuerelemente und einige Beispiele für seine Implementierung an.
Instanziieren von Polymaps
Jeden Polymap beginnt mit einer Instanz der Methode Karte (), aber bevor wir eine Map erstellen, importieren wir den Namespace in eine lokale Variable:
var po = org.polymaps;
Polymaps verwendet keine traditionellen Javascript-Konstruktoren, in diesem Fall stellt Polymaps uns Methoden zur Verfügung, die die Methoden intern instanziieren. Darüber hinaus verwendet es Methodenverkettung, alle Methoden geben die map()-Instanz zurück. Wir können auch in ein neues SVG-Dokument einfügen und dann dem Bild ein Tag hinzufügen:
var map = po.map () .container (document.body.appendChild (po.svg ("svg"))) .add (po.image (). url (…)) Wir können auch nichts in der Methode von senden Container und die Karteninstanz gibt den mit dem Feld verknüpften Wert zurück und dient sowohl als Setter als auch als Getter:map.container ();Lagen
Im einfachsten Fall haben die Karten einen einzelnen Layer, sie können jedoch aus mehreren Layern bestehen, die übereinander liegen. Die akzeptierten Parameter sind die folgenden:
- {X} - Spaltenkoordinate.
- {Y} - Zeilenkoordinate.
- {B} - Begrenzungsrahmen.
- {Z} - Zoomstufe.
- {S} - Gastgeber.
Blasse Morgendämmerung
Diese Karte hat ein eingeschränktes Design, das gut mit Tonnen von Informationspunkten funktioniert, sie konzentriert sich mehr darauf, die Vordergrundinformationen hervorzuheben. Diese Karte besteht aus einer einzigen Ebene, Koordinaten und verfügt über einige grundlegende interaktive Steuerelemente. Sie ist ein guter Ausgangspunkt, um mit der Anpassung zu beginnen:
Hier der vollständige Quellcode:
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 überraschend/[Y-lex.europa.eu.png.webp ") .hosts ([" a. "," B. "," C. "," "] ))); map.add (po.compass () .pan ("keine")); Sehen wir uns nun ein viel vollständigeres Beispiel an
Kachelraster
In diesem Beispiel haben wir verschiedene Arten von Zoom, sowie die Verwaltung verschiedener Ebenen, zusätzlich können wir den Bereich der Karte drehen und so andere Bereiche darin sehen, sehen wir uns einige Aufnahmen davon an:
Und zum Schluss der Quellcode, damit Sie ihn selbst ausprobieren können:
var po = org.polymaps; var div = document.getElementById ("map"), 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); Größe ändern (); map.add (po.layer (grid)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("Breite", "50%"); rect.setAttribute ("Höhe", "50%"); Funktion resize () {if (resize.ignore) zurück; var x = div.clientWidth / 2, y = div.clientHeight / 2; g.setAttribute ("transform", "translate (" + (x / 2) + "," + (y / 2) + ")"); resize.ignore = true; map.size ({x: x, y: y}); resize.ignore = false; } Funktionsraster (Kachel) {var g = tile.element = po.svg ("g"); var rect = g.appendChild (po.svg ("rect")), size = map.tileSize (); rect.setAttribute ("Breite", Größe.x); rect.setAttribute ("Höhe", Größe.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); Funktionstaste (e) {Schalter (e.keyCode) {Fall 65: Spin = e.type == "keydown"? -.004: 0; brechen; Fall 68: spin = e.type == "keydown"? .004: 0; brechen; }} window.addEventListener ("keydown", key, true); window.addEventListener ("keyup", key, true); window.addEventListener ("Größe ändern", Größe ändern, falsch);
Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben
