Mapbox gl＆directions APIコール - 経路を表示しません

Question

旅行を表示するための複数のマーカーを持つアプリがあります。各マーカはステップであり、マーカの後に続く各マーカ間のルートを作成したい（次のステップ）。そのために

、今私はこのコードを持っている：

$(document).ready(function() { 
    var map; 
    var directions; 

    // token access for MAPBOX GL 
    mapboxgl.accessToken = 'pk.eyJ1IjoiYW50b3RvIiwiYSI6ImNpdm15YmNwNTAwMDUyb3FwbzlzeWluZHcifQ.r44fcNU5pnX3-mYYM495Fw'; 

    // generate map 
    var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v10', 
    center: [-96, 37.8], 
    zoom: 5 
    }); 

    // center map on selected marker 
    map.on('click', 'markers', function (e) { 
    map.flyTo({center: e.features[0].geometry.coordinates}); 
    }); 

    // change mouse action on enter/leave in marker 
    map.on('mouseenter', 'markers', function() { 
    map.getCanvas().style.cursor = 'pointer'; 
    }); 

    map.on('mouseleave', 'markers', function() { 
    map.getCanvas().style.cursor = ''; 
    }); 

    $.ajax({ 
    dataType: 'json', 
    url: grabTravelData(), 
    success: function(data) { 
     geojson = data; 
     map.addSource("markers", { 
      "type": "geojson", 
      "data": { 
       "type": "FeatureCollection", 
       "features": data 
      } 
     }); 
     map.addLayer({ 
      "id": "markers", 
      "type": "circle", 
      "source": "markers", 
      "paint": { 
       "circle-radius": 7, 
       "circle-color": "#ff7e5f" 
      }, 
     }); 
     // center map on markers 
     var bounds = new mapboxgl.LngLatBounds(); 
     data.forEach(function(feature) { 
      bounds.extend(feature.geometry.coordinates); 
     }); 
     map.fitBounds(bounds); 

     for(var i = 0; i < data.length; i++) { 
      var last = data.length - 1 
      var from = data[i]; 
      var to = data[i + 1]; 
      if(i != last) { 
       apiCall(from.geometry.coordinates[0], from.geometry.coordinates[1], to.geometry.coordinates[0], to.geometry.coordinates[1], mapboxgl.accessToken, i); 
      } else { 
       apiCall(from.geometry.coordinates[0], from.geometry.coordinates[1], from.geometry.coordinates[0], from.geometry.coordinates[1], mapboxgl.accessToken, i); 
      } 
     } 
    }, error: function(data) { 
     console.log(data + ' error'); 
    } 
}); 

function apiCall(from_one, from_two, to_one, to_two, token, number) { 
    $.get("https://api.mapbox.com/directions/v5/mapbox/driving/" + from_one + "," + from_two + ";" + to_one + "," + to_two + "?access_token=" + token, function(data) { 
    var naming = "route-" + number; 
    map.on('load', function() { 
     map.addSource(naming, { 
      "type": "geojson", 
      "data": { 
       "type": "Feature", 
       "properties": {}, 
       "geometry": { 
        "type": "LineString", 
        "coordinates": data.routes[0].geometry 
       } 
      } 
     }); 

     map.addLayer({ 
      "id": naming, 
      "type": "line", 
      "source": naming, 
      "layout": { 
       "line-join": "round", 
       "line-cap": "round" 
      }, 
      "paint": { 
       "line-color": "#ff7e5f", 
       "line-width": 8 
      } 
     }); 
    }); 
    } 
} 

をしかしルートは地図上に表示されていない、と私はAPIドキュメントにこの行を読んで：//このAPIはからは利用できませんJavaScript SDK

多分私はAPIを呼び出すことができません。このURLを

：https://api.mapbox.com/directions/v5/mapbox/driving/18.0944238,42.65066059999999;15.981919,45.8150108?access_token=

そして、結果はそう...それはドキュメントに記述だとして良い結果ジオメトリとJSONである私は良い結果を持って、このコードで 。

地図上にルートを表示する方法を知っている人がいますか？ API呼び出しができない場合は、コードを変更してDirectionsプラグインを使用する必要がありますか？

Answer 1

問題は、ジオジソン機能ではないポリラインでエンコードされたデフォルトのジオメトリによって返されることです。

これを回避するには、URLに&geometries=geojsonというクエリパラメータを指定すると、簡単に表示できる正しい形式のデータが返されます。

また、地図のロードが完了したら、あなたのajaxをやるほうが良いようです。

// This is the token from their docs, don't be evil 
 
mapboxgl.accessToken = 'pk.eyJ1IjoiYXBlcmN1IiwiYSI6ImNpZ3M0ZDZ2OTAwNzl2bmt1M2I0dW1keTIifQ.I5BD9uEHdm_91TiyBEk7Pw' 
 

 
const map = new mapboxgl.Map({ 
 
    container: 'map', 
 
    style: 'mapbox://styles/mapbox/streets-v9', 
 
    center: [18.0944238, 42.65066059999999], 
 
    zoom: 9, 
 
}) 
 

 
map.on('load',() => { 
 

 
    $.get(`https://api.mapbox.com/directions/v5/mapbox/driving/18.0944238,42.65066059999999;15.981919,45.8150108?access_token=${mapboxgl.accessToken}&geometries=geojson`, data => { 
 
    
 
    map.addLayer({ 
 
     id: 'route', 
 
     type: 'line', 
 
     source: { 
 
     type: 'geojson', 
 
     data: { 
 
      type: 'Feature', 
 
      properties: {}, 
 
      geometry: data.routes[0].geometry, 
 
     }, 
 
     }, 
 
     layout: { 
 
     'line-join': 'round', 
 
     'line-cap': 'round', 
 
     }, 
 
     paint: { 
 
     'line-color': '#ff7e5f', 
 
     'line-width': 8, 
 
     }, 
 
    }) 
 
    
 
    }) 
 

 
})

html, body, #map { 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js"></script> 
 
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css" rel="stylesheet"/> 
 

 
<body> 
 
    <div id='map'></div> 
 
</body>