Как автоматизировать прокладку маршрута на карте яндекса

#javascript #css #svg #d3js #svg_animation

У меня есть приложение, которое реализует движение персонажей анимации вдоль заранее
проложенного маршрута на карте города. Маршруты, точнее path сделаны вручную в векторном
редакторе. Вся техника создания маршрутов показана здесь.   



Ниже код, реализующий данную технику и анимацию: 



.container {
width:100%;
height:100%;
}


 





Возможно ли максимально автоматизировать прокладку маршрута из одной точки карты
в другую с помощью создания ломанных отрезков path щёлкая мышкой по контрольным точкам
карты, - у разветвления улиц, при изменении направления движения.  

Другими словами, - работа программы должна повторять работу в векторном редакторе,
когда мы наносим узловые точки, которые автоматически соединяются отрезками линий,
а на выходе мы получаем готовую формулу патча.    

Есть топик, в котором прокладка маршрутов реализована, но она требует указания координат
вершин ломанных линий вручную.
    

Ответы

Ответ 1

Первый раз работаю с Яндекс картами, был неприятно удивлен, что они поддерживают
только целочисленное значение zoom, это осложняет синхронизацию карты с svg картинкой,
в которой zoom может быть дробный.

Решение сделано при помощи d3.js, сперва необходимо при помощи мыши спозиционировать
карту, затем нажать кнопку  и появится svg оверлей, по которому можно кликать, прокладывая
маршрут. В этом режиме drag правой кнопкой мыши таскает карту, клики левой добавляют
точки в маршрут, даблклики по точкам удаляют их. Для того, чтобы получить SVG результат
в виде SVG кода, нажмите на кнопку 



Вот как это выглядит:





PS: принимаю предложения по анимации маршрута и другие предложения.











    


    

        
    
    

        
        
    







P.S. Карты могут быть и не яндекс


Ответ 2

Информации, скриншотов, сниппетов достаточно много, поэтому решил оформить отдельным
ответом, так как этот объем не поместится в комментариях. 

Хочу остановиться на некоторых аспектах применения замечательного решения @Stranger
in the Q   

Как я попытался применить данное решение:  


Выбираю на карте нужный фрагмент и делаю скриншот.  


    


Добавляю узловые точки вдоль выбранного маршрута и вывожу код этого маршрута 


      

Копирую код в отдельный файл, в котором добавлен скриншот карты с помощью команды
 




	 






Произошёл сдвиг карты вправо и вниз из-за отрицательных значений
viewBox="-700 -429 1400 858"   
Обнуляю    viewBox="0 0 1400 858"  





	 



  


Карта встала на место, но ушел влево и вверх Path маршрута  


Чтобы вернуть Path на место добавляю команду к 
	 

Выводы: чтобы получить исходное положение маршрута надо в коде, который выводит программа сделать следующие изменения Заменить отрицательные значения viewBox="-700 -429 1400 858" на нулевые viewBox="0 0 1400 858" Добавить команду к