Клуб API Карт

Клуб API Карт

Анимированный оверлей

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

Стандартные объекты на карте (метки, ломаные и многоугольники) являются статичными. Предлагаю вашему вниманию анимированную машинку, которую можно запустить, например, по вашей схеме проезда. Для ее рисования используется спрайт из 8ми картинками, поэтому ее иногда заносит :)

Использовать ее совсем просто:

// Создаем машинку и добавляем ее на карту
var car = new ymlib.animate.Car();
map.addOverlay(car);

// Запуск анимации
car.moveTo([new YMaps.GeoPoint(37.594646, 55.735397), new YMaps.GeoPoint(37.610997,55.730094)], function () {
    alert("Приехали!");
});

Посмотреть пример использования

Для использования необходимо подключить один файлик
<script src="http://ymlib.narod.ru/1.1/ymlib.js" type="text/javascript"></script>
Также вы можете посмотреть исходные коды на github, они же являются и документацией)
7 комментариев
Авторизуйтесь, чтобы оставить комментарий
infieldsystems
28 января 2016, 06:39
эгей! круто! здорово! :) необычно :))
Антошка
28 января 2016, 06:39

А как сделать такое, если вместо маршрутизатора обычный gpx трек?

onedreamW
28 января 2016, 06:39

Так же, только, возможно, запускать машинку по-очереди для каждого trkseg (смотря какой фильтр стоит)

Антошка
28 января 2016, 06:39

Я в этом не особо. Только разбираюсь.

Вот так вот добавлен трек. И что дальше? желательно на примере.

var gpx = new YMaps.GPX("http://sarapul.ru/bus/bus/2g.xml");
YMaps.Events.observe(gpx, gpx.Events.Load, function (gpx) {
    var routes = gpx.filter(function (obj) {return obj.metaDataProperty.gpxMetaData.gpxTagName == "trkseg"});
    map.addOverlay(routes);

onedreamW
28 января 2016, 06:39

Массив routes в Вашем случае - это массив ломаных.

Т.е., для простоты: в примере исользования заменить слово router на routes (объеденив Ваш код и код примера) и все будет работать.

Антошка
28 января 2016, 06:39

var gpx = new YMaps.GPX("http://sarapul.ru/bus/bus/2g.xml");
YMaps.Events.observe(gpx, gpx.Events.Load, function (gpx) {
    var routes = gpx.filter(function (obj) {return obj.metaDataProperty.gpxMetaData.gpxTagName == "trkseg"});
    map.addOverlay(routes);

});


            // После загрузки маршрута начинается самое интересное
            YMaps.Events.observe(routes, routes.Events.Success, function (routes) {

                // Собираем все точки в будущий маршрут
                var points = [];
                for (var i = 0, route, l = routes.getNumRoutes(); i < l; i++) {
                    route = routes.getRoute(i);
                    points = YMaps.jQuery.merge(points, route.getPoints());
                    map.addOverlay(route);
                }

                // Создаем машинку
                var obj = new ymlib.animate.Car();
                map.addOverlay(obj);

                // Запуск анимации
                obj.moveTo(points, function () {
                    alert("Приехали!");
                });

                // Центрируем карту
                map.setBounds(new YMaps.GeoCollectionBounds(points));
            });

 

Вот сделал так, но ничего не работает!

onedreamW
28 января 2016, 06:39

Просмотрите points на предмет корректной структуры. Попробуйте запустить машинку на однои сегменте.