openlayersにタイムスライダコントローラを追加する

Question

私は.csvフォーマットの気象データを含むデータベースを持っています。各表は特定の時点での気象条件を表しています。 ジオサーバーを使用して、これらのテーブルをそれぞれブラウザで視覚化することができます。 私がやりたいことを探していたのは、htmlコードにスライダーとして追加するものなので、スライダーを横切ってスライドすると、毎分の気象条件が表示されます。

私はここにいくつかの.jsコードを発見したが、正直に言えば、どこ私の目的に合うように追加する知っている（またはそれが本当に目的に合うかない場合でも）していない

https://github.com/metno/openlayers-timeslider

また、これは参考になるかどうかは知りませんが、地図上のデータを示してhtmlの一部は以下の通りです：あなたはGeoserveのラスタ時系列データのためのImageMosaicプラグインを使用することができます

var rainLayer = new ol.layer.Tile({ 
    source: new ol.source.TileWMS({ 
    url: 'http://x.x.x.x/geoserver/wms', 
    params: {'LAYERS': 'storename:layername'} 
}); 

Answer 1

r。 Hereは、時間対応のImageMosaicを実装するためのドキュメントです。

var wms = new ol.layer.Tile({ 
      name: name, 
      opacity: opacity, 
      source: new ol.source.TileWMS({ 
       url: global.geoserverWMS2 + 'wms', 
       params: { 
        'LAYERS': layer_name, 
        'TILED': true, 
        'TIME': '2017-01-01', // this is an example 
       }, 
       serverType: 'geoserver' 
      }) 
     }); 

し、対応する気象画像をレンダリングするために時間パラメータを変更するようだったら、ちょうど（updatePramsを使用する：あなたはこのようなOpenLayersをしてgeoserverに時間パラメータを渡す必要がモザイクを実施した後 ）は、次のようにwmsレイヤーに表示されます。

wms.getSource().updateParams({'time': '2016-01-01'}) 
wms.getSource().updateParams({'time': '2015-01-01'}) 
wms.getSource().updateParams({'time': '2014-01-01'}) 

となり、データソースが更新され、新しい画像がレンダリングされます。