1、Maobox加载带有箭头放心的线,需要分别加载线数据和箭头icon数据;
2、mapbox先加载线数据:
// 加载轨迹线数据
function addRoutelayer() {
map.addLayer({
'id': 'routeLayer',
'type': 'line',
'source': {
'type': 'geojson',
'lineMetrics': true,
'data': {
type: "FeatureCollection",
features: [
{
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [
[116.391844, 39.898457],
[116.377947, 39.898595],
[116.366892, 39.947263],
[116.387537, 39.947568],
[116.401988, 39.947764],
[116.410824, 39.947929],
[116.42674, 39.947558],
[116.427338, 39.9397],
[116.405321, 39.906622],
[116.394954, 39.906324],
[116.391264, 39.906308],
]
}
}],
}
},
'paint': {
'line-width': 5,
'line-opacity': 1,
'line-color': '#009EFF',
}
});
}
3、mapbox加载箭头数据:
// 加载箭头数据
function addArrowlayer() {
map.addLayer({
'id': 'arrowLayer',
'type': 'symbol',
'source': {
'type': 'geojson',
'lineMetrics': true,
'data': {
type: "FeatureCollection",
features: [
{
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [
[116.391844, 39.898457],
[116.377947, 39.898595],
[116.366892, 39.947263],
[116.387537, 39.947568],
[116.401988, 39.947764],
[116.410824, 39.947929],
[116.42674, 39.947558],
[116.427338, 39.9397],
[116.405321, 39.906622],
[116.394954, 39.906324],
[116.391264, 39.906308],
]
}
}],
}
},
'layout': {
'symbol-placement': 'line',
'symbol-spacing': 50, // 图标间隔,默认为250
'icon-image': 'arrowIcon', //箭头图标
'icon-size': 0.5,
'icon-rotate': 90
}
});
}
4、其中箭头icon图标: