Ломаная

Ломаная состоит из набора вершин, последовательно соединенных отрезками прямой. Ломаная может иметь самопересечения.

Добавление ломаной на карту

Чтобы добавить ломаную на карту создайте объект класса YMaps.Polyline и передайте ему массив вершин ломаной, а затем с помощью метода карты addOverlay() добавьте созданный объект на карту.

Например:

var pl = new YMaps.Polyline([ 
    new YMaps.GeoPoint(37.7,55.7),
    new YMaps.GeoPoint(37.7,55.8),
    new YMaps.GeoPoint(37.8,55.8),
    new YMaps.GeoPoint(37.8,55.7),
    new YMaps.GeoPoint(37.7,55.7)
]);

map.addOverlay(pl);

Открыть пример в новом окне

Совет. Для ломаных, состоящих из большого количества вершин, координаты удобнее записывать в закодированном виде, см. Кодирование вершин ломаной.

В режиме редактирования пользователю дается возможность изменять положение вершин ломаной, удалять имеющиеся вершины и добавлять новые.

Задание стиля ломаной

По умолчанию ломаная отображается линией красного цвета (ff0000ff ), толщиной 1 пиксел, без прозрачности.

Чтобы изменить стиль ломаной задайте следующие параметры объекта YMaps.LineStyle:

  • strokeColor - цвет и прозрачность линии (в системе RGBA);
  • strokeWidth - толщину линии.
Примечание. Последние две цифры в strokeColor задают прозрачность ломаной.

Например:

var s = new YMaps.Style();
s.lineStyle = new YMaps.LineStyle();
s.lineStyle.strokeColor = '0000FF55';
s.lineStyle.strokeWidth = '5';
YMaps.Styles.add("example#CustomLine", s);
 
var pl = new YMaps.Polyline([ 
    new YMaps.GeoPoint(37.7,55.7),
    new YMaps.GeoPoint(37.7,55.8),
    new YMaps.GeoPoint(37.8,55.8),
    new YMaps.GeoPoint(37.8,55.7),
    new YMaps.GeoPoint(37.7,55.7)
]);

pl.setStyle("example#CustomLine");
map.addOverlay(pl);

Открыть пример в новом окне

Кодирование вершин ломаной

С помощью метода fromEncodedPoints() вершины ломаной (и многоугольника) можно задавать закодированной строкой.

Метод принимает два обязательных параметра:

  • encodedPoints - описание вершин;
  • levels - строка кодов уровней видимости вершин.

В описании вершин закодированы координаты всех вершин ломаной или многоугольника. Строка кодов уровней указывает минимальный уровень масштаба, на котором вершина видна на карте.

Строго говоря, описание вершин представляет собой URL&FILE-safe base64-кодированный бинарный массив 32-битных знаковых целых чисел. Размер массива соотвествует двухкратному количеству вершин, то есть по два числа для каждой точки.

Первая пара чисел массива – это долгота и широта первой вершины, умноженные на 1 000 000. Последующие точки задаются смещениями по долготе и широте от предыдущей, также умноженными на 1 000 000. Таким образом, координаты задаются с точностью до 6-го знака.

Строка кодов уровней представляет собой набор символов, по одному для каждой точки. Для каждой вершины указывается уровень масштаба, начиная с которого она становится не видна.

Все уровни кодируются заглавными символами латинского алфавита от A до Z. Символ A соответствует наименее детальному уровню масштаба, то есть точки, помеченные этим уровнем, видны всегда. Таким образом символ A соответствует коэффициенту масштабирования 1, символ B - 2 и т.д.

Пример ниже демонстрирует алгоритм кодирования вершин ломаной для отображения пешеходного маршрута от станции метро "Парк Культуры" до офиса Яндекса:

  1. Запишите координаты вершин ломаной друг под другом, по одной вершине в строке.
    37.593578 55.735094
    37.592159 55.732469
    37.589374 55.734162
  2. Умножьте каждую координату на 1 000 000.
    37593578 55735094
    37592159 55732469
    37589374 55734162
  3. Рассчитайте смещения для второй и последующих точек ломаной.
    37593578 55735094
    -1419 -2625
    -2785 1693
  4. Переведите каждое из получившихся чисел в двоичную систему счисления. Дополните получившиеся значения недостающими нулями слева до 4 байтов (32 бита).

    В итоге последовательность чисел будет иметь следующий вид (по одной координате в строке):

    00000010001111011010000111101010
    00000011010100100111001100110110
    11111111111111111111101001110101
    11111111111111111111010110111111
    11111111111111111111010100011111
    00000000000000000000011010011101
  5. Произведите кодирование последовательно по четыре байта. Каждые шесть бит необходимо перевести в десятичную систему счисления - это будет номер символа в строке, используемой для кодирования.

    Строка, используемая для кодирования, имеет следующий вид:

    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_=
    Примечание. Данная строка отличается от строки, которая используется при кодировании в Base64. Дело в том, что строка с закодированными вершинами должна без ограничений передаваться в качестве параметра URL, а символы "+" и "/" в URL являются спецсимволами.

    В качестве примера ниже приводится алгоритм кодирования первого набора из 4-х байтов:

    1. Измените порядок следования байтов на обратный.

      Прямой порядок:

      00000010 00111101 10100001 11101010

      Обратный порядок:

      11101010 10100001 00111101 00000010
    2. Считывайте последовательно по шесть бит, чтобы получить номера символов:

      111010 -> символ № 58 -> символ "6"
      101010 -> символ № 42 -> символ "q"
      000100 -> символ № 04 -> символ "E"
      111101 -> символ № 61 -> символ "9"
      000000 -> символ № 00 -> символ "A"
      10

      Недостающие для получения последнего символа биты берутся из следующей последовательности из четырех байтов.

      Примечание. После обработки всех байтов может сложиться ситуация, когда останется либо два, либо четыре бита, которых недостаточно для получения номера символа. Тогда каждые два недостающих бита заменяются символом "=".
    3. Общий вид закодированной в Base64 строки:

      6qE9AjZzUgN1-v__v_X__x_1__-dBgAA
  6. Задайте строку кодов уровней видимости вершин. Каждой вершине сопоставьте уровень масштаба, начиная с которого она должна быть видна на карте.

    Например, для того, чтобы ломаная была видна всегда, задайте следующую строку:

    AAA

Полный код создания и добавления ломаной на карту:

var polyline = YMaps.Polyline.fromEncodedPoints("6qE9AjZzUgN1-v__v_X__x_1__-dBgAA", "AAA");
map.addOverlay(polyline);

Открыть пример в новом окне

Пример кодирования произвольной ломаной

Следующий пример демонстрирует кодирование произвольной ломаной. Вершины ломаной добавляются по щелчку кнопкой мыши по карте. В левой колонке отображаются координаты ломаной, а под картой - строка с закодированными вершинами.

Открыть пример в новом окне