openlayers 3はgifを使ってアニメーションマーカーをレンダリングすることができます

Question

私はマーカーレイヤーをアニメーションGIF画像にする方法を尋ねますopenlayers 2のように...アニメーションマーカーを表示することができます。マーカー移動は可能かどうか？

style = { 
       anchorXUnits: 'fraction', 
       anchorYUnits: 'pixels', 
       anchor: anchor, 
       opacity: 1, 
       src: 'https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif', 
       scale: 1, 
      }; 

var iconStyle = new ol.style.Style({ 
      image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ (style)) 
     }); 

var iconFeature = new ol.Feature({ 
      position: data.coordinate, 
      geometry: new ol.geom.Point([0,0]), 
     }); 

iconFeature.setStyle(iconStyle); 

https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gifをアニメーション表示する方法をマップに表示するにはどうすればよいですか？それは可能かどうかは、openlayers 3.でアニメーション機能を作成していません。私はこの解決策を含む記事を見つけることはありません...ありがとう

Answer 1

はい方法がありますが、少しトリッキーですので、それはあなたのニーズに合っています。 代わりにマーカーを追加し、マーカーをスタイルするにはcssを使用する必要があります。 DOM要素をこの

あなたのhtmlをチェック

<div id="map" class="map"></div> 
<div id="marker" title="Marker"></div> 

ここ

var layer = new ol.layer.Tile({ 
    source: new ol.source.OSM() 
}); 

var map = new ol.Map({ 
    layers: [layer], 
    target: 'map', 
    view: new ol.View({ 
    center: [0, 0], 
    zoom: 2 
    }) 
}); 
//this the postion of your marker 
var pos = ol.proj.fromLonLat([23.3725, 35.208889]); 

var marker = new ol.Overlay({ 
    position: pos, 
    positioning: 'center-center', 
    element: document.getElementById('marker'), 
    stopEvent: false 
}); 
map.addOverlay(marker); 

あなたのjsとここにあなたのCSS

#marker { 
    width: 365px; 
    height: 360px; 
    background: url("https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif") no-repeat scroll 0% 0% transparent; 
} 

とダンスのバナナとフィドルhere（素晴らしいgifしかし:)）））））