Использование слоя активных областей

Пример ниже демонстрирует создание слоя активных областей, на котором с помощью пиктограмм (см. ниже) отмечены города-герои СССР.

Для этого потребуется создать :

• набор прозрачных PNG-тайлов с нанесенными пиктограммами городов-героев;
• набор соответствующих им JavaScript-файлов с описанием городов.

PNG и JavaScript-файлы будут именоваться по принципу tile-x-y-z.png и tile-x-y-z.js и храниться в папке heroes на сервере. Ключи запроса будут иметь вид "heroes-x-y-z".

Например, в тайл с номером (19, 11) на 5-ом уровне масштаба попадают Новороссийск, Керчь и Сталинград целиком, а так же часть пиктограммы Севастополя.

PNG-тайл:

JavaScript-файл:

YMaps.Hotspots.Loader.onLoad(
    "heroes-19-11-5",
    {
        "objects":
        [
            {
                "data": { "name":"Сталинград" },
                "base": new YMaps.GeoPoint(44.514208,48.708898),
                "geometry": [
                    [-10,-5,10,33]
                ]
            },
            {
                "data" : { "name": "Севастополь" },
                "base": new YMaps.GeoPoint(33.558616,44.585098),
                "geometry":[
                    [-10,-5,10,33]
                ]
            },
            {
                "data": { "name": "Новороссийск" },
                "base": new YMaps.GeoPoint(37.7767,44.720479),
                "geometry": [
                    [-10,-5,10,33]
                ]
            },
            {
                "data": { "name":"Керчь" },
                "base": new YMaps.GeoPoint(36.464342,45.30667),
                "geometry": [
                    [-10,-5,10,33]
                ]
            }
        ]
    }
);

При описании геометрии активной области, точкой отсчета (base) выбраны координаты города. Пиктограмма города смещена на 10 пикселей влево и 5 пикселей вверх относительно положения самого города на карте.

Для того, чтобы добавить подготовленные слои на карту:

1. Создадим слой с картиночными тайлами и добавим его на карту:

   // Создает источник данных для тайлов
   var ds = new YMaps.TileDataSource('heroes/', true, false);
   // Задает правило формирования URL тайлов
   ds.getTileUrl = function (tileNumber, zoom) {
       return this.getTileUrlTemplate() + 'tile-' + tileNumber.getX() + '-' + tileNumber.getY() + '-' + zoom + '.png';
   }
   
   // Создает слой и добавляет его на карту
   var imageLayer = new YMaps.Layer(ds);
   map.addLayer(imageLayer);
   

2. Создадим слой активных областей и добавим его на карту:

   // Создает источник объектов
   var os = new YMaps.Hotspots.ObjectSource('heroes/', 'heroes-');
   // Определяет правила формирования URL JavaScript-файла с данными
   os.getTileUrl = function (tileNumber, zoom) {
       return this.getTileUrlTemplate() + 'tile-' + tileNumber.getX() + '-' + tileNumber.getY() + '-' + zoom + '.js';
   };
   // Определяет правила формирования ключа ответа сервера
   os.getKey = function (tileNumber, zoom) {
       return this.getKeyTemplate() + tileNumber.getX() + '-' + tileNumber.getY() + '-' + zoom;
   };
   
   // Создает и добавляет слой на карту
   var hsLayer = new YMaps.Hotspots.Layer(os);
   map.addLayer(hsLayer);
   

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

3. Переопределим поведение объекта по умолчанию так, чтобы балун открывался не в месте щелчка, а прямо над городом, и в нем отображалась страница Википедии с информацией о городе:

   1. Определим функцию наследования:

      var extend = function (child, parent) {
          var c = function () {};
          c.prototype = parent.prototype;
          c.prototype.constructor = parent;
          return child.prototype = new c;
      };
      

   2. Создадим пользовательский класс myObject, унаследованный от стандартного класса YMaps.Hotspots.Object:

      var myObject = function () {
          YMaps.Hotspots.Object.apply(this, arguments);
      };
      var ptp = extend(myObject, YMaps.Hotspots.Object);
      

   3. Переопределим в прототипе объекта myObject функцию requestBalloonData, которая отвечает за построение содержимого балуна и выбор точки открытия балуна:

      ptp.requestBalloonData = function (callback, e, shape) {
              // В балуне в отдельном фрейме показывает страницу Википедии с информацией о городе
          var data = '<iframe style="width: 850px; height: 550px;" src="http://ru.wikipedia.org/wiki/' + this.getData().name + '"/>',
              // Вычисляет точку, в которой необходимо открыть балун.
              // Третий аргумент функции - геометрическая фигура shape,
              // над которой произошло событие.
              // Добавляет к верхнему левому углу фигуры смещение (10, 5).
              pixelCenter = new YMaps.Point(shape.getMinX() + 10, shape.getMinY() + 5),
              // Переводит тайловые координаты в географические
              geoCenter = map.coordSystem.toCoordPoint(map.tileCoordinates.scale(pixelCenter, map.getZoom(), map.coordSystem.getMaxZoom()));
          
          // Отдает функции-обработчику содержимое балуна и точку его привязки
          callback(data, geoCenter);    
      }
      

4. В источнике объектов переопределим фабричную функцию создания объектов-активных областей так, чтобы создавался не стандартный объект YMaps.Hotspots.Object, а пользовательский myObject:

   os.createObject = function (layer, data, shapes, priority) {
       return new myObject(layer, data, shapes, priority);
   };
   

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