こんにちは、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新しい機能が必要な場合、同じモジュールに実装を追加する予定です。 トラックを構築するときにルーティングを行う計画。
ちょっとした発言をしたいのですが、招待してくれてありがとう。 私の側でこの種のエラーが繰り返されることはありません。