2014-11-24 1 views
7

OpenLayers3에서 피쳐 애니메이션 기능의 가능성에 대해 궁금합니다.OpenLayers3의 피쳐 애니메이션

나는 그러나, OL3의 공식 예는 아주 내 요구에 맞지 않는 여기 http://openlayers.org/en/v3.0.0/examples/animation.html 여기 https://gis.stackexchange.com/questions/26546/openlayers-animation-examples-and-algorithms

을 제시 한 예는 매우 알고 있어요.

많은 시간 값을 가진 "시간"열이있는 레이어 (예 : geojson)가 있다고 가정 해 봅니다.

사용자의 동작에 따라 기능을 추가/제거하거나 스타일을 변경하는 슬라이더 같은 것을 구현하고 싶습니다.

문제는 할 수있는 API가 있지만 구식 인 것처럼 보입니다 (코드 예제는 여전히 ol2와 작동 중임).

OL3으로 간단한 애니메이션 슬라이더를 만드는 방법에 대한 제안 사항이 있습니까?

편집 : 반드시 적절한 애니메이션 일 필요는 없습니다. 슬라이더를 움직일 때마다 레이어의 스타일이 변경 될 가능성이 내 마음에 들었습니다. 아직 그것을 깨닫는 방법에 대한 단서가 없습니다.

이 이미지는 내가 생각하고있는 것을 보여

design for desired functionality

편집 : 나의 현재의 접근 방식이 이동 때마다 코드를 트리거 슬라이더를하는 것입니다. 나는 어떻게 든 동적으로 레이어 스타일을 변경하려고 시도하지만 여전히 실행 가능한 결과를 얻지 못했습니다.

+0

OpenLayers Timeline을 사용하는 것 같습니다. 샘플 데이터가 있습니까? – BernieSF

+0

그래. 그러나 타임 라인은 ol3과 작동합니까? – stopopol

답변

4

확인. 나는 해결책을 내놓았다. 실제로 본격적인 애니메이션은 아니지만 저에게는 효과적입니다.

기본적으로 내가하는 일은 내지도에 wfs-layer를로드하는 것입니다. 자, 여기에 속임수가 있습니다 : 제가 그렇게 할 때, 필자는 기능의 시간 값을 하나씩 순차적으로 분류하고 시간 값이 1 인 모든 기능을 하나의 레이어에 추가합니다. 모든 기능은 시간 값이 2에서 다른 사람 등등. 기본적으로이 트릭을 수행합니다. 나머지는 간단합니다.

다음 단계는 1 (가장 낮은 시간 값)부터 가장 높은 시간 값까지의 범위에 해당하는 슬라이더를 구현하는 것입니다. 슬라이더가 움직일 때마다 슬라이더가 어느 시간 값으로 설정되었는지 알아 내고 해당 레이어를 추가/제거하는 이벤트를 트리거합니다.

슬라이더를 5로 설정하면지도에 1부터 5까지의 모든 레이어를 추가하고 다른 모든 레이어를 제거합니다. 다시 말하지만, 이것은 실제로 애니메이션이 아니지만 제 경우에는 효과가 있습니다.

누군가 다른 해결책이 제시되면 여기에 게시하십시오. 나는 그것을 고맙게 생각할 것이다.

은 (, BTW이 내 솔루션은 행동 모습입니다 :)

enter image description here

편집 : 나는 지금 또한이 방법 "적절한"애니메이션을 구축하는 것이 가능하다는 것을 확인할 수 있습니다. 간단히 레이어를 추가하고이 함수를 트리거하는 재생 버튼을 추가 할 때까지 여러 "setTimeout"을 포함하는 js 함수를 작성했습니다.이것은 t = 1에서 tmax까지의 성장을 시각화하는 애니메이션에 해당합니다.

+0

멋진데. D3js 솔루션을 제안하려고했습니다. 그래서, 실제로 동적으로 wfs를 호출하는 것이 아니라, 한 번만 호출하고 슬라이더 간격에 따라 레이어를 만드는 것입니다. –

+0

정확합니다. 기본적으로지도가 초기화 될 때 처음부터 다른 레이어를 만든 다음 동적으로 추가하고 제거합니다. 현재 적절한 애니메이션을 만들기 위해 시간 지연을 사용하는 함수를 작업하고 있습니다. 시작부터 시작까지 전체를 관통하는 재생 버튼입니다. – stopopol

관련 문제