Использование слоя активных областей
Пример ниже демонстрирует создание слоя активных областей, на котором с помощью пиктограмм (см. ниже) отмечены города-герои СССР.
Для этого потребуется создать :
- набор прозрачных 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 пикселей вверх относительно положения самого города на карте.
Для того, чтобы добавить подготовленные слои на карту:
-
Создадим слой с картиночными тайлами и добавим его на карту:
// Создает источник данных для тайлов 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);
-
Создадим слой активных областей и добавим его на карту:
// Создает источник объектов 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);
Теперь при наведении курсора на пиктограмму будет показываться всплывающая подсказка, а по щелчку мыши - открываться балун с названием города.
-
Переопределим поведение объекта по умолчанию так, чтобы балун открывался не в месте щелчка, а прямо над городом, и в нем отображалась страница Википедии с информацией о городе:
-
Определим функцию наследования:
var extend = function (child, parent) { var c = function () {}; c.prototype = parent.prototype; c.prototype.constructor = parent; return child.prototype = new c; };
-
Создадим пользовательский класс myObject, унаследованный от стандартного класса YMaps.Hotspots.Object:
var myObject = function () { YMaps.Hotspots.Object.apply(this, arguments); }; var ptp = extend(myObject, YMaps.Hotspots.Object);
-
Переопределим в прототипе объекта 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); }
-
-
В источнике объектов переопределим фабричную функцию создания объектов-активных областей так, чтобы создавался не стандартный объект YMaps.Hotspots.Object, а пользовательский myObject:
os.createObject = function (layer, data, shapes, priority) { return new myObject(layer, data, shapes, priority); };