2017-01-26 2 views
1

私はクライアントの建物の周りをユーザーが移動できるようにするプロジェクトに取り組んでいます。建物内の通路は、OSMやGoogleなどの地図では明確に定義されていません。リーフレットJS:カスタムポイントを使った最短経路

私は経路上のを各ポイントを定義することができるプラグインがあり、私は開始エンドポイントを設定するとき、それは最短経路を見つけるのだろうか?

Custom Points and Route

画像ポイントを、緑色に宣言された点を示す開始(イエロー)と端部(赤)。プラグインまたはアルゴリズムは、最短ルートを形成するために関連ポイントをリンクする必要があります(紫色で表示)

ありがとうございました!そこにプラグインがない場合は、おそらく自分自身を作成する必要があります。

PS。私はLeaflet JSを使用しています。レイヤーとして私自身のカスタムイメージを持っているので、私はOSMやGoogleマップに依存しません。

答えて

1

私は、andrewhaywardのDijkstraのアルゴリズムのJavaScript実装により、見つけられるhere。それとは別に

は、ここに

は、これらの機能は、ダイクストラのアルゴリズムで使用するために、ノードとノード間の距離を導出する際に私を助けるためにだけある...私がやったことだ:

ステップ1 :特定のポイントをクリックしてマップにノードを追加します。

特定のポイントをクリックするとノードが作成されます。

map.on('click', function (e) { 
    var node = []; 
    node[0] = e.latlng.lat; 
    node[1] = e.latlng.lng; 
    addNodes(node,curr_node); 
}); 

は、あなたは、ダイクストラのアルゴリズムで使用するために必要な変数が上に印刷できるように、テキストエリアを作成する必要があります。すべてのノード宣言とそのすべてを完了したら、テキストエリアとこれ以上不要になるこれらのすべての関数を削除できます。

ステップ2:あなたはそれに連結される他のノードを選択することができるように追加されるすべてのノードが「CTR +クリック」機能を持っています

地図上に追加されますノードの機能ノード。

たとえば、Ctrlキーを押しながらノードAをクリックすると、Ctrlキーを押した後にALTを押してノードAに接続するノードB、C & Dを選択できます。単にALTボタンを押したままにしておきます。

Dijkstraのアルゴリズムで使用するために、A {B:25、C:15、D:32}、がテキストエリアに表示されます。

番号25、15及び32は、この私はhereから即興getDistanceFromLatLonInM関数によって計算されるノードAにそれぞれのノードとの間の距離です。

function addNodes(polyNodes,num){ 
var marker = L.marker([polyNodes[0], polyNodes[1]]).addTo(map); 
var myIcon = L.icon({ 
    iconUrl: 'images/point.png', 
    iconSize: [16, 16], 
    iconAnchor: [8, 8], 
    popupAnchor: [-3, -76] 
}); 
marker.setIcon(myIcon); 
marker.on('click',function(e){ 
    if(ctrlPressed){ 
     curr_ctrl_pt = [polyNodes[0], polyNodes[1]]; 
     var oldText = $('#textarea_nodes').val(); 
     $('#textarea_nodes').val(oldText + num + ':{'); 
     var myIcon_2 = L.icon({ 
      iconUrl: 'images/point_c.png', 
      iconSize: [16, 16], 
      iconAnchor: [8, 8], 
      popupAnchor: [-3, -76] 
     }); 
     this.setIcon(myIcon_2); // custom marker to show that the node has been declared. This is just for your own reference 
    } 
    if(altPressed){ 
     var oldText = $('#textarea_nodes').val(); 
     $('#textarea_nodes').val(oldText + num + ':' + getDistanceFromLatLonInM(polyNodes[0], polyNodes[1],curr_ctrl_pt[0],curr_ctrl_pt[1]) + ','); 
     } 
    }) 
} 
function getDistanceFromLatLonInM(lat1,lon1,lat2,lon2) { 
    var R = 6371; // Radius of the earth in km 
    var dLat = deg2rad(lat2-lat1); // deg2rad below 
    var dLon = deg2rad(lon2-lon1); 
    var a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) + 
    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2) 
    ; 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c; // Distance in km 
    return (d * 1000).toFixed(1); 
} 

function deg2rad(deg) { 
    return deg * (Math.PI/180) 
} 

私はこれが誰かを助けることを願っています。

すべてベスト!

関連する問題