如何在 mapbox 中的起点和终点之间的路线中添加小箭头

Question

如何在 mapbox 中的起点和终点之间的路线中添加小箭头

这是我的代码 我已将起点作为常数（始终相同）。然后我将坐标设为 onclick 以获取我的终点以显示它们之间的路线。 然后我试图在路线上显示箭头

  mapboxgl.accessToken = 'ACCESS_TOKEN';
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [-122.662323, 45.523751], // starting position
  zoom: 12
});
//here we are defining the range of map
const bounds = [
  [-123.069003, 45.395273],
  [-122.303707, 45.612333]
];
//setted the map max bound here
map.setMaxBounds(bounds);
//here we will set the lang and lat for the start as the start will be constant and only      end will change
const start = [-122.662323, 45.523751];
async function getRoute(end) {
  const query = await fetch(`https://api.mapbox.com/directions/v5/mapbox/cycling/${start[0]},${start[1]};${end[0]},${end[1]}?steps=true&geometries=geojson&access_token=${mapboxgl.accessToken}`, {
    method: 'GET'
  });
  const json = await query.json();
  const data = json.routes[0];
  const route = data.geometry.coordinates
  const geojson = {
    type: 'Feature',
    properties: {},
    geometry: {
      type: 'LineString',
      coordinates: route
    }
  };
  // if the route already exists on the map, we'll reset it using setData
  if (map.getSource('route')) {
    map.getSource('route').setData(geojson)
  } else {
    map.addLayer({
      id: 'route',
      type: 'line',
      source: {
        type: 'geojson',
        data: geojson `your text`
      },
      layout: {
        'line-join': 'round',
        'line-cap': 'round'
      },
      paint: {
        'line-color': '#3887be',
        'line-width': 5,
        'line-opacity': 0.75
      }
    });
  }
  // add turn instructions here at the end
}
map.on('load', () => {
  map.addLayer({
    id: 'point',
    type: 'circle',
    source: {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: [{
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'Point',
            coordinates: start
          }
        }]
      }
    },
    paint: {
      'circle-radius': 10,
      'circle-color': '#3887be'
    }
  });
  map.on('click', (event) => {
    const coords = Object.keys(event.lngLat).map((key) => event.lngLat[key]);

    const end = {
      type: 'FeatureCollection',
      features: [{
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'Point',
          coordinates: coords
        }
      }]
    };
    if (map.getLayer('end')) {
      map.getSource('end').setData(end);

    } else {
      map.addLayer({
        id: 'end',
        type: 'circle',
        source: {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: [{
              type: 'Feature',
              properties: {},
              geometry: {
                type: 'Point',
                coordinates: coords
              }
            }]
          }
        },
        paint: {
          'circle-radius': 10,
          'circle-color': '#f30'
        }
      })


    }
    getRoute(coords);



  });
  // map.addSource('routes', {
  //     type: 'geojson',
  //     data:  {
  //             type: 'Feature',
  //             properties: {},
  //             geometry: {
  //                 type: 'LineString',
  //                 coordinates: route
  //             }
  //         }
  // });
  map.addSource('route', {
    'type': 'geojson',
    'data': {
      'type': 'Features',
      'properties': {},
      'geometry': {
        'type': 'LineString',
        'coordinates': [start, end]
      }
    }
  });


  map.addLayer({
      id: 'routearrows',
      type: 'symbol',
      source: 'route',
      layout: {
        'symbol-placement': 'line',
        'text-field': '▶',
        'text-size': ['interpolate', ['linear'],
          ['zoom'], 12, 24, 22, 60
        ],
        'symbol-spacing': ['interpolate', ['linear'],
          ['zoom'], 12, 30, 22, 160
        ],
        'text-keep-upright': false
      },
      paint: {
        'text-color': '#3887be',
        'text-halo-color': 'hsl(55, 11%, 96%)',
        'text-halo-width': 3
      }
    },
    'waterway-label'
  );

});