Mais

Como fazer uma animação de shake adicionando recurso em openlayers 3

Como fazer uma animação de shake adicionando recurso em openlayers 3


Você tem uma ideia da função animar para agitar um elemento quando ele é adicionado ao mapa?

Encontrei apenas esta animação de openlayers 3 amostras: Exemplo de recurso do Animate openlayers 3


Acho que deve bastar animar você mesmo o recurso. Vou tentar demonstrar abaixo junto com algum pseudo-código, já que ainda não brinquei com camadas vetoriais no OL3.

Como você tem o evento addFeature, pode fazer uso dele:

source.on ('addfeature', function (e) {animateStart (e.feature);});

Em seguida, você pode executar uma animação simples ao longo das linhas de:

var frameCount = 0; var timeOutHandle = null; var initialGeometry = null; function animateStart (_oFeature) {initialGeometry = _oFeature.Geometry; // assumindo que existe timeOutHandle = window.setInterval (function (feature) {if (frameCount == 5) {// assume 5 frames window.clearTimeout (timeOutHandle); feature.Geometry = initialGeometry; frameCount = 0; return;} else {// você precisa que a resolução da animação seja significativa para qualquer nível de zoom var resolution = map.getView (). getResolution (); if (frameCount% 2 == 0) {// move cada ponto na geometria para o oeste - assume pseudocódigo aqui para (var pt em feature.Geometry.Points) {pt [0] - = resolução * 8; // este 8 pode ser algo que você tente e escolha} // talvez atualizar / redesenhar a camada?} else {// mova cada ponto na geometria para o leste - assuma o pseudocódigo aqui para (var pt in feature.Geometry.Points) {pt [0] + = resolution * 8;} // talvez atualize / redesenhe a camada?} frameCount ++;}} (_oFeature), 100); }

Mais uma vez, devo enfatizar que isso é basicamente um pseudocódigo, mas deve apontar a direção certa.


Assista o vídeo: Tutorial OpenLayers 3 - Parte 1