В нескольких заметках на своем блоге я подробно рассмотрю данный вопрос.
Для создания собственной карты существует специальный класс 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.
Загружаем пример в браузере и наблюдаем результат
Посмотреть пример в действии можно здесь.
Что то Ваш пример кода не работает, и ещё как Вы свойство изображения посмотрели?
ОтветитьУдалитьПример исправил. В браузере Opera в контекстом меню есть пункт Свойства изображения. Если посмотреть свойства в Вашем браузере нельзя можно посмотреть исходный код страницы, там в строке параметра var mapType содержится адрес папки с изображениями.
ОтветитьУдалитьПример реализации собственной карты с кнопкой собственного типа карты http://webmaps.t35.com/mymap.html
ОтветитьУдалитьА как можно определить координаты на такой карте? Хочу обозначить некоторые объекты на своей карте города разбитой при помощи gmapupload.com
ОтветитьУдалитьПоддерживаю последний вопрос. Как определить координаты та загруженной карте??
ОтветитьУдалить