Mapbox gl & directions API调用-不显示路由
Mapbox gl & directions API调用-不显示路由
提问于 2017-05-16 18:05:54
我有一个带有多个标记的应用程序，用于显示一次旅行。每个标记都是一个步骤，我希望在每个标记之间创建一个路由，然后是下面的标记(下面的步骤)。
为了达到这个目的，我现在有一个代码：
$(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：token=
结果是有几何学的.所以写在文档中的效果很好。
也许有人知道我该怎么在地图上显示路线？如果我不能使用API调用，我应该如何修改我的代码以使用指导插件？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-05-19 06:11:49
您的问题是，在默认情况下，方向API将返回以多行编码的几何图形，这不是geojson特性。
为了解决这个问题，您可以将&geometries=geojson查询参数指定到您的url，它将以您可以轻松显示的正确格式返回数据。
还有一件事，在地图加载完成后，我觉得最好是做好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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44008615
复制相关文章
相似问题
腾讯云开发者
