で、コードを説明しています。
訳しながらみていきたいと思います。
*****
ユーザーが始点および終点宛を描画し移動できるようにします。これは、Googleマップや他のものと引けを取らない動作です。ユーザーが検索ボックス(アドレス検索)を介して、またはマップをクリックして、ポイントを選択します。システムはサーバーを検索し、地図上に経路を表示します。ユーザーは後で始点または終点ポイントを移動し、ルートを更新することができます。
このワークショップでは、地図を介した入力(ポイントやドラッグ&ドロップの描画)を実装しますが、地図製作や他のジオコーディングサービスのような Web サービスを使用することによって、検索ボックスの機能を実装することが可能です。
これを行うには、ポイントを描画するためのツール(OpenLayers.Control.DrawFeatures コントロールを使用します)とポイントを移動するためのツール(OpenLayers.Control.DragFeatures はこの作業に最適です)が必要になります。この名前は、これらのコントロールが OpenLayers から来ているを示しています。
これらの2つのコントロールは、ポイントを描画して操作する場所が必要になります。同様に、OpenLayers.Layer.Vector.Layers が必要になります。 OpenLayersでは、ベクトルレイヤは、フィーチャ(形状と属性)がプログラム的に描画することができる場所(対照的に、OSM レイヤはラスタレイヤです。)です。
(注釈:今回の東京都の地図では、OSM レイヤは WMS レイヤです。)
ベクトルレイヤが機能が低い(?)ので、Webサービスから返された経路を描画する2番目の方法を使用します。レイヤの初期化は:
// create the layer where the route will be drawn
var route_layer = new OpenLayers.Layer.Vector("route", {
styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
strokeColor: "#ff9933",
strokeWidth: 3
}))
});
"route" は、レイヤ名で、任意の文字列を使用することができます。 styleMap は、レイヤーに任意の線の色と幅(ピクセル単位)の少しの視覚スタイルを提供します。
2番目のレイヤの初期化は簡単で
// create the layer where the start and final points will be drawn
// 始点と終点を描くレイヤの作成
var points_layer = new OpenLayers.Layer.Vector("points");
OpenLayers.Map object に2つのレイヤを追加:
// add the layers to the map
map.addLayers([points_layer, route_layer]);
ポイントを描画するコントロールを見てみましょう:このコンポーネントは特殊な動作をするので、OpenLayers.Control.DrawFeatures コントロールに基づいて新しいクラスを作成するのはより簡単です。この新しいコントロールは、(DrawPoints という名前)で分けられた JavaScript のファイル(web/DrawPoints.js)に保存されます:
DrawPoints = OpenLayers.Class(OpenLayers.Control.DrawFeature, {
// this control is active by default
autoActivate: true,
initialize: function(layer, options) {
// only point can be drawn
var handler = OpenLayers.Handler.Point;
OpenLayers.Control.DrawFeature.prototype.initialize.apply(
this, [layer, handler, options]
);
},
drawFeature: function(geometry) {
OpenLayers.Control.DrawFeature.prototype.drawFeature.apply(
this, arguments
);
if (this.layer.features.length == 1) {
// we just draw the startpoint
// note: if we want to apply a special style to the
// start point we should do this here
} else if (this.layer.features.length == 2) {
// we just draw the finalpoint
// note: if we want to apply a special style to the
// final point we should do this here
// we have all what we need; we can deactivate ourself.
this.deactivate();
}
}
});
初期化関数(クラスコンストラクタです)では、このコントロールがポイントを描くことができるように設定します(ハンドラ変数は OpenLayers.Handler.Point)。
特別な動作は drawFeature 関数で実装されています:始点と終点だけが必要なので、vector layer にあるフィーチャがいくつか数えることによって、2つのポイントが描かれたときコントロールは自動的に非アクティブになります。コントロールの非アクティブ化は、this.deactivate() です。
コントロールはつぎのように作成します:
// create the control to draw the points (see the DrawPoints.js file)
var draw_points = new DrawPoints(points_layer);
points_layer はより早く作成されるベクトルレイヤです。
DragFeature コントロールは:
// create the control to move the points
var drag_points = new OpenLayers.Control.DragFeature(points_layer, {
autoActivate: true
});
もう一度、points_layer はベクトルレイヤで、autoActivate: true は、OpenLayers にこのコントロールを自動的にアクティブ化したいことをつげます。
// add the controls to the map
map.addControls([draw_points, drag_points]);
マップにコントロールを追加します。
*****
続く ...
0 件のコメント:
コメントを投稿