В нескольких заметках на своем блоге я подробно рассмотрю данный вопрос.
Для создания собственной карты существует специальный класс YMaps.MapLayer, который предназначен для создания пользовательского слоя с картой.
В нем указывается источник данных для слоя карты с помощью класса YMaps.TileDataSource.
Конструктор данного класса принимает следующие параметры:
tileUrlTemplate - шаблон, по которому строится url тайла;
isTransparent - загружаемые тайлы прозрачны;
isPng - загружаемые изображения тайлов имеют png формат.
И так, в начале, необходимо подготовить данные для создания собственного слоя карты.
В качестве источника нужно использовать растровое изображение представленное в нескольких масштабах, каждое из которых разрезано на кусочки размером 256 на 256 пикселей.
Файлы с кусочками изображений необходимо переименовать соответствующим образом , например так tile-zum-num.jpg
Здесь zum – уровень масштаба, num – номер тайтла по порядку.
Покажу как можно встроить свое изображение в интерфейс управления Яндекс.Карт на конкретном примере.
В качестве изображения я использую фотографию автомобиля Porsche Cayenne размером 1600х1200 пикселей.
Для создания набора тайтлов воспользуемся бесплатным сервисом Gmap Uploader расположенном по адресу http://gmapuploader.com
Пользоваться данным сервисом очень легко.
На главной странице сервиса нужно ввести Ваш адрес электронной почты, выбрать файл для загрузки в формате jpg, png или gif и нажать на кнопку Send для начала загрузки файла.
Через некоторое время (продолжительность зависит от размера загружаемого изображения) появиться страница с загруженным изображением в интерфейсе Google Maps.
И три ссылки внизу изображения.
Для моего примера они имеют следующий вид:
Link: http://gmapuploader.com/view/bsnYw5ReKw
Full Screen: http://gmapuploader.com/iframe/bsnYw5ReKw
Deep Zoom URL: http://dz.gmapuploader.com/bsnYw5ReKw.xml
Первая ссылка – адрес данной страницы, вторая на изображение карты во весь экран и третья на xml-файл с описание максимального уровня масштабирования.
В моем случае содержимое данного файла:
<Image TileSize="256" Overlap="0" Format="jpg"><Size Width="2048" Height="2048" />
</Image>
Для использования созданный тайтлов нам необходимо узнать адрес папки, где они хранятся.
Сделать это просто, нужно посмотреть свойства одного из фрагментов полученного изображения (Свойства рисунка) , например в моем случае http://mt2.gmapuploader.com/tiles/bsnYw5ReKw/tile-3-26.jpg
Нам сразу ясно что все файлы хранятся в папке по адресу http://mt2.gmapuploader.com/tiles/bsnYw5ReKw/
Теперь необходимо написать код для загрузки набора тайтлов в интерфейс Яндекс.Карт.
Привожу код примера:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Примеры YMapsML. Своя карта с использованием сервиса Gmap Uploader.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://api-maps.yandex.ru/1.0/index.xml?key=AIW0o0kBAAAAkwyUMwMAEkDz8ddCkU0UnlyLEu4ddFBXhQQAAAAAAAAAAAA1Md4ULCo5QbciEo5T26eV1lhuEQ==" type="text/javascript"></script>
<script type="text/javascript">
var map;
function init () {
map = new YMaps.Map(document.getElementById("YMapsID"));
map.setCenter(new YMaps.GeoPoint(0,0),1);
map.enableScrollZoom();
map.addControl(new YMaps.SmallZoom());
var myData = new YMaps.TileDataSource("http://mt0.gmapuploader.com/tiles/bsnYw5ReKw/", false, false);
myData.getTileUrl = function (tile, zoom) {
return this.getTileUrlTemplate() + "tile-" + zoom + "-" + (tile.y * Math.pow(2, zoom) + tile.x) + ".jpg";
}
map.addCopyright('Угольников Сергей');
map.setType(new YMaps.MapType([new YMaps.MapLayer(myData)], 'Пример карты', {minZoom:1, maxZoom:3}));
}
</script>
</head>
<body onload="init();">
<div id="YMapsID" style="height:100%; width:100%;"></div>
</body>
</html>
Поясню, на что здесь следует обратить внимание.
Строкой map.setCenter(new YMaps.GeoPoint(0,0),1); задается центр карты на первом уровне масштаба.
Строка var myData = new YMaps.TileDataSource("http://mt0.gmapuploader.com/tiles/bsnYw5ReKw/", false, false); - служит для задания источника тайтлов и значения параметров isTransparent = false - загружаемые тайлы не прозрачны, isPng= false - загружаемые изображения тайлов не имеют формат png.
В строке myData.getTileUrl = function (tile, zoom) {return this.getTileUrlTemplate() + "tile-" + zoom + "-" + (tile.y * Math.pow(2, zoom) + tile.x) + ".jpg";
}
Мы задаем правила для формирования имени файла для конкретного тайтла на соответствующем уровне масштаба.
Строкой map.addCopyright('Угольников Сергей'); добавляем копирайт на нашу карту.
И строка map.setType(new YMaps.MapType([new YMaps.MapLayer(myData)], 'Пример карты', {minZoom:1, maxZoom:3})); служит для указания нового типа карты с названием Пример карты, тамже мы вводим ограничение на изменение уровня масштаба от 1 до 3.
Загружаем пример в браузере и наблюдаем результат
Посмотреть пример в действии можно здесь.
