🌥️ 🎹 🥜 OpenLayersと監視システムでの作業を簡素化するモジュール 🤞🏿 👨🏽‍🎤 ☝🏻

こんにちは、Habr！

OpenLayersをベースにした衛星監視システムを短時間で開発した後、私は結論に達しました。「必要なオブジェクトを常に作成するのはうんざりです。これをすべて異なる変数などに保存します。」そのため、このようなシステムの開発を少し簡略化する軽量モジュールを作成することにしました。

つまり、マップ上のマーカーの管理、トラックの構築、その後のデータベースへの保存のためにWKTにジオメトリを保存するなどの作業を簡素化します。物事。

記事は短くなります。何が起こっているのか、そしてその理由を簡単に説明します。

6つのクラスと1つのクラスのみが実装され、それらにアクセスするための単一のインターフェースを提供します。全体がGruntによって1つの縮小ファイルに圧縮されました。

BaseFunc-オブジェクトを別のオブジェクトで展開する、ジオメトリをWKTに転送する、またはその逆、マップを中央に配置するなどの基本的な機能に必要です。
コンソールは、さまざまなタイプのメッセージとメッセージのグループをコンソールに書き込む機能を説明した単純なクラスです。
コントロール -ここに、OpenLayersで作成されたすべてのコントロールと、これらの要素を追加する機能を保存します。
レイヤー - レイヤーを操作します。ここでは、マップを追加する方法（Google、Bing、さまざまなタイプのOSMでサポート）、独自のレイヤー、ゲッターをレイヤーまたはレイヤー要素に追加する方法について説明します。
トラック -トラックマネージャー。ここで、トラックを作成、削除、非表示にします。トラックを構築するときに、不正なデータに対する保護とポイントの重複に対する保護が実装されます（最適化のため）。
Vehicleは同様のビークルマネージャーです。追加、移動、非表示、削除。

このモジュールを使用したいくつかの例を見てみましょう。

モジュールコンストラクターはマップを初期化し、マップレイヤーと上記のすべてのクラスを追加します。一言で言えば、コンストラクターを呼び出すときに、すでに作業マップが手元にあります。

this.Objects.OpenLayersTools = new OpenLayersTools();

マップにコントロールを追加します。各コントロールは配列に格納され、後で必要に応じてこれらの要素にアクセスできます。パラメーターのセットを各要素に個別に渡すこともできます。関数パラメーターは、必要なすべてのコントロールとそのパラメーターをリストするオブジェクトです。

 this.Objects.OpenLayersTools.Control.addControls({ LayerSwitcher: { controlType: 'LayerSwitcher', roundedCorner: true }, MousePosition: { controlType: 'MousePosition' }, PanZoomBar: { controlType: 'PanZoomBar' }, Navigation: { controlType: 'Navigation' }, ArgParser: { controlType: 'ArgParser' }, Attribution: { controlType: 'Attribution' } });

独自のマップまたはレイヤーを追加するには、すべてがシンプルです:)オブジェクトのaddMap関数で、マップセレクターに表示されるマップの名前とマップ自体のタイプを指定します。独自のレイヤーを追加するには、セレクターでレイヤーの名前とレイヤーの属性を渡します。レイヤーの表示スタイルが必要です：

 this.Objects.OpenLayersTools.Layer.addMap({ 'Google Maps': 'Google Streets' }); this.Objects.OpenLayersTools.Layer.addVectorLayer(' ', { styleMap: { default: { display: '${display}', label: '${label}', externalGraphic: '${externalGraphic}', graphicWidth: 32, graphicHeight: 32, graphicYOffset: -50 } } }); this.Objects.OpenLayersTools.Layer.addVectorLayer('', { styleMap: { default: { display: '${display}', label: '${label}', strokeWidth: 2 } } })

車両を追加するには、車両を追加するレイヤーの名前、車両の座標、および要素の属性を転送します。

 Core.Objects.OpenLayersTools.Vehicle.addVehicle(' ', { longitude: longitude, latitude: latitude }, { id: id, label: 'Testing Vehicle ' + id, display: '', externalGraphic: './images/car.png' });

トラックを構築するには、同様に、トラックを追加するレイヤーの名前、座標を持つオブジェクトの配列（[{coord_1}、{coord_2}、...、{coord_n}]の形式）およびこの要素の属性（トラック）を指定します。

 Core.Objects.OpenLayersTools.Track.buildTrack('', points, { id: id, label: 'Testing Track ' + id, display: '', maxInterval: 5, minInterval: 0.0001, projection: 'EPSG:4326' });

作品の例はこちらをご覧ください。すべての機能のドキュメントは、ここにあります。ソースはこちらです。

PS貴重な時間を節約するために、「純粋に自分用に」このモジュールを開発しました。ここに置くことにしました。誰かが役に立つかもしれません。

PPS新しい機能が必要な場合、同じモジュールに実装を追加する予定です。トラックを構築するときにルーティングを行う計画。

ちょっとした発言をしたいのですが、招待してくれてありがとう。私の側でこの種のエラーが繰り返されることはありません。

OpenLayersと監視システムでの作業を簡素化するモジュール

More articles: