Estoy tratando de crear un modo de dibujo personalizado usando la @mapbox/mapbox-gl-draw . Quiero que el modo permita al usuario crear una ruta colocando puntos en el mapa. Después de colocar cada punto, me gustaría llamar a Mapbox Map Matching API para encontrar una ruta entre el punto anterior y el actual, y luego representar la línea resultante.

El problema al que me enfrento es que la línea no se representa hasta que se coloca otro punto en el mapa o el usuario cambia de modo. Supongo que este problema se debe al hecho de que la llamada API a Map Matching devuelve una promesa, aunque estoy muy lejos de ser un experto en Mapbox (acabo de empezar a usarlo hace unos días).

Adjuntaré un videoclip del problema que, con suerte, describe el problema mejor que yo: https://streamable.com/ao3ger

La función onClick del modo DrawRoute se parece a esto:

 DrawRoute.onClick = function (state, e) { var point = this.newFeature({ type: 'Feature', properties: { count: state.count, }, geometry: { type: 'Point', coordinates: [e.lngLat.lng, e.lngLat.lat], }, }); const features = this._ctx.store._features; if (Object.keys(features).length > 0) { const lastPoint = getLastPointDrawn(features) const coordinates = `${lastPoint.coordinates[0]},${lastPoint.coordinates[1]};${point.coordinates[0]},${point.coordinates[1]}`; // This is an async function that makes a call to the Map Matching API and returns the line coordinates getMatch(coordinates, [25, 25], 'walking').then((lineCoordinates) => { // Add new line feature to object here using coords const line = this.newFeature({ type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: lineCoordinates, }, }); this.addFeature(line); }); } this.addFeature(point); };

Y aquí está el método onDisplayFeatures :

 DrawRoute.toDisplayFeatures = function (state, geojson, display) { display(geojson); };

¿Alguien tiene orientación sobre cómo Mapbox representa cada característica? Puedo ver que el objeto DrawRoute contiene las nuevas características de línea cada vez que el usuario hace clic, pero no se pasan a toDisplayFeatures hasta que se crea el siguiente punto. ¡Gracias!