2014-11-24 5 views
7

Мне было интересно узнать о возможностях анимации в OpenLayers3.Анимация функций в OpenLayers3

Я очень осведомлены о примерах, представленных здесь http://openlayers.org/en/v3.0.0/examples/animation.html и здесь https://gis.stackexchange.com/questions/26546/openlayers-animation-examples-and-algorithms

Однако официальные примеры Ol3 не вполне соответствует моим потребностям.

Предположим, что у меня есть слой (например, geojson), который имеет столбец «время» с большим количеством значений времени.

Я хотел бы реализовать что-то вроде слайдера, который добавляет/удаляет функции (или изменяет их стиль) в зависимости от действий пользователя.

Дело в том, что есть некоторые API, которые могут это сделать, но они, похоже, устарели (примеры кода все еще работают с ol2).

Есть ли у вас предложения по созданию простого слайдера анимации с OL3?

РЕДАКТОРА: Это не обязательно должна быть надлежащая анимация. Возможность, которая мне пришла в голову, заключается в изменении стиля слоя при перемещении ползунка. По-прежнему не знаю, как это понимать.

Это изображение показывает, что я имею в виду:

design for desired functionality

EDIT: Мой текущий подход должен иметь ползунок, который запускает код каждый раз, когда он перемещается. Я как-то стараюсь динамически менять стиль слоя, но я до сих пор не получил жизнеспособного результата.

+0

Похоже, что ваш путь к работе с хронологией OpenLayers. Есть ли у вас несколько выборочных данных? – BernieSF

+0

Несомненно. Но работает ли хронология с ol3? – stopopol

ответ

4

Хорошо. Я сам придумал решение. Это не полноценная анимация, но она работает для меня.

В основном, что я делаю, это то, что я загружаю wfs-слой на свою карту. Теперь вот трюк: Когда я это делаю, я просто сортирую значения времени по функциям один за другим и добавляю каждую функцию с временным значением от 1 до одного слоя, каждая функция со значением времени от 2 до другой и так далее. Это в основном делает трюк. Остальное просто.

Следующий шаг заключается в том, что я реализую слайдер, который варьируется от 1 (минимальное значение времени) до любого наивысшего значения времени. Каждый раз, когда движок перемещается, он запускает событие, которое определяет, к какому значению времени установлен ползунок, а затем добавляет/удаляет соответствующие слои.

Итак, если ползунок установлен на 5. Он добавит каждый слой от 1 до 5 на карту и удалит все остальные слои. Опять же, это не анимация, но она работает в моем случае.

Если кто-нибудь придумает другое возможное решение, отправьте его здесь. Буду признателен.

(Кстати, это то, что мое решение выглядит в действии :)

enter image description here

EDIT: Теперь я могу также подтвердить, что можно строить «правильные» анимации с этим подходом. Я просто построил js-функцию, которая включает в себя несколько «setTimeout» до времени, когда добавлен слой, и добавлена ​​кнопка воспроизведения, которая запускает эту функцию.Это означает анимацию, которая визуализирует рост от t = 1 до tmax.

+0

Это круто. Я собирался предложить решение D3js. Таким образом, вы фактически не динамически вызываете wfs, просто вызываете его один раз и создаете слои на основе ползунка, по существу? –

+0

Точно. В принципе, я создаю разные слои в начале, когда карта инициализируется, а затем динамически добавляет и удаляет их. В настоящее время я работаю над функцией, которая использует временную задержку для создания правильной анимации. Это в значительной степени кнопка воспроизведения, которая проходит через все это от начала до начала. – stopopol