Mapbox gl directions API

私は管理者が異なる停止地点を持つ特定の場所を旅行するアプリケーションを作成しています。Mapbox gl directions API

地図を表示するには、マーカー、飛行機の位置などを追加するにはMapbox GLを使用しています。

私が運転方向を取得し、だから私は私の方向を表す座標のリストを受け取るcURLコールの一例として、マップ

上に線を描画するMapbox APIのcURL実装を使用していました。

問題は、マップ上でこれらのポイントを接続しようとすると表示されます。いくつかのJS

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8' /> 
    <title></title> 
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script> 
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' /> 
    <style> 
     body { margin:0; padding:0; } 
     #map { position:absolute; top:0; bottom:0; width:100%; } 
    </style> 
</head> 
<body> 

<div id='map'></div> 
<script> 
mapboxgl.accessToken = '<ACCESS TOKEN>'; 
var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v8', 
    center: [-122.486052, 37.830348], 
    zoom: 15 
}); 

map.on('load', function() { 
    map.addSource("route", { 
     "type": "geojson", 
     "data": { 
      "type": "Feature", 
      "properties": {}, 
      "geometry": { 
       "type": "LineString", 
       "coordinates": [ 
       [-155.088899,19.722942],[-155.08565,19.72472],[-155.084661,19.723701],[-155.083569,19.723139],[-155.079557,19.722262],[-155.074227,19.721938],[-155.069939,19.722545],[-155.070061,19.721225],[-155.07007,19.711726] 
       ] 
      } 
     } 
    }); 

    map.addLayer({ 
     "id": "route", 
     "type": "line", 
     "source": "route", 
     "layout": { 
      "line-join": "round", 
      "line-cap": "round" 
     }, 
     "paint": { 
      "line-color": "#888", 
      "line-width": 8 
     } 
    }); 
}); 
</script> 

</body> 
</html>

とHTMLの例として

あなたは線を引くために接続される座標のセットを見ることができます。私は線が道だけに従うようにこれらの点を結ぶ方法があるかどうか疑問に思っていた（運転のために）？

それをよりよく説明するために、これは出力

の近いズームで私はそれは私の問題のかなり一般的な説明だけど、私はそれが理解できる願っています。

Mapbox Gl Directions APIと私はいくつかの魔法をしようとしていましたが、私は好きではないcontollerを追加する必要があります。私はルートを描き、一般のユーザーがそれを修正できるようにする必要はありません。

アドバイスはありますか？

出典

2016-05-16 Andrejs Gubars

は、実際には、私は私がしなければならなかったすべての方向のAPIからの応答を取得し、Mapboxマップマッチング、それは完璧なルートを返します。そのように返された配列を渡すことで、思ったことを簡単でした。私には、これはハックのように聞こえるが、すべては、Mapbox APIで

出典

2016-06-08 22:17:13

私は今日これをやろうとしており、マップへの道順を知り、git hubからmapbox-gl-directionsプロジェクトをプルダウンしてsrc/directions .jsファイル

私はこれがhttps://github.com/mapbox/mapbox-gl-directions/blob/master/CONTRIBUTING.md

npm install & npm start & open http://localhost:9966/example/

ごとにNPMのセットアップを実行して、NPMでのセットアップと私自身のテストファイルをテストするのは比較的簡単だった48

52から

// Add controllers to the page 
//new Inputs(inputEl, store, this.actions, this.map); 
//new Instructions(directionsEl, store, { 
// hoverMarker: this.actions.hoverMarker, 
// setRouteIndex: this.actions.setRouteIndex 
//}, this.map);

行をコメントアウト

私は、ライン追加：以下

localStorage.setItem('MapboxAccessToken', '<TOKEN HERE>');

を必要とする（」../）。 example/index.jsにあります。あなたがNPMで実行されている例がありますが、私はその後、

<script src='http://localhost:9966/example/bundle.js'></script>

にライン

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v2.0.0/mapbox-gl-directions.js'></script>

を変更することができましたhttp://localhost:9966/example/bundle.js

からプラグインの新しいバンドル版にアクセスすることができ、全体があります私は何も知らないが、それはすべて私のマシンで働いていたnpmでの例のランナーに入る魔法の束。お役に立てれば。方向線は、アニメーション、ピッチ、ズーム、ベアリングアニメーションで機能します。

UPDATE：私は、画面のグラブを表示することができますので、ここに返信を追加し、以下の画面のグラブを参照してください。 @Andrejusは、このハックはmapboxのGL方向に依存しているとして行動をプラグインではなく、あなたが内蔵され、次の道を取得し、あなたのA-> B-> C-を行うためにウェイポイントを追加する方向のAPIへのアクセス権を持って、ゼロからのパスを描きます> Dは次のようになります。

map.on('load', function() { 
    directions.setOrigin(start); 
    directions.addWaypoint(0, [-0.07571203, 51.51424049]); 
    directions.addWaypoint(1, [-0.12416858, 51.50779757]); 
    directions.setDestination(end); 
});

ドキュメントには、最大25のウェイポイントがあると書かれています。

mapbox-GL-方向プラグインは、画面上のコントロールをオフにするオプションを持っていない、彼らは呼ばれ行き方クラスのonAdd（マップ）メソッドで追加されたとき方向が地図に追加されます。私は早くそれらを取り除くことができるかどうかを見たいと思っていて、実験しています。柔軟なソリューションを作成するには、Directionsクラスのコンストラクタに渡されたオプションを追加することができます。これらの行き方APIへの呼び出しのパラメータにバインドされているように見えるが、そこに渡された他のオプションがあります。

var directions = new mapboxgl.Directions({ 
    unit: 'metric', 
    profile: 'cycling' 
});

だから、より良い解決策があるかもしれません。私は<のために1日Mapboxを使用していたし、書かれたか構造化されたかについて多くを知らない。

コードの変更は、プラグインであることも注意していないmapbox GLのコアので、比較的孤立。 BTWこのプラグインはあなたが呼び出していたcURL APIのラッパーであり、ポイントの配列を返します。おそらく、GitHubの上のソースは、それはあなたが何をしたい間違いだ場合、それはラインをレンダリングする場所を、以下の道路を行うコードが含まれます。

出典

2016-05-23 16:22:58

うーん、興味深いアプローチを文書化。私が望むのは、このパターンに従ってA→B→C→Dのようなルートを作成する拡張性です。しかし、私はまだあなたの方法が好きです！ –

@AndrejsGubars：私はあなたがそれを求めていたとして、ウェイポイントを追加するにはいくつかのより多くのノートで上記の答えを更新しました。また、解決策を作る上でいくつかのノートを追加しました。希望が役立ちます。 –

はい、見つけてください！それはまさに私がやりたかったことです。私はあまりにも野心的で、ライブラリ全体が何かを期待していたと思います:)しかし、あなたのアドバイスに感謝します！ –

答えて

関連する問題