Создание пользовательского слоя карты

Чтобы создать новый слой с изображением карты используйте класс YMaps.Layer. В конструктор класса передайте источник данных для карты. Источник данных поставляет тайлы для слоя, в зависимости от текущих координат центра карты и коэффициента масштабирования.

Совет

Для подготовки тайлов для источника данных используйте приложение API Яндекс.Карт "Подготовка слоя тайлов".

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

  • tileUrlTemplate - шаблон, по которому строится URL тайла;
  • isTransparent - флаг, указывающий, что тайлы прозрачны;
  • smoothZoomEnabled - флаг, разрешающий плавное масштабирование тайлов.

В шаблоне tileUrlTemplate можно использовать следующие специальные конструкции:

  • %d - заменяется на число от 1 до 4, в зависимости от номера тайла. Используется для распределения нагрузки между несколькими доменами.
  • %c - заменяется на x&y&z, где x - номер тайла по горизонтали, y - номер тайла по вертикали, z - коэффициент масштабирования.

Пример ниже демонстрирует создание слоя:

  1. Создайте источник данных.

    Например:

    var myData = new YMaps.TileDataSource("", false, true);
    
  2. Перекройте метод getTileUrl(), чтобы задать новые правила формирования URL тайла по шаблону, в зависимости от тайловых координат и коэффициента масштабирования.

    Например:

    myData.getTileUrl = function (tile, zoom) {
        return "http://mt.gmapuploader.com/tiles/FVSH1JsvdT/tile-" + zoom + "-" + (tile.y * Math.pow(2, zoom) + tile.x) + ".jpg";
    }
    
  3. Создайте слой карты, который будет получать тайлы из источника данных и добавьте его на карту.

    Например:

    var myLayer = new YMaps.Layer(myData);
    map.addLayer(myLayer);
    
  4. С помощью метода add() поместите созданный слой в хранилище слоев карты YMaps.Layers.

    Например:

    // Функция, создающая экземпляры слоя (конструктор)
    var myLayer = function () { 
        return new YMaps.Layer(myData)
    }
    
    // Добавляет слой в хранилище
    YMaps.Layers.add("test#layer", myLayer);
    

Использовать хранилище удобно в случаях, когда необходимо обратиться к слою, но он еще не определен (например, когда слои создаются в отдельном файле).

Чтобы получить слой из хранилища по ключу используйте метод get() класса YMaps.Layers.

Например:

var myLayer = YMaps.Layers.get("test#layer");

Узнайте больше