Как анимировать фигуры поверх карты-листовки

Я новичок в листовке, ищу совета.

Я хотел бы создать анимацию какого-либо маркера (например, дугу или форму с заливкой html5) для воспроизведения треков GPS на карте. Мне может понадобиться несколько анимированных маркеров, и я хочу, чтобы их поведение и производительность оставались гибкими. Может ли кто-нибудь порекомендовать хороший способ создания такой анимации?

Похоже, я мог бы создать слой холста (L.TileLayer.Canvas) и рисовать на нем, используя технику линейной анимации (например, http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/), но я еще не уверен, работает ли это , или если мне нужно вызвать redraw () и какова будет производительность. Или я мог бы попробовать сделать маркеры клиентов и перемещать их, задав для них широту и долготу с некоторым интервалом.

Кто-нибудь сталкивался с этим и может порекомендовать решение (выше идеи или другое)? В идеале, когда я меняю уровни масштабирования, анимация будет «масштабироваться» и иметь хорошую производительность. Спасибо!


person user690750    schedule 22.01.2013    source источник
comment
Я пытаюсь сделать что-то подобное. Вы нашли что-то, что сработало?   -  person monkut    schedule 24.04.2013


Ответы (2)


Плагин RaphaelLayer позволяет создавать довольно причудливые анимации:

http://dynmeth.github.com/RaphaelLayer/

person Snorfalorpagus    schedule 03.02.2013

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

Это отличный пример использования библиотеки D3 для управления анимацией в непрерывном цикле, вы можете изменить код для нескольких анимаций. http://zevross.com/blog/2014/09/30/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map/

Если вам нужно немного больше о том, как работает процесс рисования, то этот проект может быть лучшей отправной точкой http://bl.ocks.org/Sumbera/11114288#L.CanvasOverlay.js Это захватывает панель наложения (холст листовки, на котором можно рисовать) и ... рисует в теме...

и вы обязательно захотите проверить эту ссылку, которая описывает рисование интерактивной карты

person AnythingMapping    schedule 21.09.2015