Mapbox gl directions API

因此，我正在編寫一個應用程序，它允許管理員用戶創建一個具有不同停靠點的特定位置的旅程。Mapbox gl directions API

用於顯示地圖，添加標記，flyTo位置等我正在使用Mapbox GL。

我用cURL實施Mapbox API來獲取行車路線，然後繪製地圖

一行所以作爲cURL調用的一個例子，我收到這代表我的方向座標列表。

問題是在我試圖在地圖上連接這些點時出現的。

由於HTML一些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>

你可以看到一組將被連接到畫一條線座標的一個例子。我想知道是否有連接這些點的方法，以便線路只會跟隨（駕駛）道路？

解釋它更好，這是輸出

我知道這是我的問題是通用解釋的親密變焦，但我希望這是可以理解的。

我一直在試圖做一些神奇的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項目並將次要mod改爲src/directions來移除開始和結束控制.js文件

我註釋掉線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);

這是相對容易的，在故宮的設置和運行故宮設置按我自己的測試文件，以測試https://github.com/mapbox/mapbox-gl-directions/blob/master/CONTRIBUTING.md

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

我還添加了行：

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

下面的要求（」 ../）;在example/index.js中。當您在NPM運行的例子，你可以從http://localhost:9966/example/bundle.js

訪問插件的新捆綁的版本，當時我能夠到線

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

改變

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

有一個整體一羣神奇的人在npm中運行，我不知道任何事情，但這一切只是在我的機器上工作。希望這可以幫助。方向線適用於動畫和音高，縮放和方位動畫。請參閱下面的屏幕抓取：

UPDATE：添加回復到這裏，所以我可以告訴一個屏幕抓取。 @Andrejus，因爲這個hack依賴mapbox插件的行爲，而不是從頭開始繪製路徑，所以你可以獲得內置的道路，並且你可以訪問路線API來添加航點以完成你的A-> B-> C-> 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' 
});

所以可能有比這更好的解決方案。我一直在使用Mapbox for <，並且不太瞭解它的書面或結構。

還要注意代碼的改動是在一個插件中，而不是mapbox gl的核心，所以相對孤立。 BTW這個插件是你調用的cURL API的一個包裝，它返回了點數組。據推測，GitHub上的源代碼將包含代碼，它在渲染該行的位置之後執行，如果這絕對是您想要執行的操作。

來源

2016-05-23 16:22:58

嗯，有趣的方法，雖然對我來說這聽起來像一個黑客攻擊。我也想要的是按照這種模式創建類似於A-> B-> C-> D的路由的可擴展性。但我仍然喜歡你的方式！ –

@AndrejsGubars：我更新了上面的答案，並提供了更多有關添加路標的註釋，正如您所要求的。還添加了一些關於製作解決方案的註釋。希望有所幫助。 –

是的，現貨！那正是我想要做的。我想我太野心勃勃，期待整個圖書館能做些什麼:)但是，謝謝你的建議！ –

Mapbox gl directions API

回答

相關問題