В некоторых случаях страница или веб-сайт должны расширять эту функцию, а карты Google не предоставляют ее. В этих случаях мы можем использовать Polymaps, бесплатную библиотеку Javascript с открытым исходным кодом, с помощью которой мы можем реализовать карты любого типа и функциональности на нашем веб-сайте.
Polymaps идеально подходит для отображения информации на разных уровнях стран, городов и даже отдельных улиц, благодаря своей технологии SVG ( масштабируемая векторная графика ), которая представляет собой не что иное, как формат векторизованного изображения на основе XML, обеспечивающий поддержку для взаимодействия и анимации двумерной графики, так как Polymaps идет немного, давайте посмотрим его методы, элементы управления и некоторые примеры его реализации.
Создавая Polymaps
Каждая Polymap начинается с экземпляра метода map (), но перед тем, как построить карту, мы импортируем пространство имен в локальную переменную:
var po = org.polymaps;
Polymaps не использует традиционные конструкторы Javascript, в этом случае Polymaps предоставляет нам методы, которые создают экземпляры методов внутренне. Кроме того, он использует цепочку методов, все методы возвращают экземпляр map (). Мы также можем вставить новый документ SVG, а затем добавить тег к изображению:
var map = po.map () .container (document.body.appendChild (po.svg ("svg"))) .add (po.image (). url ( ... ))
Мы также не можем отправлять что-либо в метод контейнера, и экземпляр карты вернет значение, связанное с полем, и будет служить как установщиком, так и получателем: map.container ();
слои
В простейших случаях карты имеют один слой, но они могут состоять из нескольких слоев, которые располагаются друг над другом, принимаются следующие параметры:
- {X} - координата столбца.
- {Y} - координата строки.
- {B} - Граничный бокс.
- {Z} - уровень масштабирования.
- {S} - Хост.
Бледный рассвет
Эта карта имеет ограниченный дизайн, который хорошо работает с тоннами информационных точек, она больше ориентирована на выделение информации переднего плана. Эта карта построена с одним слоем, координатами и имеет некоторые основные интерактивные элементы управления, она является хорошей отправной точкой для ее настройки:
Вот полный исходный код:
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/ndomZ‹/ enjX‹/ enjY‹.webp ") .hosts ([" a. ", " B. ", " C. ", " "]))); map.add (po.compass () .pan ("none")); Теперь давайте посмотрим на гораздо более полный примерПлитка Сетка
В этом примере у нас есть разные типы масштабирования, а также обработка разных слоев, кроме того, мы можем вращать область карты и, таким образом, видеть другие области на ней, давайте посмотрим некоторые ее снимки:
И, наконец, исходный код, чтобы вы могли попробовать его сами:
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) ; resize (); map.add (po.layer (grid)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("ширина", "50%"); rect.setAttribute ("высота", "50%"); функция resize () {if (resize.ignore) return; 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; } функциональная сетка (плитка) {var g = tile.element = po.svg ("g"); var rect = g.appendChild (po.svg ("rect")), size = map.tileSize (); rect.setAttribute ("width", size.x); rect.setAttribute ("height", size.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); функциональная клавиша (e) {switch (e.keyCode) {case 65: spin = e.type == "keydown"? -.004: 0; перерыв; Вариант 68: spin = e.type == "keydown"? .004: 0; перерыв; }} window.addEventListener ("keydown", key, true); window.addEventListener ("keyup", key, true); window.addEventListener ("resize", resize, false); 
- 0
СТАТЬИ