Клуб API Карт

Как совместить пользовательский слой тайтлов с спутниковой картой?

Пост в архиве.

Здравствуйте!

Опишу ситуацию - есть подготовленный и нарезанный набор тайтлов, на основе которых я создаю пользовательскую карту и тут возникает проблема:

Границы тайтлов новой карты оказались смещенными стандартных границ тайтлов Яндекс карт, и теперь я не могу с помощью шаблона на основе getTileUrlTemplate совместить объекты на спутниковой и пользовательской карте,

все объекты на новом слое оказалось смещенным на постоянную величину.

Переделать тайтлы карты уже нет возможности, и я прошу совета, как мне лучше сделать так,

чтобы совместить свой слой тайтлов с тайтлами спутниковой карты?

Может быть существует возможность сместить систему координат нового слоя или есть другое  решение?

5 комментариев
можно реализовать свой ITile с констратным сдвигом. Дело на 5 минут. Завтра утром скину пример кода.
В принципе можно взять станданый из примера в и setPosition сдвиг добавить.
Дмитрий Сухоносов
28 января 2016, 06:59
Был бы очень благодарен за пример!
вот пример
http://api.yandex.ru/maps/jsapi/examples/itile.html

вот интерфейс
http://api.yandex.ru/maps/jsapi/doc/ref/reference/itile.xml

по примеру - в setPosition - добавьте нужный шифт то Y

"Хвост" скрипта примера может выклядеть как




Странно что я не нашол пример яндекса с правильным, "картиночно-тайловым" хвостом.
попытка номер два
this.pushTo=function(a)
        {
            var e=element;
            if (window.XMLHttpRequest)
            {
                e.style.display="none";
                 
                e.onload =function(){this.style.display='block'};                 
                e.src=a;
                if(e.complete){
                    e.onload();
                }
            }
            
            else
            {
                e.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+a+"',sizingMethod='scale')";
                e.style.display="block";
                e.src=a;
            }  
        }
    
        this.load = function (tile, zoom) {
            element.style.display='none';
            var src=dataSource.getTileUrl(tile,zoom);
            dy=dataSource.yoffset;
            this.pushTo(src);
           // element.title=dy;
            this.setPosition(this.getPosition());
        }
    
        this.error = function () {
        }
        
        this.abort = function () {
        }
        
        this.scale = function (coeff) {
            var newSize = originalSize.copy().scale(coeff);
            element.style.width = newSize.x + 'px';
            element.style.height = newSize.y + 'px';
        }
Дмитрий Сухоносов
28 января 2016, 06:59
Привожу реализацию для общей пользы

 


function myTile(dataSource) {


var myPos = new YMaps.Point(),              // Текущая позиция тайла
element = YMaps.jQuery(""),       // Тайл
originalSize = new YMaps.Point(256);    // Размер тайла

// Добавление класса для настройки внешнего вида тайла
element.addClass("myTile");
// Отображает тайл ошибки
this.error = function () {
element
.html("нет данных")
.addClass("myTile Error");
}
// Останавливает загрузку. Если тайл не загрузился, отображает тайл ошибки
this.abort = function () {
}
// Вызывается при добавлении тайла на карту
this.onAddToMap = function (map, parentContainer) {
element.appendTo(parentContainer);
}

// Вызывается при удалении тайла с карты
this.onRemoveFromMap = function () {
element.remove();
}
// Возвращает текущую позицию тайла (в пикселах)
this.getPosition = function () {
return myPos.copy();
}
this.pushTo = function(a) {
var e = element;
if (window.XMLHttpRequest) {
e.css('display', 'none');

e.bind('load', function() {
e.css('display', 'block');
});
e.attr('src', a);
/*e.bind('complete', function() {
e.trigger('onload');
});*/
} else {     alert('a');
//e.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+a+"',sizingMethod='scale')";
e.css('display', 'none');
e.attr('src', a);
}
}
//  Устанавливает тайл в заданную позицию
this.setPosition = function (position) {
myPos.moveTo(position);
var zoom = map.getZoom();
element.css({
left: myPos.x + options.scale_coef[zoom].dx,
top: myPos.y + options.scale_coef[zoom].dy
});
}
this.load = function (tile, zoom) {
element.css('display', 'none');
var src = dataSource.getTileUrl(tile, zoom);
this.pushTo(src);
this.setPosition(this.getPosition());
}
this.scale = function (coeff) {
var newSize = originalSize.copy().scale(coeff);
element.css('width', newSize.x + 'px');
element.css('height', newSize.y + 'px');
}
}

 


Спасибо!