16 pgRouting in Debian6 10 - ルーティングをブラウザで表示3

9.2. Select the start and final destination

で、コードを説明しています。
訳しながらみていきたいと思います。

*****
ユーザーが始点および終点宛を描画し移動できるようにします。これは、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 は、レイヤーに任意の線の色と幅（ピクセル単位）の少しの視覚スタイルを提供します。

２番目のレイヤの初期化は簡単で

// create the layer where the start and final points will be drawn　
// 始点と終点を描くレイヤの作成
var points_layer = new OpenLayers.Layer.Vector("points");

OpenLayers.Map object に２つのレイヤを追加：

// 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 にあるフィーチャがいくつか数えることによって、２つのポイントが描かれたときコントロールは自動的に非アクティブになります。コントロールの非アクティブ化は、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]);

マップにコントロールを追加します。
*****
続く ...