OpenStreetMap、OSRM、およびリーフレットを使用したルートの構築

Hi％username％！ OpenStreetMap、OSRM、およびLeafletを使用してプロジェクトの指示を得る方法に関する短い記事を書きたいと思います。 上記のテクノロジーが何であるかについてはお話ししません。Habréでは、それらについて既に何度も書かれていますが、記事は小さく、ケースについてのみです。 だから、ルートを構築したい場合-私は猫をお願いします。







それでは始めましょう。 仕事には、JQueryとLeafletが必要です。 後者は公式ウェブサイト-leafletjs.comで取得できます

必要に応じて、CDNを使用できます（私自身は、非常に高速に読み込みます）。

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、マップがロードされるコンテナが必要です。 divを作成し、それに識別子マップを与えます

 <div id="map"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

必要に応じて、幅/高さを設定したり、ポップアップなどで使用したりできます。

ここで直接初期化-マップをdivにアタッチします。

 var map = L.map('map');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、マップがdivにロードされます。 しかし、この場合、Leafletはどうなりますか？ 明らかに私たちがいる都市ではありません。 これを修正するには、次のコードを記述します。

 map.setView([55.7422, 37.5719], 11);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この設計により、モスクワの地図が読み込まれます（座標をLatLngに挿入する必要があります、ズーム順序）。ここで、ズームは縮尺です。 そうそう、私はほとんど忘れていました-カードの画像をどこで入手するかを示す必要があります。 ソースは、公式サイトから独自のサーバーまで、非常に異なる場合があります。 公式ウェブサイトをご覧ください：

 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この段階で、必要な都市の地図がdivにロードされます。 それでは、ルートの構築を始めましょう。 まず、地図のクリックにマーカーを追加します。 合計で2つのマーカーがあります-パスの開始と終了については、現時点ではいくつかのポイントでルーティングを行いません。 そのため、マップ上の「クリック」イベントを処理する必要があります。 このように実装しています：

 map.on('click', function(e) { onMapClick(e); }); function onMapClick(e) { if (loc1 == null) { loc1 = new L.marker(e.latlng, {draggable: 'true'}); loc1.on('dragend', function(event) { //   }); map.addLayer(loc1); } else if (loc2 == null) { loc2 = new L.marker(e.latlng, {draggable: 'true'}); loc2.on('dragend', function(event) { //   }); map.addLayer(loc2); //   } } ;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

マップをクリックした後、onMapClick関数はloc1とloc2のポイントが存在するかどうかを確認します。 両方のポイントが存在する場合、マーカーのみがマップ上で追跡されます（「ドラッグ」）。 ドラッグアンドドロップ自体は、draggable： 'true'パラメーターを使用して有効にします。 マーカーがあり、ドラッグアンドドロップが監視され、ルート描画を固定するためだけに残ります。 要求の送信先はユーザー次第です。OSRMを使用できます（高速の無料ツールであるこれを強くお勧めします）。 ポリライン文字列で結果を返す独自のサーバーを使用します。 インターネットには、すべてのPLがこの文字列を値の配列にデコードするための既製の実装があります。 あなたのケースでこれを実装する方法はあなた次第です。 デコードはphpを使用して行われ、結果は座標の配列として返されます。 そのため、リクエストを送信してルートを描画する方法：

 var polyline; function sendPost() { if (loc2 != null && loc1 != null) { var p1 = loc1.getLatLng(), p2 = loc2.getLatLng(); $.post( //  , {l1: p1.lat + ',' + p1.lng, l2: p2.lat + ',' + p2.lng}, function(data) { if (data) { if (polyline) { map.removeLayer(polyline); } var points = data; polyline = new L.polyline(points, {color: 'red'}); map.addLayer(polyline); map.fitBounds(polyline.getBounds()); } }, "json" ); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私はすぐに認めます-私はjavascriptを非常にひどく知っていますが、おそらくあなたはすでにこれを理解しています。 しかし続けましょう。 ポリライン変数を設定し、これを使用してルートラインを作成します。 ドラッグ時に古いルートを削除できるように、新しいレイヤーでラインを追加します。 要求が正常に完了すると、レイヤーが既に存在するかどうかを確認するためのチェックが行われます。 存在する場合（つまり、既にルートが存在する場合）、新しいルートが削除され、新しいルートが構築されます。



それは基本的にそれです。 経験豊富なプログラマにはあまり誓わないようお願いします。この記事は、私などの初心者に焦点を当てています。 このタスクを実行するときに、このライブラリを使用してルートを構築するためのネットワーク内の例の不足と、私が遭遇した他の小さなニュアンスに遭遇しました。 私はあなたの質問にすべて答えて、あなたが私が見逃したと思うものを追加します。