Openlayersアニメーションの例とアルゴリズム


57

このコミュニティの人々がアニメーションのニーズにオープンレイヤーを使用しているのか、長い間疑問に思っています。ブラウザでのアニメーションは少し疲れるが、地図がアニメーションと出会うと、良いことが出てくると信じている。

openlayersと互換性のあるアニメーションの優れたWebサイトまたはアルゴリズムを知っていますか?

これらは、アニメーション、いくつかのコード、例について私が知っていることです。plsは、これを必要とする人々のために、アニメーションに関する知識をオープンレイヤーと共有します...

時間遅延のあるマップ上に機能を追加するための基本的なJavaScriptコード。

 time = 0;
    for (var i = 0; i < 5; i++) {
        time += 1000;
        setTimeout(function(j) {
            return function() {
                console.log("var is now", j);
            }
        }(i), time);
    }

i2maps

ジオコンピューティング環境です。時空間データとWeb指向の視覚化から知識を発見するための柔軟なプログラミングフレームワークを提供します。Javascriptライブラリは、インタラクティブなユーザーインターフェイスの構築に使用され、OpenLayersの上に構築されます。

i2map

OpenLayersタイムライン

OpenLayersで時間関連のマップを作成するためのシンプルなライブラリです。クラスタ戦略(OpenLayers.Strategy.Cluster)と時間フィルタリングをサポートしています。現在、GeoJSONまたはGeoRSS形式のソースデータをサポートしています。

タイムリアン

Timemap.js

は、Google、OpenLayers、BingなどのオンラインマップをSIMILEタイムラインで使用できるようにするJavascriptライブラリです。このライブラリを使用すると、JSON、KML、またはGeoRSSの1つ以上のデータセットをマップとタイムラインの両方に同時に読み込むことができます。デフォルトでは、タイムラインの表示範囲内のアイテムのみがマップに表示されます。

タイムマップ

自転車共有マップ

データはプロバイダーのWebサイトから2〜20分ごとに自動的に更新されます。自転車の使用は同時使用であり、サイクルの再配布が含まれます。1日の実際の合計使用量ははるかに高い場合があります。分布の不均衡-すべてのスタンドが同じ満杯になるために、別のスタンドに移動する必要があるサイクルの数。数字が大きいほど、分布が不均衡になっていることを示します。たとえば、中心部に多くの自転車があり、端部にはほとんどありません。このウェブサイトは中断される場合があります。

データ:プロバイダーのWebサイト。地図データ:OS Open Dataを含むOpenStreetMapの貢献者。ホスティング:UCL。MapnikとOpenLayersを搭載しています。

バイクシェア

RaphaëlJSとOpenLayersの統合。

RaphaëlJSは、Web上のベクターグラフィックスでの作業を簡素化する小さなJavaScriptライブラリです。たとえば、独自の特定のグラフや画像の切り抜きと回転ウィジェットを作成する場合、このライブラリを使用して簡単かつ簡単に実現できます。

ラファエル

OpenLayersフィルター戦略

この例では、フィルター戦略を使用して、レイヤーに渡されるフィーチャを制限しています。このレイヤーにバインドされたフィーチャには、日付値を持つwhen属性があります。フィルター戦略は、表示される日付の範囲を制限するbetweenフィルターで構築されます。単純なアニメーションは、when値のドメインを循環し、更新されたフィルターを使用して戦略でsetFilterを呼び出します。

フィルタ


1
RaphaëlJSとOpenLayers @Aragonリンクが壊れています
キンカジュー

回答:


6

GeoNodeは、地理空間データの管理と公開のために、さまざまなオープンソースプロジェクト(Django、GeoExt、OpenLayers、GeoWebCache、GeoServer、GeoNetwork)を組み合わせたプラットフォームです。

たとえば、歴史的な視点でアニメーション化された地図のインフラストラクチャを提供するMapstoryで使用されます。

ここに画像の説明を入力してください



0

アラゴンはあなたがポイントする例は本当に素晴らしいです。

いくつかのアニメーションにOpenLayersを使用しましたが、主な問題は、機能を使用して時間をモデル化する標準的な方法がないため、「標準的な方法」がないことです。

ラスタデータの場合、具体的な瞬間ごとにレイヤーを作成し、各アニメーションステップで表示する必要があるレイヤーを管理するのは簡単です。

ベクトルデータの場合、物事、データ、時間をモデル化する方法だけでなく、それを視覚化する方法も複雑になります。データの種類に応じて、必要なエフェクトやアニメーションがたくさんあります。

乾杯。


2
うーん、これは答えですか?コメントのように聞こえます。「簡単な」および「複雑な」例を公開すると、答えになる可能性があります。
トニーギル
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.