Istnieją sytuacje, w których strona lub witryna internetowa musi rozszerzyć tę funkcjonalność, a mapy Google jej nie zapewniają. Przy takich okazjach możemy użyć Polimapy, Księgarnia JavaScript darmowy i open source, dzięki któremu możemy zaimplementować mapy dowolnego typu i funkcjonalności na naszej stronie internetowej.
Polymaps idealnie nadaje się do wyświetlania informacji na różnych poziomach krajów, miast, a nawet pojedynczych ulic, dzięki technologii Svg (Skalowalna grafika wektorowas) który jest niczym innym jak zwektoryzowanym formatem obrazu opartym na XML co zapewnia wsparcie dla interakcji i animacji grafiki dwuwymiarowej, już widziałem, że trochę to idzie Polimapy Zobaczmy jego metody, kontrole i kilka przykładów jego implementacji.
Tworzenie polimap
Każdy Polimapa zaczyna się od wystąpienia metody mapa (), ale zanim zbudujemy mapę, zaimportujemy przestrzeń nazw do zmiennej lokalnej:
var po = org.polimapy;
Polymaps nie używa tradycyjnych konstruktorów Javascript, w takim przypadku Polymaps dostarcza nam metody, które wewnętrznie tworzą instancje metod. Dodatkowo wykorzystuje łańcuch metod, wszystkie metody zwracają instancję map(). Możemy również wstawić do nowego dokumentu SVG, a następnie dodać tag do obrazu:
var map = po.map() .container (document.body.appendChild (po.svg ("svg"))) .add (po.image (). url (…)) Nie możemy również wysłać niczego w metodzie pojemnik a instancja mapy zwróci wartość powiązaną z polem i będzie służyć zarówno jako setter, jak i getter:mapa.kontener ();Warstwy
W najprostszych przypadkach mapy mają jedną warstwę, ale mogą składać się z wielu warstw leżących jedna na drugiej, akceptowane parametry są następujące:
- {X} - Współrzędna kolumny.
- {Y} - Współrzędna rzędu.
- {B} - Ramka graniczna.
- {Z} - Poziom powiększenia.
- {S} - Gospodarz.
blady świt
Ta mapa ma ograniczony projekt, który dobrze współpracuje z mnóstwem punktów informacyjnych, jest bardziej skoncentrowana na podkreśleniu informacji na pierwszym planie. Ta mapa jest zbudowana z jednej warstwy, współrzędnych i ma kilka podstawowych interaktywnych elementów sterujących, jest to dobry punkt wyjścia do rozpoczęcia jej dostosowywania:
Tutaj pełny kod źródłowy:
var po = org.polimapy; var map = po.map () .container (document.getElementById („mapa”). 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 zaskakujące/[Y-lex.europa.eu.png.webp ") .hosts ([" a. "," B. "," C. "," "] ))); map.add (po.compass() .pan ("brak")); Zobaczmy teraz o wiele pełniejszy przykład
Siatka kafelków
W tym przykładzie mamy do czynienia z różnymi rodzajami powiększenia, a także zarządzaniem różnymi warstwami, dodatkowo możemy obracać obszar mapy i tym samym móc zobaczyć na nim inne obszary, zobaczmy kilka jego zrzutów:
I na koniec kod źródłowy, abyś mógł sam go wypróbować:
var po = org.polimapy; var div = document.getElementById („mapa”), 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 ("zmień rozmiar", zmień rozmiar); Zmień rozmiar (); map.add (po.warstwa (siatka)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("szerokość", "50%"); rect.setAttribute ("wysokość", "50%"); function resize () {if (resize.ignore) return; var x = div.clientWidth / 2, y = div.clientHeight / 2; g.setAttribute ("przekształć", "przetłumacz (" + (x / 2) + "," + (y / 2) + ")"); zmiana rozmiaru.ignore = prawda; map.size ({x: x, y: y}); zmiana rozmiaru.ignore = fałsz; } function grid (płytka) {var g = tile.element = po.svg ("g"); var rect = g.appendChild (po.svg ("rect")), rozmiar = map.tileSize (); rect.setAttribute ("szerokość", rozmiar.x); rect.setAttribute ("wysokość", rozmiar.y); var tekst = g.appendChild (po.svg („tekst”)); text.setAttribute ("x", 6); text.setAttribute ("y", 6); text.setAttribute ("dy", ".71em"); text.appendChild (document.createTextNode (płytka.klucz)); } var spin = 0; setInterval (function () {if (spin) map.angle (map.angle () + spin);}, 30); klawisz funkcyjny (e) {przełącznik (e.keyCode) {przypadek 65: spin = e.type == "keydown"? -.004: 0; złamać; przypadek 68: spin = e.type == "keydown"? 0,004: 0; złamać; }} window.addEventListener ("klawisz", klucz, prawda); window.addEventListener ("klucz", klucz, prawda); window.addEventListener ("zmień rozmiar", zmień rozmiar, fałsz);
Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt 
